Alex MacCaw - JavaScript Web Applications (Otx)

Copyright 2011 Alex MacCaw

OReilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (.

Nutshell Handbook, the Nutshell Handbook logo, and the OReilly logo are registered trademarks of OReilly Media, Inc. JavaScript Web Applications , the image of a Long-eared owl, and related trade dress are trademarks of OReilly 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 OReilly 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 author assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.

This book isnt for JavaScript newbies, so if youre unfamiliar with the basics of the language, I advise you to pick up one of the many good books on the subject, such as JavaScript: The Good Parts by Douglas Crockford (OReilly). This book is aimed at developers with some JavaScript experience, perhaps using a library like jQuery, who want to get into building more advanced JavaScript applications. Additionally, many sections of the bookespecially the appendixeswill also be a useful reference for experienced JavaScript developers.

The chapter starts with a discussion of JavaScripts history and covers some of the underlying influences of its current implementation and community. We then give you an introduction to the MVC architectural pattern, in addition to exploring JavaScripts constructor functions, prototypal inheritance, and how to create your own class library.

This chapter gives you a brief primer on browser events, including their history, API, and behavior. Well cover how to bind to events with jQuery, use delegation, and create custom events. Well also explore using non-DOM events with the PubSub pattern.

This chapter explains how to use MVC models in your application, as well as for loading and manipulating remote data. Well explain why MVC and namespacing are important and then build our own ORM library to manage model data. Next, well cover how to load in remote data using JSONP and cross-domain Ajax. Finally, youll learn how to persist model data using HTML5 Local Storage and submitting it to a RESTful server.

This chapter demonstrates how to use a controller pattern to persist state on the client side. Well discuss how to use modules to encapsulate logic and prevent global namespace pollution, then well cover how to cleanly interface controllers with views, listening to events and manipulating the DOM. Finally, well discuss routing, first using the URLs hash fragment, and then using the newer HTML5 History API, making sure to explain the pros and cons of both approaches.

This is where we cover views and JavaScript templating. We cover the different ways of dynamically rendering views, as well as various templating libraries and where to actually store the templates (inline in the page, in script tags, or with remote loading). Then, youll learn about data bindingconnecting your model controllers and views to dynamically synchronize model data and view data.

In this chapter, well get into the details of JavaScript dependency management using CommonJS modules. Youll learn the history and thinking behind the CommonJS movement, how to create CommonJS modules in the browser, and various module loader libraries to help you with this, such as Yabble and RequireJS. Next, well discuss how to automatically wrap up modules server side, increasing performance and saving time. Finally, well cover various alternatives to CommonJS, such as Sprockets and LABjs.

Here, well get into some of the benefits HTML5 gives us: the File API. Well cover browser support, multiple uploads, receiving files that are dragged onto the browser, and files from clipboard events. Next, well explore reading files using blobs and slices, and displaying the result in the browser. Well cover uploading files in the background using the new XMLHttpRequest Level 2 specification, and finally, well show you how to give your users live upload progress bars and how to integrate uploads with jQuerys Ajax API.

Well take a look at some of the exciting developments with real-time applications and WebSockets. First, the chapter covers real times rather turbulent history and its current support in the browsers. Then, well get into the details of WebSockets and their high-level implementation, browser support, and JavaScript API. Next, well demonstrate a simple RPC server that uses WebSockets to connect up servers and clients. Well then take a look at Socket.IO and learn how real time fits into applications architecture and user experience.

This chapter covers testing and debugging, a crucial part of JavaScript web application development. Well look at the issues surrounding cross-browser testing, which browsers you should test in, and unit tests and testing libraries, such as QUnit and Jasmine. Next, well take a look at automated testing and continuous integration servers, such as Selenium. Well then get into the debugging side of things, exploring Firefox and WebKits Web Inspectors, the console, and using the JavaScript debugger.

This chapter covers another importantbut often neglectedpart of JavaScript web applications: deployment. Chiefly, well consider performance and how to use caching, minification, gzip compression, and other techniques to decrease your applications initial load time. Finally, well briefly cover how to use CDNs to serve static content on your behalf, and how to use the browsers built-in auditor, which can be immensely helpful in improving your sites performance.