Skip to main content
main-content

Über dieses Buch

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 JavaScriptUnderstand and write efficient object-oriented and prototypal code, including full understanding of the ‘this’ keywordBoost the performance of your JavaScript codeArchitect large web applications using common design patternsWrite high quality JavaScript code and avoid the pitfalls most likely to cause errors Manage code dependencies with AMD and RequireJSDevelop for mobile, build games, and set up a real-time video chat using modern APIs such as Geolocation, Canvas and WebRTCDocument your code as the professionals doWrite 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.

Inhaltsverzeichnis

Frontmatter

Chapter 1. Object-Oriented JavaScript

Abstract
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.
Den Odell

Chapter 2. Documenting JavaScript

Abstract
In the previous chapter, we looked at object-oriented JavaScript and coding conventions. The purpose of writing OO code and establishing conventions is to ensure that the code is legible and understandable for a developer. A JavaScript engine in a browser isn’t concerned about how neatly your code is written, or whether it makes sense to you—it merely follows a set of rules on whatever it’s been given. It’s more important for you and your team to understand the code you’ve written and how to work with it as this simplifies the task of maintaining your code base. Code maintainability means that teams of any size can collaborate on the same set of files with a common understanding of how to add, amend, and remove parts of that code with consistent results. In addition to the code itself being understandable, you will find you need to add small comments or larger blocks of documentation to explain to other developers, including yourself if you don’t remember your reasoning in future, what task a particular section of code performs and how it is to be used.
Den Odell

Chapter 3. Writing High-Quality JavaScript

Abstract
There is no such thing as bug-free software, and the more unknowns about the system running your software, the greater the likelihood of errors occurring. As JavaScript developers, we write code to be run within at least five major web browsers, the majority of which have fairly rapid release schedules. Couple this moving target with the fact that a single error in JavaScript code within a browser has the potential to stop all other JavaScript within that page functioning, and you can see the challenge we have to write high-quality, bug-free code.
Den Odell

Chapter 4. Boosting JavaScript Performance

Abstract
In this chapter, we’ll look at how to improve the performance of JavaScript applications through coding tips, techniques, best practices, and modern APIs. I take my view on performance holistically, meaning I take the lifecycle of the whole application into account. That means that instead of focusing purely on the number of lines of code executed, I appreciate that the perceived performance of an application can be improved by faster and more efficient JavaScript file loading, as well as more efficient calls, selectors, and even through CSS and HTML optimizations. In this chapter, however, we’ll focus specifically on what we can do with JavaScript code and files to improve the performance of our web sites and applications. If you would like to read more about improving rendering performance for your page, take a look at Addy Osmani’s excellent case study on this topic, titled “Gone In 60 Frames Per Second” via http://bit.ly/gone_60 .
Den Odell

Chapter 5. Design Patterns: Creational

Abstract
In this and the following three chapters, I’m going to explain the priniples of design patterns and code architecture pattern for large-scale JavaScript applications that will keep your code sensibly organized and easy to understand, making the job of maintaining and adding to your code a lot simpler. By implementing one or more of the patterns and techniques found in these chapters, you’ll find much of your code files look, at a glance, very similar to each other, which breeds instant familiarity for a number of developers working together on the same project. In fact, if you choose to adopt any of these techniques across multiple projects, you’ll likely find the same patterns and architecture idioms work across them all, making it easier to get new developers up to speed on different projects and freeing up those developers to concentrate on writing excellent code.
Den Odell

Chapter 6. Design Patterns: Structural

Abstract
In this chapter, we will continue our look at design pattern, focusing on structural design patterns. Where the creational design patterns we looked at in the previous chapter center on object creation, structural design patterns help you combine objects together into a larger, more structured code base. They are flexible, maintainable, extensible, and ensure that if one part of your system changes, you do not need to completely rewrite the rest to suit. Structural design patterns can also be used to help interface with other code structures that you need to work together easily with in your application. Let’s look together at eight structural design patterns you may find useful in your code, together with examples.
Den Odell

Chapter 7. Design Patterns: Behavioral

Abstract
In this chapter, we will continue our look at design patterns, focusing on behavioral design patterns. Where creational design patterns we looked at in Chapter 5 focus on object creation and the structural design pattern we looked at in the previous chapter focus on object structure, behavioral design patterns focus on aiding the communication between multiple objects in a code base. The point here is to make it easier to understand how your code functions together as a whole, rather than just focusing on the construction and structure of individual objects. Let’s look together at eight behavioral design patterns you may find useful in your code, together with examples.
Den Odell

Chapter 8. Design Patterns: Architectural

Abstract
A number of the creational, structural, and behavioral design patterns that we’ve looked at in the past three chapters can be combined together to form architectural patterns that can help solve specific problems in larger code bases. In this chapter, we’ll look at three of the most common architectural patterns that apply to JavaScript applications, together with examples for each.
Den Odell

Chapter 9. Managing Code File Dependencies

Abstract
As each year passes, we developers tread further into the brave new world of JavaScript-heavy websites and applications. Using code libraries such as jQuery, frameworks such as AngularJS ( http://angularjs.org ), Backbone ( http://backbonejs.org ) or Ember ( http://emberjs.com ), together with a number of other high quality, reusable plugins, it is possible to simplify the core aspects of JavaScript development to free us up to build richer user experiences that are both functional and a joy to use.
Den Odell

Chapter 10. Mobile JavaScript Development

Abstract
Of all the technological advances in recent years, few have had the reach and effect that the mobile smartphone and tablet revolution has had. Industry trends indicate that desktop computer sales are on the decline, while mobile device adoption is growing at breakneck speed. For many, the web is accessed more frequently on small screen devices than on desktop machines. We need to ensure that we keep up with this change, adapting our websites and applications to the needs of our users, many of whom will soon be familiar with a World Wide Web that they access through their fingers.
Den Odell

Chapter 11. Building Games with Canvas API

Abstract
One of the web browser’s most exciting new capabilities in recent years has been the adoption of the <canvas> tag in HTML5 and its associated JavaScript API. Alone in an HTML document, it does nothing. However, combine it with the power of JavaScript and you have a blank drawing surface in your page to which you can add shapes, images and text to your heart’s content. The contents of a canvas element are represented by pixel data on a flat drawing surface rather than individual DOM elements in a document, so if you draw over an existing shape with another, there’s no record in the document that the original shape ever existed. By repeatedly clearing and redrawing on the same canvas over a period of time with small variations, we can give the impression of animation and movement within the element. By connecting up this animation to a controller on a touchscreen, mouse or keyboard, we allow the user the ability to manipulate what happens on screen. Combine this with some behavioral logic and we can use the <canvas> element to build games that run in the browser. In this chapter, we’ll look at the basic drawing operations in the Canvas JavaScript API before delving into detail on how to build games using it, including building a working version of the classic arcade game, Frogger.
Den Odell

Chapter 12. Using WebRTC for Video Chat

Abstract
Recent years have seen browser manufacturers push the boundaries of what was previously considered possible in native JavaScript code, adding APIs to support a number of new features, including pixel-based drawing, as we saw in the previous chapter, and now, finally, a way to stream multimedia data (video and audio) from one browser to another across the Internet using an API known as the Web Real Time Communication (WebRTC) API, all without using plugins. Although support is, at the time of writing, only currently present in desktop versions of Chrome, Firefox, and Opera, making up just over 50 percent of the worldwide web usage (source: http://​bit.​ly/​caniuse_​webrtc), I feel this technology is so important to the future of Internet communication that, as developers, we need to know and understand this API while it is still in its adoption phase.
Den Odell

Chapter 13. Using Client-Side Templates

Abstract
JavaScript-based single page web applications, in which parts of the page update dynamically in place in response to server-side data updates or user actions, provide the user with an experience that closely matches that once reserved solely for native desktop and mobile apps, avoiding the need for full page refreshes to update individual parts of a page or append new user interface components to the current page. In this chapter, we will look into options for updating the current page while maintaining a distinct separation between the data to be displayed and the DOM structure within which to present it.
Den Odell

Chapter 14. The Node.js Application Platform

Abstract
In this chapter, we’re going to take a deliberate step away from client-side JavaScript code that runs in the browser and move toward the server-side realm instead, taking a close look at an application platform called Node.js, designed by and for JavaScript developers.
Den Odell

Chapter 15. Build Tools and Automation

Abstract
The day-to-day workflow for web developers has remained largely unchanged for a number of years, and is largely a manual process of managing assets, writing code, and then testing that code in multiple browsers. Tools have existed for checking code quality and simplifying certain tasks, but these have been run manually and, as such, tend to get forgotten or run inconsistently, making it easy to ignore the results that such checks produce. Similarly, the management of third-party libraries has often been a case of copy-and-paste from project to project with little in the way of version control and management. Finally, the setting up of new projects often involves starting completely from scratch each time, despite the potential for reuse of code from other projects. In this chapter, I will look at the tools available to allow you to automate your development workflow and code release process, manage your third-party dependencies, and set up your projects with a reliable foundation each and every time.
Den Odell

Chapter 16. Browser Developer Tools

Abstract
Throughout this book, I have explained how professional JavaScript developers use advanced coding techniques, take advantage of language and browser capabilities, and apply tooling to their workflow and their code in order to produce high-quality, maintainable JavaScript code for the benefit of the end users of their applications and other developers working alongside them. The main frontier of web development is the browser, the platform for running our applications in the wild for the general public to access. While we can run a plethora of tools against our code to check its quality in advance, there really is no substitiute for running that code within a web browser to ensure not only that it runs correctly but also that it is performant and memory-efficient. We can measure and debug our code within the browser environment using the sets of developer tools built into all the major browsers for an under-the-hood look at what’s happening while our code is executed. We can use the data gleaned from these tools to improve our code, adding the final polish to our JavaScript to ensure it will perform efficiently for our end users. In this chapter, I will take you through the browser developer tools that will help ensure that your code is performant and accurate.
Den Odell

Backmatter

Weitere Informationen

Premium Partner

    Bildnachweise