Enterprise web development

www.it-ebooks.info www.it-ebooks.info Enterprise Web Development Yakov Fain, Victor Rasputnis, Anatole Tartakovsky, and Viktor Gamov www.it-ebooks.info Enterprise Web Development by Yakov Fain, Victor Rasputnis, Anatole Tartakovsky, and Viktor Gamov Copyright © 2014 Yakov Fain, Victor Rasputnis, Anatole Tartakovsky, and Viktor Gamov All rights reserved Printed in the United States of America Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472 O’Reilly books may be purchased for educational, business, or sales promotional use Online editions are also available for most titles (http://my.safaribooksonline.com) For more information, contact our corporate/ institutional sales department: 800-998-9938 or corporate@oreilly.com Editors: Mary Treseler and Brian Anderson Production Editor: Melanie Yarbrough Copyeditor: Sharon Wilkey Proofreader: Kim Cofer June 2014: Indexer: Judith McConville Cover Designer: Karen Montgomery Interior Designer: David Futato Illustrator: Rebecca Demarest First Edition Revision History for the First Edition: 2014-06-30: First release See http://oreilly.com/catalog/errata.csp?isbn=9781449356811 for release details Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc Enterprise Web Development, the cover image of a Roseate Spoonbill, and related trade dress are trademarks of O’Reilly Media, Inc Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks Where those designations appear in this book, and O’Reilly Media, Inc was aware of a trademark claim, the designations have been printed in caps or initial caps While every precaution has been taken in the preparation of this book, the publisher and authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein ISBN: 978-1-449-35681-1 [LSI] www.it-ebooks.info Table of Contents Preface xi Introduction xxiii Part I Building Your Application Mocking Up the Save The Child Application Considering Mobile First Introducing Balsamiq Mockups The Project Owner Talks to a Web Designer Creating First Mockups Turning Mockups into a Prototype Single-Page Applications Running Code Examples from WebStorm Our First Prototype Our Main Page JavaScript The Footer Section The Donate Section Adding Video Adding the HTML5 Video Element Embedding YouTube Videos Adding Geolocation Support Geolocation Basics Integration with Google Maps Browser Feature Detection with Modernizr Search and Multimarkers with Google Maps Summary 7 11 11 12 13 18 22 24 30 30 32 34 36 39 42 47 51 Using Ajax and JSON 53 Understanding Ajax 53 iii www.it-ebooks.info Understanding JSON Working with Ajax Retrieving Data from the Server Ajax: Good and Bad Populating States and Countries from HTML Files Using JSON Populating States and Countries from JSON Files Using Arrays in JSON Loading Charity Events by Using Ajax and JSON Using JSON in CMS Handling JSON in Java Compressing JSON Adding Charts to Save The Child Adding a Chart with the Canvas Element Adding a Chart by Using SVG Loading Data from Other Servers by Using JSONP Beer and JSONP Summary 54 55 56 59 60 62 64 66 67 69 71 72 73 73 77 81 83 85 Introducing the jQuery Library 87 Getting Started with jQuery Hello World Using Selectors and Filters Testing jQuery Code with JSFiddle Filtering Elements Handling Events Attaching Event Handlers and Elements by Using the Method on() Delegating Events Using Ajax with jQuery Handy Shorthand Methods Programming Save The Child by Using jQuery Login and Donate Loading HTML States and Countries by Using jQuery Ajax Loading JSON States and Countries by Using jQuery Ajax Submitting the Donate Form Using jQuery Plug-ins Validating the Donate Form by Using a Plug-in Adding an Image Slider Summary Part II iv | Enterprise Considerations Table of Contents www.it-ebooks.info 88 90 91 92 93 94 95 96 97 99 100 100 104 105 107 113 114 116 119 Developing Web Applications in the Ext JS Framework 123 Exploring JavaScript Frameworks Choosing to Use Ext JS Downloading and Installing Ext JS Becoming Familiar with Ext JS and Tooling Creating the First Version of Hello World Generating Applications with the Sencha CMD Tool Choosing Which Ext JS Distribution to Use Declaring, Loading, and Instantiating Classes Best Practice: MVC Exploring a Component’s Life Cycle Working with Events Specifying Layouts Developing Save The Child with Ext JS Setting Up the Eclipse IDE and Apache Tomcat Running the Top Portion of the Save The Child UI Completing Save The Child Summary 123 124 125 127 127 129 133 134 139 145 146 147 149 150 155 169 184 Selected Productivity Tools for Enterprise Developers 185 Using Node.js, V8, and npm Automating Everything with Grunt Exploring the Simplest Gruntfile Using Grunt to Run JSHint Checks Watching for the File Changes Using Bower Using Yeoman Using Ext JS and CDB for Productive Enterprise Web Development Ext JS MVC Application Scaffolding Generating a CRUD Application Data Pagination Summary 186 186 186 187 189 191 193 197 198 201 209 214 Modularizing Large-Scale JavaScript Projects 215 Understanding Modularization Basics Exploring Roads to Modularization The Module Pattern CommonJS Asynchronous Module Definition Universal Module Definition ECMAScript Modules Dicing the Save The Child Application into Modules 217 219 219 222 225 228 229 232 Table of Contents www.it-ebooks.info | v Inside the RequireJS Configuration: config.js Writing AMD Modules Loading Modules On Demand Using RequireJS Plug-ins Using RequireJS Optimizer Loosely Coupled InterModule Communications with Mediator Summary 235 236 237 240 240 244 250 Test-Driven Development with JavaScript 251 Why Test? Testing Basics Unit Testing Integration Testing Functional Testing Load Testing Test-Driven Development Implementing TDD by Using QUnit Behavior-Driven Development with Jasmine Multibrowser Testing Testing the DOM Building Save The Child with TDD Harnessing the ExtJS Application Testing the Models Testing the Controllers Testing the Views Setting Up the IDE for TDD Summary 252 252 253 253 253 254 256 258 262 273 278 280 280 283 284 286 288 292 Upgrading HTTP to WebSocket 293 Using HTTP for Near Real-Time Applications Polling Long Polling HTTP Streaming Implementing Server-Sent Events Introducing the WebSocket API The WebSocket Interface The Client-Side API Using WebSocket Frameworks The Portal Atmosphere Choosing the Format for Application-Level Messages CSV vi | Table of Contents www.it-ebooks.info 294 294 295 295 296 298 298 300 306 306 307 308 309 XML JSON Google Protocol Buffers Using WebSocket with Proxies Adding an Auction to Save The Child Monitoring WebSocket Traffic by Using Chrome Developer Tools Sniffing WebSocket Frames by Using Wireshark Creating the Save The Child Auction Protocol Summary 309 310 310 312 313 320 323 328 331 Introduction to Web Application Security 333 HTTP versus HTTPS Authentication and Passwords Basic and Digest Authentication Single Sign-on Handling Passwords Authorization OAuth-Based Authentication and Authorization Federated Identity with OpenID Connect and JSON Web Tokens OAuth 2.0 Main Actors Save The Child and OAuth Top Security Risks Injection Cross-Site Scripting Regulatory Compliance and Enterprise Security Summary Part III 334 335 336 337 338 339 340 341 343 343 345 345 347 349 351 Responsive Web Design and Mobile Devices 10 Responsive Design: One Site Fits All 357 One or Two Versions of Code? How Many User Agents Are There Back to Mockups CSS Media Queries How Many Breakpoints? Fluid Grids Moving Away from Absolute Sizing Window as a Grid Responsive CSS: The Good News Making Save The Child Responsive Fluid Media 358 362 365 369 378 379 379 380 389 390 400 Table of Contents www.it-ebooks.info | vii Summary 402 11 jQuery Mobile 405 Obtaining jQuery Mobile Organizing the Code Seeing How It Looks on Mobile Devices Styling in jQuery Mobile Adding Page Navigation Adding Persistent Toolbars Using jQuery Mobile for Save The Child Prototyping the Mobile Version Project Structure and Navigation Selected Code Fragments Summary 405 406 409 411 412 417 422 423 437 443 459 12 Sencha Touch 461 Introducing Sencha Touch Performing Code Generation and Distribution Constructing the UI Using Sencha Touch for Save The Child Building the Application The Application Object The Main View Controller Other Views in Save The Child Stores and Models Working with Landscape Mode Comparing jQuery Mobile and Sencha Touch 462 462 470 476 476 478 481 487 490 508 510 511 13 Hybrid Mobile Applications 513 Native Applications Native versus Web Applications Hybrid Applications Cordova and PhoneGap Titanium The Bottom Line Introduction to the PhoneGap Workflows Creating One More Hello World Testing Applications on iOS Devices Installing More Local SDKs Using the Adobe PhoneGap Build Service Distributing Mobile Applications viii | Table of Contents www.it-ebooks.info 513 514 515 515 517 518 518 519 525 525 526 531 ...www.it-ebooks.info Enterprise Web Development Yakov Fain, Victor Rasputnis, Anatole Tartakovsky, and Viktor Gamov www.it-ebooks.info Enterprise Web Development by Yakov Fain, Victor... don’t believe that a web application should all this to qualify for the adjective enterprise Let’s create a simple definition of an enterprise web application: An enterprise web application is... verification, and use geocoding is Just using a web application in a business doesn’t make it an enterprise web application If you take Gmail as is, it won’t be an enterprise application until you integrate