BOOKS FOR PROFESSIONALS BY PROFESSIONALS® Odell RELATED Pro JavaScript Development Pro JavaScript Development is a practical guide for front-end web developers who are experienced at building web pages with HTML, CSS, and JavaScript, and now wish to advance their JavaScript skills to a higher level. You will learn how to build large, well-structured, high quality, mobile-optimized web sites and apps, using the latest supported browser APIs, language features, and tools. This book teaches and shows you in practical hands-on terms how you can: • Master the performance, reliability, stability, and code manageability of your JavaScript • Understand and write efficient object-oriented and prototypal code, including full understanding of the ‘this’ keyword • Boost the performance of your JavaScript code • Architect large web applications using common design patterns • Write high quality JavaScript code and avoid the pitfalls most likely to cause errors • Manage code dependencies with AMD and RequireJS • Develop for mobile, build games, and set up a real-time video chat using modern APIs such as Geolocation, Canvas and WebRTC • Document your code as the professionals do • Write command-line and web server applications in JavaScript with Node.js • Use build tools, such as Grunt and Gulp, to automate repetitive tasks and improve your development workflow Using real-world examples and applications that you’ll build yourself, Pro JavaScript Development has unique, practical content that will make you a better JavaScript developer. Become a master of the latest JavaScript coding techniques and tools, and harness its best capabilities today. What you’ll learn: • To build faster and more efficient web apps using the latest techniques • How to select the best libraries and frameworks for each project based on design patterns and sound principles • To manage JavaScript objects with inheritance through the ‘prototype’ property and the ‘this’ keyword • To unit test your JavaScript, to measure and improve the quality of your code • To create your own web server using Node.js, featuring real-time bidirectional communication with web sockets US $ 44.99 Shelve in ISBN 978-1-4302-6268-8 Web Development/JavaScript 54499 User level: Intermediate–Advanced SOURCE CODE ONLINE 9781430 262688 www.apress.com www.allitebooks.com For your convenience Apress has placed some of the front matter material after the index. Please use the Bookmarks and Contents at a Glance links to access them. www.allitebooks.com Contents at a Glance About the Author ................................................................................................................ xv About the Technical Reviewers ........................................................................................ xvii Acknowledgments ............................................................................................................. xix Introduction ....................................................................................................................... xxi ■ Chapter 1: Object-Oriented JavaScript ..............................................................................1 ■ Chapter 2: Documenting JavaScript ................................................................................37 ■ Chapter 3: Writing High-Quality JavaScript ....................................................................65 ■ Chapter 4: Boosting JavaScript Performance .................................................................91 ■ Chapter 5: Design Patterns: Creational .........................................................................119 ■ Chapter 6: Design Patterns: Structural ..........................................................................137 ■ Chapter 7: Design Patterns: Behavioral .........................................................................163 ■ Chapter 8: Design Patterns: Architectural .....................................................................199 ■ Chapter 9: Managing Code File Dependencies ..............................................................223 ■ Chapter 10: Mobile JavaScript Development ................................................................237 ■ Chapter 11: Building Games with Canvas API ...............................................................261 ■ Chapter 12: Using WebRTC for Video Chat .....................................................................321 ■ Chapter 13: Using Client-Side Templates ......................................................................341 ■ Chapter 14: The Node.js Application Platform ...............................................................369 v www.allitebooks.com ■ CONTENTS AT A GLANCE ■ Chapter 15: Build Tools and Automation .......................................................................391 ■ Chapter 16: Browser Developer Tools ...........................................................................423 Index .................................................................................................................................439 vi www.allitebooks.com Introduction I wrote this book for the benefit of developers who have familiarized themselves with the JavaScript language and who want to take their knowledge to the next level, to become professional JavaScript developers. As I see it, there are three aspects to modern JavaScript development: Coding, Capabilities, and Tooling. Because I believe that these topics are intertwined, rather than divide the book into three distinct sections, these threads run through every chapter. My mission is to help you create the highest quality, most maintainable, scalable, and efficient code you can, taking advantage of modern coding techniques, capabilities, and tooling to help you get there. As you follow through the material in this book, your coding skills should improve; you’ll learn the details of JavaScript objects, about context, scope, prototypes, and inheritance, as well as the latest updates to the language that have landed in the major browsers. You’ll also learn all about design patterns, how to comment your code in the best way for your project team, and how to boost the performance of your running code. You’ll discover capabilities of the language that you may not have been familiar with previously, including native APIs for drawing and building games that run in the browser, that allow for plugin-free video chat, and others specifically for mobile device development. Developers are taking advantage of tools and automation more than ever to help their development workflow and improve the quality of the code that they produce. In this book, you’ll discover how to check code quality, how to auto-generate a documentation website from your code, how to run a series of tasks on your code to improve your day-to-day workflow and to package your code up for release to the public, and, finally, how to use the developer tools built into the major browsers to help debug and profile your code as it runs in place. By the end of this book, you should have the knowledge and experience to be a professional JavaScript developer, capable of building applications that are high-quality, maintainable, scalable, and efficient. Let’s get started! xxi www.allitebooks.com CHAPTER 1 Object-Oriented JavaScript If you’ve been developing websites for some time, you may have heard other programmers decree that JavaScript is not an object-oriented programming language, and often in the same sentence write off the language as a result. As JavaScript developers, it’s up to us to educate each other and any naysayers about the JavaScript language, for it is indeed an object-oriented language, and a very powerful one at that. In reality, when other programmers dismiss JavaScript, they are often belittling it for the fact that it does not adhere to all the same structures and conventions of classical languages, such as C++, Java, PHP, and Objective-C. This is not necessarily a negative, in my opinion, as JavaScript, if written in the right way, actually provides more flexibility by not having such a rigid structure enforced upon it. In this chapter, I will explain how you can harness the power of JavaScript to write code using object-oriented programming principles adopted by other languages, emphasizing the ways in which this is made more flexible through JavaScript. I will also cover some of the built-in objects contained in the language itself, and some lesser-known facets of these. ■ Note A classical programming language is one that defines and creates objects through blueprints or templates known as classes, hence the name. Objects in JavaScript An object in JavaScript is a standalone entity consisting of one or more related variables and functions, known as properties and methods, respectively. Objects are used to group together related concepts or functionality, often things that tie back to the real world or to specific software behavior. They make code easier to understand for developers, and so ultimately they make code easier to read and write. Custom Objects The simplest way of creating your own object for use in your JavaScript code is to use object literal notation, denoted by curly braces, when defining a variable. Properties and methods can then be attached to the object by encapsulating their names and values within the braces, using the format shown in Listing 1-1. Here we create a new object to represent a house, with two properties and two methods. Once created, we can read and write properties and methods