JavaScript Unlocked

Table of Contents

JavaScript Unlocked

Credits

About the Author

About the Reviewer

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Diving into the JavaScript Core

Make your code readable and expressive

Function argument default value

Conditional invocation

Arrow functions

Method definitions

The rest operator

The spread operator

Mastering multiline strings in JavaScript

Concatenation versus array join

Template literal

Multi-line strings via transpilers

Manipulating arrays in the ES5 way

Array methods in ES5

Array methods in ES6

Traversing an object in an elegant, reliable, safe, and fast way

Iterating the key-value object safely and fast

Enumerating an array-like object

The collections of ES6

The most effective way of declaring objects

Classical approach

Approach with the private state

Inheritance with the prototype chain

Inheriting from prototype with Object.create

Inheriting from prototype with Object.assign

Approach with ExtendClass

Classes in ES6

How to – magic methods in JavaScript

Accessors in ES6 classes

Controlling access to arbitrary properties

Summary

2. Modular Programming with JavaScript

How to get out of a mess using modular JavaScript

Modules

Cleaner global scope

Packaging code into files

Reuse

Module patterns

Augmentation

Module standards

How to use asynchronous modules in the browser

Pros and cons

How to – use synchronous modules on the server

Pros and cons

UMD

JavaScript's built-in module system

Named exports

Default export

The module loader API

Conclusion

Transpiling CommonJS for in-browser use

Bundling ES6 modules for synchronous loading

Summary

3. DOM Scripting and AJAX

High-speed DOM operations

Traversing the DOM

Changing the DOM

Styling the DOM

Making use of attributes and properties

Handling DOM events

Communicating with the server

XHR

Fetch API

Summary

4. HTML5 APIs

Storing data in web-browser

Web Storage API

IndexedDB

FileSystem API

Boosting performance with JavaScript workers

Creating the first web component

Learning to use server-to-browser communication channels

Server-Sent Events

Web Sockets

Summary

5. Asynchronous JavaScript

Nonblocking JavaScript

Error-first Callback

Continuation-passing style

Handling asynchronous functions in the ES7 way

Parallel tasks and task series with the Async.js library

Event handling optimization

Debouncing

Throttling

Writing callbacks that don't impact latency-critical events

Summary

6. A Large-Scale JavaScript Application Architecture

Design patterns in JavaScript

Understanding concern separation in JavaScript

MVVM

Using JavaScript MV* frameworks

Backbone

Angular

React

Summary

7. JavaScript Beyond the Browser

Levelling up the coding of a command-line program in JavaScript

Building a web server with JavaScript

Writing a desktop HTML5 application

Setting up the project

Adding the HTML5 application

Debugging

Packaging

Using PhoneGap to make a mobile native app

Setting up the project

Building the project

Adding plugins

Debugging

Summary

8. Debugging and Profiling

Hunting bugs

Getting the best from a console API

Tuning performance

Summary

Index

JavaScript Unlocked

JavaScript Unlocked

Copyright © 2015 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: December 2015

Production reference: 1011215

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78588-157-2

www.packtpub.com

Credits

Author

Dmitry Sheiko

Reviewer

Durgesh Priyaranjan

Commissioning Editor

Wilson Dsouza

Acquisition Editor

Meeta Rajani

Content Development Editor

Priyanka Mehta

Technical Editor

Mohita Vyas

Copy Editor

Kausambhi Majumdar

Project Coordinator

Izzat Contractor

Proofreader

Safis Editing

Indexer

Tejal Soni

Graphics

Abhinash Sahu

Production Coordinator

Aparna Bhagat

Cover Work

Aparna Bhagat

About the Author

Dmitry Sheiko is a passionate blogger and the author of Instant Testing with QUnit.

Dmitry got hooked to computer programming in the late '80s. For the last 18 years, he has been in web development. His very first open source contribution was an XSLT-based CMS in 2004. Since then, he has been contributing quite a lot to FOSS. You can find Dmitry's latest works at https://github.com/dsheiko. Currently, he is working as a web developer in the lovely city of Frankfurt am Main at Crytek GmbH.

First, I would like to thank my family for the continuous support and letting me to realize my potential. A special thank you to my father, who took me to an industrial computer center when I was 3 years old. In I decade after this, with the advance in PCs, I realized that computers mean games, and after a while, I became curious enough to understand how the games are built. This is how I started learning programming.

Thank you to my team at Crytek, who compliantly follow all the practices described in the book and adapt to the constantly evolving technologies to keep up with the pace I set.

About the Reviewer

Durgesh Priyaranjan is a senior software developer who has been working on various technologies. However, he loves JavaScript programming and interaction design the most. He is currently based in Bengaluru (India) and is working as a UI engineer for one of the Indian e-commerce giants, Flipkart.

He loves trying out different technologies without any bias. Of late, he can be found tinkering around with Raspberry Pi.

I'd like to thank my loving wife for her continuous support of my work and work-related hobbies.

www.PacktPub.com

Support files, eBooks, discount offers, and more

For support files and downloads related to your book, please visit www.PacktPub.com.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

https://www2.packtpub.com/books/subscription/packtlib

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.

Why subscribe?

Fully searchable across every book published by Packt

Copy and paste, print, and bookmark content

On demand and accessible via a web browser

Free access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view 9 entirely free books. Simply use your login credentials for immediate access.

Preface

JavaScript was born as a scripting language at the most inappropriate time—the time of browser wars. It was neglected and misunderstood for a decade and endured six editions. And look at it now! JavaScript has become a mainstream programming language. It has advanced literally everywhere: in large-scale client-side development, server scripting, desktop applications, native mobile programming, game development, DB querying, hardware control, and OS automating. JavaScript acquired a number of subsets such as Objective-J, CoffeeScript, TypeScript, and others. JavaScript is marvelously concise and an expressive language. It features prototype-based OOP, object composition and inheritance, variadic functions, event-driven programming, and non-blocking I/O. However, to exploit the true power of JavaScript, we need to have a deep understanding of language quirks. Moreover, while developing in JavaScript, we will become aware of its numerous pitfalls, and we will need a few tricks to avoid them. The project formerly known as EcmaScript Harmony, was just recently finalized in the specification named EcmaScript 2015, which is more often referred to as ES6. This not only brought the language to the next level, but also introduced a number of new technologies that require attention.

This book aims to guide the reader in understanding the upcoming and existing features of JavaScript. It is fully packed with code recipes that address common programming tasks. The tasks are supplied with solutions for classical JavaScript (ES5) as well as for the next generation language (ES6-7). The book doesn't focus only on in-browser language, but also provides the essentials on writing efficient JavaScript for desktop applications, server-side software, and native module apps. The ultimate goal of the author is not just to describe the language, but also to help the reader to improve their code for better maintainability, readability, and performance.

What this book covers

Chapter 1, Diving into the JavaScript Core, discusses the techniques to improve the expressiveness of the code, to master multi-line strings and templating, and to manipulate arrays and array-like objects. The chapter explains how to take advantage of JavaScript prototype without harming the readability your code. Further, the chapter introduces the magic methods of JavaScript and gives a practical example of their use.

Chapter 2, Modular Programming with JavaScript, describes the modularity in JavaScript: what modules are, why they are important, the standard approaches for asynchronously and synchronously loaded modules, and what ES6 modules are. The chapter shows how CommonJS modules are used in server-side JavaScript and how to pre-compile them for in-browser use. It elaborates how asynchronous and synchronous approaches can be combined to achieve a better application performance. It also explains how one can polyfill ES6 modules for production by the means of Babel.js.

Chapter 3, DOM Scripting and AJAX, introduces Document Object Model (DOM), shows the best practices to minimize browser reflow, and enhance application performance while operating with the DOM. The chapter also compares two client-server communication models: XHR and Fetch API.

Chapter 4, HTML5 APIs, considers the persistence APIs of the browser such as Web Storage, IndexDB, and FileSystem. It introduces Web Components and gives a walk-through of the creation of a custom component. The chapter describes server-to-browser communication APIs such as SSE and WebSockets.

Chapter 5, Asynchronous JavaScript, explains the nonblocking nature of JavaScript, elaborates the event loop and the call stack. The chapter considers the popular styles of chaining asynchronous calls and handling errors. It presents the async/await technique of ES7 and also gives examples of running tasks in parallel and in sequence using the Promise API and the Async.js library. It describes throttling and debouncing concepts.

Chapter 6, A Large-Scale JavaScript Application Architecture, focuses on code maintainability and architecture. The chapter introduces the MVC paradigm and its derivatives, MVP and MVVM. It also shows, with examples, how concern separation is implemented in popular frameworks such as Backbone.js, AngularJS, and ReactJS.

Chapter 7, JavaScript Beyond the Browser, explains how to write command-line programs in JavaScript and how to build a web server with Node.js. It also covers the creation of desktop HTML5 applications with NW.js and guides the development of native mobile applications with Phongap.

Chapter 8, Debugging and Profiling, dives into bug detection and isolation. It examines the capacities of DevTools and the lesser-known features of the JavaScript console API.

What you need for this book

It's enough if you have a modern browser and a text editor to run the examples from the book. It maybe helpful, however, to use a browser tool similar to Firefox Scratchpad (https://developer.mozilla.org/en-US/docs/Tools/Scratchpad) to edit the sample code directly in the browser. The books also contains ES6/ES7 code examples that rely on features not yet available in browsers. You can run these examples in Babel.js's online sandbox available at https://babeljs.io/repl/.

You will find detailed instructions of how to set up your development environment and install the required tools and dependencies in the chapters where we refer to Node.js, NW.js, PhoneGap, JavaScript frameworks, and NPM packages.

Who this book is for

This book is for the developers who are already familiar with JavaScript and want to level up their skills to get the most out of the language. The book is practice-oriented and would be helpful for those who are used to the "learn