Enterprise Web Development: Building HTML5 Applications: From Desktop to Mobile

If you want to build your organizations next web application with HTML5, this practical book will help you sort through the various frameworks, libraries, and development options that populate this stack. Youll learn several of these approaches hands-on by writing multiple versions of a sample web app throughout the book, so you can determine the right strategy for your enterprise. Whats the best way to reach both mobile and desktop users? How about modularization, security, and test-driven development? With lots of working code samples, this book will help web application developers and software architects navigate the growing number of HTML5 and JavaScript choices available. The books sample apps are available at Copyright 4 Table of Contents 5 Preface 13 What鈥檚 an Enterprise Application? 13 Why the Authors Wrote This Book 14 Who This Book Is For 14 What This Book Is and Why It鈥檚 Important 15 Introducing the Save The Child Application 16 Is This Even an Enterprise App? 16 How We Are Going to Build This App 17 The Goals of the Book 18 Technologies Used in This Book 18 How the Book Is Organized 19 Conventions Used in This Book 21 The Source Code for the Examples 22 Safari庐 Books Online 23 How to Contact Us 23 Acknowledgments 24 Introduction 25 Moving from DHTML to HTML5 25 Developing in HTML5 28 Challenges of the Enterprise Developer 29 Summary 30 Part聽I.聽Building Your Application 31 Chapter聽1.聽Mocking Up the Save The Child Application 33 Considering Mobile First 34 Introducing Balsamiq Mockups 36 The Project Owner Talks to a Web Designer 37 Creating First Mockups 37 Turning Mockups into a Prototype 41 Single-Page Applications 41 Running Code Examples from WebStorm 42 Our First Prototype 43 Our Main Page JavaScript 48 The Footer Section 52 The Donate Section 54 Adding Video 60 Adding the HTML5 Video Element 60 Embedding YouTube Videos 62 Adding Geolocation Support 64 Geolocation Basics 66 Integration with Google Maps 69 Browser Feature Detection with Modernizr 72 Search and Multimarkers with Google Maps 77 Summary 81 Chapter聽2.聽Using Ajax and JSON 83 Understanding Ajax 83 Understanding JSON 84 Working with Ajax 85 Retrieving Data from the Server 86 Ajax: Good and Bad 89 Populating States and Countries from HTML Files 90 Using JSON 92 Populating States and Countries from JSON Files 94 Using Arrays in JSON 96 Loading Charity Events by Using Ajax and JSON 97 Using JSON in CMS 99 Handling JSON in Java 101 Compressing JSON 102 Adding Charts to Save The Child 103 Adding a Chart with the Canvas Element 103 Adding a Chart by Using SVG 107 Loading Data from Other Servers by Using JSONP 111 Beer and JSONP 113 Summary 115 Chapter聽3.聽Introducing the jQuery Library 117 Getting Started with jQuery 118 Hello World 120 Using Selectors and Filters 121 Testing jQuery Code with JSFiddle 122 Filtering Elements 123 Handling Events 124 Attaching Event Handlers and Elements by Using the Method on() 125 Delegating Events 126 Using Ajax with jQuery 127 Handy Shorthand Methods 129 Programming Save The Child by Using jQuery 130 Login and Donate 130 Loading HTML States and Countries by Using jQuery Ajax 134 Loading JSON States and Countries by Using jQuery Ajax 135 Submitting the Donate Form 137 Using jQuery Plug-ins 143 Validating the Donate Form by Using a Plug-in 144 Adding an Image Slider 146 Summary 149 Part聽II.聽Enterprise Considerations 151 Chapter聽4.聽Developing Web Applications in the Ext JS Framework 153 Exploring JavaScript Frameworks 153 Choosing to Use Ext JS 154 Downloading and Installing Ext JS 155 Becoming Familiar with Ext JS and Tooling 157 Creating the First Version of Hello World 157 Generating Applications with the Sencha CMD Tool 159 Choosing Which Ext JS Distribution to Use 163 Declaring, Loading, and Instantiating Classes 164 Best Practice: MVC 169 Exploring a Component鈥檚 Life Cycle 175 Working with Events 176 Specifying Layouts 177 Developing Save The Child with Ext JS 179 Setting Up the Eclipse IDE and Apache Tomcat 180 Running the Top Portion of the Save The Child UI 185 Completing Save The Child 199 Summary 214 Chapter聽5.聽Selected Productivity Tools for Enterprise Developers 215 Using Node.js, V8, and npm 216 Automating Everything with Grunt 216 Exploring the Simplest Gruntfile 216 Using Grunt to Run JSHint Checks 217 Watching for the File Changes 219 Using Bower 221 Using Yeoman 223 Using Ext JS and CDB for Productive Enterprise Web Development 227 Ext JS MVC Application Scaffolding 228 Generating a CRUD Application 231 Data Pagination 239 Summary 244 Chapter聽6.聽Modularizing Large-Scale JavaScript Projects 245 Understanding Modularization Basics 247 Exploring Roads to Modularization 249 The Module Pattern 249 CommonJS 252 Asynchronous Module Definition 255 Universal Module Definition 258 ECMAScript 6 Modules 259 Dicing the Save The Child Application into Modules 262 Inside the RequireJS Configuration: config.js 265 Writing AMD Modules 266 Loading Modules On Demand 267 Using RequireJS Plug-ins 270 Using RequireJS Optimizer 270 Loosely Coupled InterModule Communications with Mediator 274 Summary 280 Chapter聽7.聽Test-Driven Development with JavaScript 281 Why Test? 282 Testing Basics 282 Unit Testing 283 Integration Testing 283 Functional Testing 283 Load Testing 284 Test-Driven Development 286 Implementing TDD by Using QUnit 288 Behavior-Driven Development with Jasmine 292 Multibrowser Testing 303 Testing the DOM 308 Building Save The Child with TDD 310 Harnessing the ExtJS Application 310 Testing the Models 313 Testing the Controllers 314 Testing the Views 316 Setting Up the IDE for TDD 318 Summary 322 Chapter聽8.聽Upgrading HTTP to WebSocket 323 Using HTTP for Near Real-Time Applications 324 Polling 324 Long Polling 325 HTTP Streaming 325 Implementing Server-Sent Events 326 Introducing the WebSocket API 328 The WebSocket Interface 328 The Client-Side API 330 Using WebSocket Frameworks 336 The Portal 336 Atmosphere 337 Choosing the Format for Application-Level Messages 338 CSV 339 XML 339 JSON 340 Google Protocol Buffers 340 Using WebSocket with Proxies 342 Adding an Auction to Save The Child 343 Monitoring WebSocket Traffic by Using Chrome Developer Tools 350 Sniffing WebSocket Frames by Using Wireshark 353 Creating the Save The Child Auction Protocol 358 Summary 361 Chapter聽9.聽Introduction to Web Application Security 363 HTTP versus HTTPS 364 Authentication and Passwords 365 Basic and Digest Authentication 366 Single Sign-on 367 Handling Passwords 368 Authorization 369 OAuth-Based Authentication and Authorization 370 Federated Identity with OpenID Connect and JSON Web Tokens 371 OAuth 2.0 Main Actors 373 Save The Child and OAuth 373 Top Security Risks 375 Injection 375 Cross-Site Scripting 377 Regulatory Compliance and Enterprise Security 379 Summary 381 Part聽III.聽Responsive Web Design and Mobile Devices 383 Chapter聽10.聽Responsive Design: One Site Fits All 387 One or Two Versions of Code? 388 How Many User Agents Are There 392 Back to Mockups 395 CSS Media Queries 399 How Many Breakpoints? 408 Fluid Grids 409 Moving Away from Absolute Sizing 409 Window as a Grid 410 Responsive CSS: The Good News 419 Making Save The Child Responsive 420 Fluid Media 430 Summary 432 Chapter聽11.聽jQuery Mobile 435 Obtaining jQuery Mobile 435 Organizing the Code 436 Seeing How It Looks on Mobile Devices 439 Styling in jQuery Mobile 441 Adding Page Navigation 442 Adding Persistent Toolbars 447 Using jQuery Mobile for Save The Child 452 Prototyping the Mobile Version 453 Project Structure and Navigation 467 Selected Code Fragments 473 Summary 489 Chapter聽12.聽Sencha Touch 491 Introducing Sencha Touch 492 Performing Code Generation and Distribution 492 Constructing the UI 500 Using Sencha Touch for Save The Child 506 Building the Application 506 The Application Object 508 The Main View 511 Controller 517 Other Views in Save The Child 520 Stores and Models 538 Working with Landscape Mode 540 Comparing jQuery Mobile and Sencha Touch 541 Chapter聽13.聽Hybrid Mobile Applications 543 Native Applications 543 Native versus Web Applications 544 Hybrid Applications 545 Cordova and PhoneGap 545 Titanium 547 The Bottom Line 548 Introduction to the PhoneGap Workflows 548 Creating One More Hello World 549 Testing Applications on iOS Devices 555 Installing More Local SDKs 555 Using the Adobe PhoneGap Build Service 556 Distributing Mobile Applications 561 Save The Child with PhoneGap 563 Using PhoneGap to Package Any HTML5 Application 563 Adding Camera Access to Save The Child 564 Providing Sever-Side Support for Photo Images 568 Summary 571 Chapter聽14.聽Epilogue 573 HTML5 Is Not a Rosy Place 573 Dart: A Promising Language 575 HTML5 Is in Demand Today 576 Appendix聽A.聽Selected HTML5 APIs 577 Does Your Browser Support HTML5? 577 Handling Differences in Browsers 579 HTML5 Web Messaging API 579 Sending and Receiving Messages 580 Communicating with an iFrame 580 Applying the Mediator Design Pattern 584 Web Workers API 587 Creating and Communicating with Workers 588 Dedicated and Shared Workers 589 The WebSocket API 591 Offline Web Applications 591 Prerequisites for Developing Offline Web Applications 592 Application Cache API 593 Is Your Application Offline? 594 Options for Storing Data Locally 594 Web Storage Specification APIs 596 Introduction to IndexedDB 601 The History API 612 Modifying the Browser鈥檚 History by Using pushState() 613 Processing the popstate Event 615 Summary 617 Appendix聽B.聽Running Code Samples and IDE 619 Choosing an IDE 619 Running Code Samples in WebStorm 620 Using Two IDEs: WebStorm and Eclipse 621 Index 623 About the Authors 636 How do you make your enterprise applications or sites available on an assortment of mobile devices as well as the desktop? This hands-on guide shows you how to build HTML5 applications that will satisfy both requirements. You'll start by learning how to use HTML, JavaScript, CSS, and related technologies to build a sample website for the desktop, and then you'll discover how to adapt the code for the mobile web. In the process, you'll explore options for building a single codebase for both desktop and mobile, using recursive design, or developing two separate codebases. You'll also compare solutions offered by popular JavaScript frameworks, including jQuery, Ext JS, JQuery Mobile, and Sencha Touch. Learn how develop applications with HTML, JavaScript, CSS, Ajax, and JSON Discover how WebSockets is much more efficient than HTTP for data exchange Select the JavaScript framework that best fits your needs Learn options for moving your application to the mobile space Get code samples from GitHub, and view the sample application on the Web