Enterprise Web Development Yakov Fain, Victor Rasputnis, Anatole Tartakovsky, and Viktor Gamov Beijing Cambridge Farnham Koln Sebastopol Tokyo O'REILLY
Table of Contents Preface Introduction xi xxiii Part I. Building Your Application 1. Mocking Up the Save The Child Application 3 Considering Mobile First 4 Introducing Balsamiq Mockups 6 The Project Owner Talks to a Web Designer 7 Creating First Mockups 7 Turning Mockups into a Prototype 11 Single-Page Applications 11 Running Code Examples from WebStorm 12 Our First Prototype 13 Our Main Page JavaScript 18 The Footer Section 22 The Donate Section 24 Adding Video 30 Adding the HTML5 Video Element 30 Embedding YouTube Videos 33 Adding Geolocation Support 35 Geolocation Basics 37 Integration with Google Maps 39 Browser Feature Detection with Modernizr 43 Search and Multimarkers with Google Maps 48 Summary 52 2. Using Ajax and JSON 53 Understanding Ajax 53 iii
Table Understanding JSON 54 Working with Ajax 55 Retrieving Data from the Server 56 Ajax: Good and Bad 59 Populating States and Countries from HTML Files 60 Using JSON 62 Populating States and Countries from JSON Files 64 Using Arrays in JSON 66 Loading Charity Events by Using Ajax and JSON 67 Using JSON in CMS 69 Handling JSON in Java 71 Compressing JSON 72 Adding Charts to Save The Child 73 Adding a Chart with the Canvas Element 74 Adding a Chart by Using SVG 78 Loading Data from Other Servers by Using JSONP 81 Beer and JSONP 83 Summary 85 3. introducing the jquery Library 87 Getting Started with jquery 88 Hello World 90 Using Selectors and Filters 91 Testing jquery Code with JSFiddle 92 Filtering Elements 93 Handling Events 94 Attaching Event Handlers and Elements by Using the Method on() 95 Delegating Events 96 Using Ajax with jquery 97 Handy Shorthand Methods 99 Programming Save The Child by Using jquery 100 Login and Donate 100 Loading HTML States and Countries by Using jquery Ajax 104 Loading JSON States and Countries by Using jquery Ajax 105 Submitting the Donate Form 108 Using jquery Plug-ins 114 Validating the Donate Form by Using a Plug-in 114 Adding an Image Slider 117 Summary 119 Part II. Enterprise Considerations iv of Contents
4. Developing Web Applications in the Ext JS Framework 123 Exploring JavaScript Frameworks 123 Choosing to Use Ext JS 124 Downloading and Installing Ext JS 125 Becoming Familiar with Ext JS and Tooling 127 Creating the First Version of Hello World 127 Generating Applications with the Sencha CMD Tool 129 Choosing Which Ext JS Distribution to Use 134 Declaring, Loading, and Instantiating Classes 134 Best Practice: MVC 139 Exploring a Component's Life Cycle 146 Working with Events 147 Specifying Layouts 148 Developing Save The Child with Ext JS 150 Setting Up the Eclipse IDE and Apache Tomcat 150 Running the Top Portion of the Save The Child UI 156 Completing Save The Child 170 Summary 185 5. Selected Productivity Tools for Enterprise Developers 187 Using Node.js, V8, and npm 188 Automating Everything with Grunt 188 Exploring the Simplest Gruntfile 189 Using Grunt to Run JSHint Checks 189 Watching for the File Changes 192 Using Bower 193 Using Yeoman 195 Using Ext JS and CDB for Productive Enterprise Web Development 199 Ext JS MVC Application Scaffolding 200 Generating a CRUD Application 203 Data Pagination 211 Summary 6. Modularizing Large-Scale JavaScript Projects 217 Understanding Modularization Basics 219 Exploring Roads to Modularization 221 The Module Pattern 221 CommonJS Asynchronous Module Definition 227 Universal Module Definition 230 ECMAScript 6 Modules 231 Dicing the Save The Child Application into Modules 234 216 224 Table of Contents v
Inside the RequireJS Configuration: config.js 237 Writing AMD Modules 238 Loading Modules On Demand 239 Using RequireJS Plug-ins 242 Using RequireJS Optimizer 242 Loosely Coupled InterModule Communications with Mediator 246 Summary 252 7. Test-Driven Development with JavaScript 253 Why Test? 254 Testing Basics 254 Unit Testing 255 Integration Testing 255 Functional Testing 255 Load Testing 256 Test-Driven Development 259 Implementing TDD by Using QUnit 260 Behavior-Driven Development with Jasmine 264 Multibrowser Testing 275 Testing the DOM 280 Building Save The Child with TDD 282 Harnessing the ExtJS Application 282 Testing the Models 285 Testing the Controllers 286 Testing the Views 288 Setting Up the IDE for TDD 290 Summary 294 8. Upgrading HTTP to WebSocket 295 Using HTTP for Near Real-Time Applications 296 Polling 296 Long Polling 297 HTTP Streaming 297 Implementing Server-Sent Events 298 Introducing the WebSocket API 300 The WebSocket Interface 300 The Client-Side API 302 Using WebSocket Frameworks 308 The Portal 308 Atmosphere 309 Choosing the Format for Application-Level Messages 310 CSV 311 vi Tableof Contents
XML 311 JSON 312 Google Protocol Buffers 312 Using WebSocket with Proxies 314 Adding an Auction to Save The Child 315 Monitoring WebSocket Traffic by Using Chrome Developer Tools 322 Sniffing WebSocket Frames by Using Wireshark 325 Creating the Save The Child Auction Protocol 330 Summary 333 9. Introduction to Web Application Security 335 HTTP versus HTTPS 336 Authentication and Passwords 337 Basic and Digest Authentication 338 Single Sign-on 339 Handling Passwords 340 Authorization 341 OAuth-Based Authentication and Authorization 342 Federated Identity with OpenID Connect and JSON Web Tokens 343 OAuth 2.0 Main Actors 345 Save The Child and OAuth 345 Top Security Risks 347 Injection 347 Cross-Site Scripting 349 Regulatory Compliance and Enterprise Security 351 Summary 353 Part III. Responsive Web Design and Mobile Devices 10. Responsive Design: One Site Fits All 359 One or Two Versions of Code? 360 How Many User Agents Are There 364 Back to Mockups 367 CSS Media Queries 371 How Many Breakpoints? 380 Fluid Grids 381 Moving Away from Absolute Sizing 381 Window as a Grid 382 CSS: The Good News 392 Responsive Making Save The Child Responsive 393 Fluid Media 403 Tableof Contents vii
Summary 405 11. jquery Mobile 407 Obtaining jquery Mobile 407 Organizing the Code 408 Seeing How It Looks on Mobile Devices 411 Styling in jquery Mobile 413 Adding Page Navigation 414 Adding Persistent Toolbars 419 Using jquery Mobile for Save The Child 424 Prototyping the Mobile Version 425 Project Structure and Navigation 439 Selected Code Fragments 445 Summary 461 12. Sencha Touch 463 Introducing Sencha Touch 464 Performing Code Generation and Distribution 465 Constructing the UI 472 Using Sencha Touch for Save The Child 479 Building the Application 479 The Application Object 481 The Main View 484 Controller 490 Other Views in Save The Child 493 Stores and Models 511 Working with Landscape Mode 513 ComparingjQuery Mobile and Sencha Touch 514 13. Hybrid Mobile Applications 517 Native Applications 517 Native versus Web Applications 518 Hybrid Applications 519 Cordova and PhoneGap 519 Titanium 521 The Bottom Line 522 Introduction to the PhoneGap Workflows 523 Creating One More Hello World 524 Testing Applications on ios Devices 529 Installing More Local SDKs 530 Using the Adobe PhoneGap Build Service 530 Distributing Mobile Applications 536 viii Table of Contents
Save The Child with PhoneGap 537 Using PhoneGap to Package Any HTML5 Application 538 Adding Camera Access to Save The Child 539 Providing Sever-Side Support for Photo Images 542 Summary 545 14. Epilogue 547 HTML5 Is Not a Rosy Place 547 Dart: A Promising Language 549 HTML5 Is in Demand Today 550 A. Selected HTML5 APIs 551 B. Running Code Samples and IDE 593 Index 597 Table of Contents ix