Advanced Ajax: Architecture and Best Practices

“I very much enjoyed how this book covers the full Ajax application lifecycle and not only coding techniques. Anyone who is looking to become a professional front-end developer will appreciate the architectural insight and best practices delivered by this book.”  — Andi Gutmans, Co-Founder & Co-Chief Technology Officer of Zend Technologies

 

Mission-Critical Ajax: Maximizing Scalability, Performance, Security, Reliability, and Maintainability

 

Advanced Ajax: Architecture and Best Practices is the definitive guide to building business-critical, production-quality Web applications with Ajax. Shawn M. Lauriat systematically addresses the design, architecture, and development issues associated with Ajax, offering proven patterns and robust code examples available in no other book. You’ll find best practices for addressing the full spectrum of issues enterprise Ajax developers face: scalability, performance, security, reliability, flexibility, maintainability, and reusability.

 

Writing for experienced Web developers, Lauriat delivers fresh ideas and elegant solutions: meaty technical content, presented with exceptional clarity. Among the many topics he covers in unprecedented depth: cleanly implementing JavaScript custom events to reduce coupling and to enhance flexibility; overcoming Ajax’s traditional accessibility limitations; reducing network latency through compression and other techniques; and much more. Coverage includes 

• Planning Ajax interfaces for simplicity, clarity, and intuitiveness
• Creating scalable, maintainable architectures for client-side JavaScript
• Using the latest tools to profile, validate, and debug client-side code
• Architecting the server side for security and functionality, while restricting loaded data, objects, and actions to current requests
• Protecting against the most widespread and significant Ajax security risks
• Optimizing every component of an Ajax application, from server-side scripts to database interactions
• Introducing cutting-edge Ajax: game development, Ajax with canvas, and Ajax for enterprise applications

About the Web Site

This book’s companion Web site (http://advancedajax.frozen-o.com) doesn’t just provide all the code: It shows code examples in action, as building blocks of a real Web application interface.

Online Sample Chapter

Scaling and Maintaining Ajax

Sample Chapter(s)

Download Chapter 6: Scalable, Maintainable Ajax

Index

Download the Index

Introduction

Download the Introduction

Table of Contents

Acknowledgments ......................................................................................................... xiii

About the Author ............................................................................................................xv

Introduction ............................................................................................... 1

0.1 Ajax, the Acronym .............................................................................. 2

    0.1.1 Asynchronous.......................................................................... 3

    0.1.2 JavaScript ................................................................................ 3

    0.1.3 XML ....................................................................................... 4

0.2 This Book’s Intentions ........................................................................ 5

0.3 Prerequisites for This Book ................................................................. 8

Chapter 1 Usability ................................................................................................11

1.1 Interface Versus Showcase ................................................................. 12

    1.1.1 Implementation .................................................................... 14

1.2 User Expectations ............................................................................. 16

1.3 Indicators and Other Forms of User Feedback .................................. 17

    1.3.1 The Throbber ........................................................................ 17

    1.3.2 Progress Indicators ................................................................ 20

    1.3.3 Keeping the User in the Loop ................................................ 22

1.4 Semantic Markup ............................................................................. 30    

    1.4.1 More Accessible ..................................................................... 30

    1.4.2 Easier to Use ......................................................................... 32

    1.4.3 Easier to Maintain ................................................................. 33

    1.4.4 Easier to Parse ....................................................................... 34

1.5 What CSS and JavaScript Have in Common .................................... 37

Chapter 2 Accessibility ..........................................................................................43

2.1 WCAG and Section 508 ................................................................... 44

    2.1.1 WCAG ................................................................................ 45

    2.1.2 Section 508 ........................................................................... 51

2.2 Screen Readers Can Handle Ajax ...................................................... 53

    2.2.1 Content Replacement ........................................................... 54

    2.2.2 Form Validation .................................................................... 55

2.3 Unobtrusive Ajax .............................................................................. 56

2.4 Designing with Accessibility in Mind ................................................ 58

    2.4.1 High-Contrast Design ........................................................... 59

    2.4.2 Zoomable Interface ............................................................... 60

    2.4.3 Easily Targeted Controls ........................................................ 62

2.5 WAI-ARIA ........................................................................................ 63

Chapter 3 Client-Side Application Architecture ....................................................67

3.1 Objects and Event Triggering ............................................................ 68

    3.1.1 Native Object Event Handling .............................................. 70

    3.1.2 JavaScript Objects ................................................................. 71

3.2 Model-View-Controller Design Pattern ............................................ 87

    3.2.1 The Model ............................................................................ 88

    3.2.2 The View .............................................................................. 92

    3.2.3 The Controller .................................................................... 101

3.3 Event-Driven Application Development ......................................... 104

    3.3.1 Advantages of Architecture .................................................. 104

Chapter 4 Debugging Client-Side Code ..............................................................107

4.1 Validation, Validation, Validation .................................................... 108

    4.1.1 Markup Validator ................................................................ 109

    4.1.2 CSS Validator ...................................................................... 110

    4.1.3 Semantic Extractor .............................................................. 111

4.2 Browser Tools and Plugins .............................................................. 111

    4.2.1 The Console ........................................................................ 112

    4.2.2 Internet Explorer ................................................................. 113

    4.2.3 Firefox ................................................................................. 116

    4.2.4 Opera .................................................................................. 122

    4.2.5 Safari ................................................................................... 124

4.3 JavaScript Profiling ......................................................................... 126

    4.3.1 Recognizing Bottlenecks ...................................................... 128

4.4 Unit Testing .................................................................................... 132

    4.4.1 Assertions ............................................................................ 134

    4.4.2 Test Setup ............................................................................ 135

    4.4.3 The Test Itself ...................................................................... 137

    4.4.4 Mock Objects ...................................................................... 140

    4.4.5 Test Suites ........................................................................... 143

Chapter 5 Performance Optimization ..................................................................145

5.1 Database Performance ..................................................................... 146

    5.1.1 Schema ............................................................................... 146

    5.1.2 Queries ............................................................................... 150

5.2 Bandwidth and Latency .................................................................. 154

    5.2.1 Bandwidth .......................................................................... 154

    5.2.2 Latency ............................................................................... 158

5.3 Cache.............................................................................................. 160

    5.3.1 Filesystem............................................................................ 161

    5.3.2 Memory .............................................................................. 163

    5.3.3 Completing the Implementation ......................................... 170

5.4 Taking Advantage of HTTP/1.1 ..................................................... 171

    5.4.1 If-Modified-Since ................................................................ 174

    5.4.2 Range .................................................................................. 176

5.5 PHP Profiling ................................................................................. 178

    5.5.1 Advanced PHP Debugger .................................................... 179

    5.5.2 Xdebug ............................................................................... 182

Chapter 6 Scalable, Maintainable Ajax ................................................................187

6.1 General Practices ............................................................................. 188

    6.1.1 Processor Usage ................................................................... 188

    6.1.2 Memory Usage .................................................................... 191

6.2 A Multitude of Simple Interfaces .................................................... 194

    6.2.1 Modularity .......................................................................... 195

    6.2.2 Late Loading ....................................................................... 198

6.3 Dense, Rich Interfaces .................................................................... 201    

    6.3.1 Monolithic Applications ...................................................... 201

    6.3.2 Preloading ........................................................................... 204

Chapter 7 Server-Side Application Architecture ..................................................207

7.1 Designing Applications for Multiple Interfaces ............................... 208

7.2 Model-View-Controller Design Pattern .......................................... 212

    7.2.1 The Model .......................................................................... 212

    7.2.2 The Controller .................................................................... 222

    7.2.3 The View ............................................................................ 231

7.3 Using the Factory Pattern with Your Template Engine .................... 237

Chapter 8 Keeping a Web Application Secure ......................................................243

8.1 HTTPS .......................................................................................... 244

    8.1.1 Why Use HTTPS? .............................................................. 245

    8.1.2 Security Versus Performance ................................................ 247

8.2 SQL Injection ................................................................................. 247

    8.2.1 Don’t Use Magic Quotes ..................................................... 248

    8.2.2 Filtering .............................................................................. 249

    8.2.3 Prepared Statements ............................................................ 251

8.3 XSS ................................................................................................. 252

    8.3.1 Escaping for Markup ........................................................... 252

    8.3.2 Escaping for URLs .............................................................. 257

8.4 CSRF .............................................................................................. 258

    8.4.1 Check the Referer ................................................................ 259

    8.4.2 Submit an Additional Header .............................................. 261

    8.4.3 Secondary, Random Tokens ................................................. 262

8.5 Don’t Trust the User ........................................................................ 265

8.6 Don’t Trust the Server ..................................................................... 266

Chapter 9 Documenting ......................................................................................271

9.1 Yes, You Need to Document ........................................................... 272

    9.1.1 Jog Your Own Memory ....................................................... 272

    9.1.2 Lessen the Learning Curve .................................................. 274

    9.1.3 Mind That Bus .................................................................... 274

9.2 API Documentation ........................................................................ 275

    9.2.1 phpDocumentor ................................................................. 275

    9.2.2 JSDoc ................................................................................. 283

9.3 Internal Developer Documentation ................................................ 288

    9.3.1 Coding Standards ................................................................ 289

    9.3.2 Programming Guides ...................................................... 293

    9.3.3 Style Guides .................................................................... 295

Chapter 10 Game Development...........................................................................297

10.1 A Different Kind of Security ...................................................... 299

    10.1.1 Validation ..................................................................... 300

    10.1.2 Server-Side Logic .......................................................... 302

10.2 Single Player ............................................................................... 304

    10.2.1 Double Buffering with Canvas ...................................... 305

10.3 “Real-Time” Multiplayer ............................................................. 310

    10.3.1 Streaming Response ...................................................... 310

    10.3.2 WHATWG event-source Element ................................ 315

    10.3.3 Predictive Animation .................................................... 317

Chapter 11 Conclusions ......................................................................................321

11.1 Remember the Users ................................................................... 322

11.2 Design for the Future .................................................................. 323

11.3 Develop for the Future................................................................ 324

Bibliography ..........................................................................................................325

Appendix A Resources ..........................................................................................329

Appendix A OpenAjax ..........................................................................................333

Conformance ......................................................................................... 334

Namespace Registration ......................................................................... 337

Event Management ................................................................................ 338

Index ......................................................................................................................341