Fr

Studying JavaScript performance in depth will make you

capable of tackling the complex and important tasks
required to solve performance issues. In this book, you'll
learn when and why to use an IDE over a common text
editor. Packed with examples, you'll also learn how
to create a build system to test and deploy your
JavaScript project by optimizing the code. Next,
you will move on to learn about DOM optimization,
JavaScript promises, and web workers to better break
up your large codebase. You will also learn about
JavaScript performance on mobile platforms such as iOS
and Android and how to deploy your JavaScript project
to a device. Finally, by the end of the book, you'll be
able to pinpoint JavaScript performance problems using
appropriate tools, provide optimization techniques, and
provide tools to develop fast applications with JavaScript.

Who this book is written for

Test existing JavaScript code using JSLint

and understand how to better optimize
JavaScript code

Create your own build system for JavaScript

projects using Node.js and GulpJS

Get to know best performance-focused

practices when writing JavaScript code

Use the DOM more efficiently by optimizing

JavaScript with CSS3 animations

Learn how to unit test JavaScript code

using Jasmine

$ 44.99 US
29.99 UK

community experience distilled

P U B L I S H I N G

Chad R. Adams

If you are a JavaScript developer with some experience

in development and want to increase the performance
of JavaScript projects by building faster web apps, then
this book is for you. You should know the basic concepts
of JavaScript.

What you will learn from this book

Mastering JavaScript High Performance

Mastering JavaScript
High Performance

ee

pl

C o m m u n i t y

E x p e r i e n c e

D i s t i l l e d

Mastering JavaScript
High Performance
Master the art of building, deploying, and optimizing faster web
applications with JavaScript

Prices do not include

local sales tax or VAT
where applicable

Visit www.PacktPub.com for books, eBooks,

code, downloads, and PacktLib.

Sa
m

Chad R. Adams

In this package, you will find:

The author biography

A preview chapter from the book, Chapter 1 'The Need for Speed'
A synopsis of the books content
More information on Mastering JavaScript High Performance

About the Author

Chad R. Adams is a mobile frontend architect, currently working at Intouch Solutions,
where he looks at creative ways of building HTML5-driven content and native iOS,
Android / Windows Runtime applications. He lives in Raymore, Missouri, with his wife,
Heather, and son, Leo.
In the past, Chad worked as a web developer for large websites, such as
,
,
,
, and
. He also speaks at
developer conferences and groups in the Kansas City area on HTML5 and mobile
development and is the author of Learning Python Data Visualization, Packt Publishing.
You can contact Chad on LinkedIn (
), Twitter (

), or his website (

).

Book Title:
Welcome to Mastering JavaScript High Performance. In this book, we have covered
JavaScript performance in a way that helps any JavaScript developer, whether they are
new to the language or are experienced veterans. This book covers common performance
bottlenecks, how to look for performance issues within code, and how to correct
them easily.
We also review modern ways of optimizing our JavaScript code not just by relying on
sheer knowledge of JavaScript, but by using tools to help optimize code for us. These
tools include Gulp and Node.js, which help create great performing builds, and Jasmine,
a JavaScript unit-testing framework that helps discover application flow issues in
JavaScript. We also debug a hybrid app using Apple Xcode debugging tools for HTML
and JavaScript.

What This Book Covers

Chapter 1, The Need for Speed, explains the need for faster JavaScript, discusses why
JavaScript code is traditionally slow, and shows the types of code editors that can help us
write faster JavaScript, without changing our coding style.
Chapter 2, Increasing Code Performance with JSLint, explores performance fixes in
JavaScript, and covers JSLint, a very good JavaScript validation and optimization tool.
Chapter 3, Understanding JavaScript Build Systems, teaches you JavaScript build
systems and their advantages for JavaScript performance testing and deployment.
Chapter 4, Detecting Performance, covers Google's Development Tools options and
contains a review of how to use a Web Inspector to improve our JavaScript's
code performance.
Chapter 5, Operators, Loops, and Timers, explains operators, loops, and timers in the
JavaScript language and shows their effect on performance.
Chapter 6, Constructors, Prototypes, and Arrays, covers constructors, prototypes, and
arrays in the JavaScript language and shows their effect on performance.
Chapter 7, Hands off the DOM, contains a review of the DOM in relation to writing highperformance JavaScript, and shows how to optimize our JavaScript to render our web
applications visibly faster. We also take a look at JavaScript animation and test
performance against modern CSS3 animation.
Chapter 8, Web Workers and Promises, demonstrates web workers and promises. This
chapter also shows you how to use them, including their limitations.

Chapter 9, Optimizing JavaScript for iOS Hybrid Apps, covers optimizing JavaScript for
mobile iOS web apps, (also known as hybrid apps). Also, we take a look at the Apple
Web Inspector and see how to use it for iOS development.
Chapter 10, Application Performance Testing, introduces Jasmine, a JavaScript testing
framework that allows us to unit-test our JavaScript code.

The Need for Speed

In this chapter, we will learn about the need for executing JavaScript more rapidly,
discuss why JavaScript code is traditionally slow, and see what kind of code editors
can make us write faster JavaScript without changing our coding style.

Weren't websites always fast?

It seems not too long ago that website performance was important but not really
required for most web sites. Even during the early days of the Web, it wasn't
uncommon to have a really slow websitenot because of connection speeds or
server locations or which browser was used, no. In many cases, it was because the
JavaScript used to render or create functionality for the pages was slow, very slow.
Mostly, this was done because of a lack of minification tools and debuggers for
JavaScript and a lack of knowledge of common JavaScript practices used today.
It was acceptable to the user that the page content was always slow, mainly because
most users used a 56 K modem dialing up to their Internet Service Provider (ISP).
The screech of beeps alerted the user to the connection process. Then, suddenly,
the user was notified on their desktop that a connection had been made and then
promptly opened the default web browser, depending on whether it was Internet
Explorer 4 on Windows 95 or Netscape Navigator on a NeXTStep machine. The
process was the same, as was the 2 minutes and 42 seconds it took to make a
sandwich, waiting for HotBot to load.
As time moved on, users experienced Google, and then suddenly, page speed
and load times seemed to grab more users' attention, though, even today, the plain
Google theme on the main Google search site allows for speedy download of the
full site's code. This was regardless of the Internet connection, a whole 1.36 seconds,
as indicated by Safari's Timeline tool, shown in the following screenshot, giving us
a clear indication of which resources were downloaded the fastest and which ones
were the slowest.
[1]

The Need for Speed

Part of the reason for this was that the tools used in modern browsers today didn't
exist for Internet Explorer or Netscape Navigator. In the early days of debugging,
JavaScript results were debugged using JavaScript alerts, giving feedback to
developers since the modern tools weren't around then. Also, developer tool sets
today are much more advanced than just simple text editors.
In the following screenshot, we show you a website's download speed using Safari's
Web Inspector:

[2]

Chapter 1

Getting faster
JavaScript, by nature, is a pretty easy language to build. One advantage that JavaScript
has is that JavaScript is an interpreted language, which means that the code developed
can still be deployed, and even work, according to a project's specifications.
Non-compiling code is both good and bad. Without the need to compile, a developer
can quickly build a web page on a full web application in a very short amount of
time. Also, it's very approachable for new- or intermediate-level developers in
general, making staffing for web projects a bit easier.
Now, what's bad about not using a compiled language is that JavaScript doesn't
compile and common errors tend to get missed by the developers involved; even
if the code appears to be working, it may not be working efficiently. During the
days where developer tools were most likely to be Notepad on Windows and a
web browser, any errors were apparent to a user only, leaving out any issues
with regard to code performance.
Today, we have various tool sets and build systems on top of our JavaScript skills.
It's important to understand that having deep JavaScript knowledge can help you
write and review better JavaScript code but, in many cases, we as developers are
only human, and we make common mistakes that affect our JavaScript codenot
adding spaces after a function's starting brackets or forgetting a semicolon at the
end of our code statements, for example.
Choosing a proper editor for a given project that includes basic error-checking
before writing a single line of JavaScript can improve the performance and quality
of our codebase dramatically, without learning anything new in terms of the inner
workings of JavaScript.

Selecting an effective editor

Picking a good editor can greatly affect your code quality as well as your productivity
in terms of how fast a project can be coded. As noted in the preceding section, we
developers are human, we make mistakes, and it's easy for us to write bad JavaScript,
no matter what the skill level of the developer is. So, it's important for us to know
when it is appropriate to use one editor over the other. To cover this, I will be breaking
up different JavaScript code editors into one of four categories as follows:

Integrated Development Environments

Mid-range editors

Lightweight editors

Cloud-based editors
[3]

The Need for Speed

Each type of editor has its own strengths and weaknesses, and we will review
when to use one over the other, starting with the biggest. The intent is to show
when it's appropriate to move from a larger code editor to a smaller editor in
terms of JavaScript development.

Integrated Development Environments

Integrated Development Environments (IDEs) are very high-end software tools that
not only provide code editing, but also code-organization tools, built-in testing tools,
code-optimization scripts, source-control integration, and usually deep code hinting
and completion support.
The downside of using an IDE is that the IDE is designed to constantly check the
code as the file is being updated while code is being written. This causes the editor
to be sluggish and unresponsive at times and painful to use on slower systems.
Typically, JavaScript developers tend to dislike the sluggishness of these IDEs and
move on to other faster editors.
This can cause issues when large projects kick off, and users use an editor that is
ill-suited to structure JavaScript in a proper manner. It's usually recommended that
you start with an IDE and work down when a project only requires minor tweaks.
Some popular IDEs for JavaScript are discussed in the upcoming sections.

The Microsoft Visual Studio IDE

If any software is directly associated with the term "IDE", Visual Studio is one.
Microsoft Visual Studio IDE can be seen in the following screenshot:

[4]

Chapter 1

It handles multiple languages, including HTML, CSS, and JavaScript, while handling
other language such as C#, Visual Basic, Python, and so forth. In terms of JavaScript,
Visual Studio will check deeply within a project's JavaScript code flow and look for
minor errors that many lighter editors won't find.
For JavaScript developers, the Visual Studio Express Edition for Web should be
powerful enough for any JavaScript projects.

[5]

The Need for Speed

JetBrain's WebStorm IDE

For the JavaScript developer not fond of ASP.NET and looking for a dedicated
JavaScript IDE, and/or requiring a Mac or Linux solution, look any further than
JetBrain's WebStorm IDE shown in the following screenshot:

This IDE is targeted at JavaScript development, and it handles any JavaScript

technology you can throw at it: node, AngularJS, jQuery the list goes on and on
with WebStorm. It also has full code hinting and error checking support, similar to
Visual Studio, and it has very strong source control support, including Git, SVN,
and even Microsoft's Team Foundation Server.
Now sidebar on JetBrains, WebStorm is a lower-tier IDE when compared to IntelliJ
IDEA, which is JetBrain's flagship editor for every language. The user interface of
the IntelliJ IDEA editor can be seen in the following screenshot:

[6]

Chapter 1

Typically, IDEA is known best as a Java-focused IDE, but it includes the same tools
as WebStorm plus many more. Like Visual Studio, it can handle multiple languages,
but that comes at the cost of performance. For example, if we started working in
both environments on a slower system, we might notice more lag on IDEA than
WebStorm when working day-to-day on JavaScript projects.
Again, this is due to the large number of features the IDEs require to be running in
the background to make our code better, which is more marked on IDEA; so, again,
starting off in an IDE is great to build a well-structured code base early on, but as
time progresses and we work repeatedly in a slow editor, we will need something
faster with a good base already set up.
With that in mind, many developers who don't see performance issues with an IDE
tend to stick with the IDE they've chosen; other developers, however, move on to
editors such as the ones in the next section.

[7]

The Need for Speed

Mid-range editors
Mid-range editors work very well with projects already past the early phases of
development or projects that are very small. An exception to using an IDE early
on is small projects. These are typically content-management system-based sites,
such as WordPress, Joomla, Drupal, and so on, where most of the JavaScript is
written for the developer and tested already.
They are also useful for light code hinting, and some can connect to either a source
repository or an FTP to push code up. The real differences between these and an
IDE are the speed of the editor and the lack of code quality features. Many of these
editors only look for glaringly obvious errors in the code, such as missing a semi
colon in JavaScript. Nevertheless, they are very useful all-round editors.

Panic's Coda editor

Coda is a Mac-only editor, but it supports HTML, CSS, and JavaScript coding.
The following screenshot shows you the user interface of Coda:

[8]

Chapter 1

It also has some support for Python and PHP, but it's not dedicated to running nonweb code on its own. It also features a manual validation checker of JavaScript rather
than one that's continuous so, again, there's some support to improve your JavaScript
and web code, but it does not always check for errors fully while you code.

The Microsoft WebMatrix editor

WebMatrix is Microsoft's lighter website editor in this mid-range category.
It has Git and Team Foundation Server support as well as support for ASP.NET
projects, PHP, and NodeJS. The user interface of WebMatrix can be seen in the
following screenshot:

WebMatrix is an example of a mid-range editor where you may want to consider an

editor's features when choosing which editor you want to use for your project.

[9]

The Need for Speed

For example, if you needed Mac support with Python, then Coda is a good fit, while
WebMatrix gives a different set of features, including ASP.NET support. This is a
common theme in mid-range editors, where many of them are really designed to
do certain things and give just about the minimum support for a code base while
keeping the editor as speedy as possible.
With any editors of this type, we can see that they allow us to connect to an existing
project easily and perform some code-checking while working on a fairly fast editor.

Lightweight editors
There are times where we as JavaScript developers just don't care about the backend
platform a project is using and only need a simple text editor to write a bit of
JavaScript code or update an HTML file. This is where lightweight editors come in.

The Sublime Text editor

Sublime Text is a very popular, cross-platform, lightweight editor. Its user interface
can be seen in the following screenshot:

[ 10 ]

Chapter 1

It is well known for its start-up and usage speeds as well as some basic editing
features, such as language color hinting and basic code-hinting with multiple
language support.
It also has its own package manager called Package Control, which allows you
to augment Sublime Text to automate some common code-editing and compiling
processes. Freshly downloaded, though, it's extremely lightweight and allows
developers to add in common plugins required for their development workflow.

The Notepad++ editor

The user interface of the Notepad++ editor is shown in the following screenshot:

On Windows, a JavaScript editor that is exclusive to the Windows platform and

that's actually an editor and not an IDE is Notepad++. Similar to Sublime Text,
Notepad++ is mostly used as a text editor and has plugin support but doesn't
use a package manager such as Sublime Text, so the application runs extremely
fast even with plugin support. It also has code-hinting support for some project
files, including JavaScript.
[ 11 ]

The Need for Speed

In the case of either of these editors, or any other lightweight editor, as they typically
don't have code validation included, they make code updates easily and quickly with
validation running in the background, at the risk of writing slow or broken code.

Cloud-based editors
Lastly, cloud- or web-based editors are the shiny new tools new to the web developer's
tool belt. They allow a developer to work on a code base inside a browser either as a
plugin to a web browser or purely online, and it allows a developer to work on any OS
platform, Chrome OS, iPad, or Android operating systems that you might not consider
writing JavaScript in!
The advantage of writing code in a browser is that the project code is hosted online,
either in Git or simply in the editor's hosted service. Some plugin editors allow you
to work from your computer's hard drive like any other editor but are written in
HTML and JavaScript with a backend (such as Python, PHP, or ASP.NET) like any
other website.
Typically, these editors fit inside the mid-range editor space in terms of features.
However, some of them can offer very little in terms of features beyond being online
without installing an editor to a computer, which is why they fall in this category.
The upcoming sections give a few examples of popular cloud editors.

The Cloud9 editor

Cloud9 editor, available at http://c9.io/, is a general web application IDE but
is a cloud app with HTML5, PHP, Node.js, Rails, Python/Django, and WordPress
support. The following screenshot displays the user interface of the Cloud9 editor:

[ 12 ]

Chapter 1

It also allows you to clone from a Git URL or from a GitHub project, so you can
choose to have your code hosted in Cloud9 or synced to your own Git repository.
Another feature of Cloud9 is virtual-machine support from the browser for iOS
simulator testing as well as console support for Node.js again, in a browser.

[ 13 ]

The Need for Speed

The Codenvy editor

Another online IDECodenvyis available at http://codenvy.com/. Its user
interface can be seen in the following screenshot:

This editor is pretty similar to Cloud9, but it hosts cloud service projects, such as
Google's App Engine. It can also build apps for Android while having full JavaScript
support for popular libraries in AngularJS or jQuery.
An issue with cloud editors is that, when JavaScript libraries are involved in a
project, an online editor may not be able to recognize library-specific JavaScript
or HTML tag conventions used, so it's important to consider features when
selecting a cloud editor.
For cloud editors, you can see that they follow a mid-range editor feature-set but
allow for quick connection and updates for existing projects.

[ 14 ]

Chapter 1

Summary
In this chapter, we looked at the history of JavaScript's performance and learned
how it became a focus for developers and businesses. We also reviewed the four
types of JavaScript code editors, and we now understand how to move away from
large IDEs for brand new projects, working down to lightweight editors for small
updates and changes.
In the next chapter, we will look at how we can keep our code's performance quality
high when using a lightweight editor.

[ 15 ]

Get more information Mastering JavaScript High Performance

Where to buy this book

You can buy Mastering JavaScript High Performance from the Packt Publishing website.
Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and most internet
book retailers.
Click here for ordering and shipping details.

www.PacktPub.com

Stay Connected: