JavaScript For beginners

632 JavaScript: Novice to Ninja, 2nd Edition

In the next chapter, we’ll be looking at some of the features in the next version of
JavaScript, as well as some ideas of what you can build using JavaScript.

Next Steps 633

16Chapter

Next Steps

We are nearing the end of the road to becoming a JavaScript ninja. But as one
journey finishes, a new one begins. Now it’s time to level up your JavaScript ninja
skills. In this final chapter, we’re going to see what’s in store for JavaScript in the
future. We’ll also look at how to become a better programmer, as well as offer
some ideas of what to do with your newfound JavaScript programming skills.
In this chapter, we’ll cover the following topics:

The future of JavaScript
Ninja skills to take you to the next level
Project ideas for JavaScript development.

634 JavaScript: Novice to Ninja, 2nd Edition

What’s Next For JavaScript?

This is an exciting time for the JavaScript language. It is developing at a rapid rate
and its new annual release schedule means that it’s able to adapt quickly to the
changing needs of developers. JavaScript engines are also getting quicker at
implementing the latest features, so they become available sooner. The yearly
release cycle means that not as many new features make it into each release, and
so far, there aren’t any big changes on the horizon for ES2018. The changes
proposed so far include:

Allowing dynamic importing of modules using conditional code.
New features for the spread operator.
A standard way of accessing the global object.
Support for asynchronous iteration that will allow you to perform a loop
asynchronously. This means that the code can move on to the next iteration in
the loop before the last task has completed.
Numerous other improvements, particularly with regular expressions.

As you can see, there are no major changes, but over time, JavaScript will
continue to evolve as a language with each increment. The yearly release cycle
should give developers time to learn any new features and keep their skills up to
date.

WebAssembly

WebAssembly is an emerging standard that provides the ability to compile a low-
level programming language such as C or C++ into code that can run in the
browser. WebAssembly is significantly faster than JavaScript due to it being in a
binary format. This means applications that require more raw speed and
processing power can run in a browser without the need for a plugin.

WebAssembly is not a replacement for JavaScript. Rather it is a complementary
technology. JavaScript will still be used for most web applications, but
WebAssembly code will be able to run from within a JavaScript application when
the need arises. WebAssembly offers the exciting prospect that the browser will
be able to run even more powerful applications that operate on a similar level to
native applications. It will be particularly useful for improving the standard of

Next Steps 635

online gaming, as well as uses in scientific modeling and the Internet of Things.
As WebAssembly becomes more available, there is a chance that, slowly but
surely, it will start to replace JavaScript as a compile target. Developers will
eventually start using tools to compile code into WebAssembly instead of
JavaScript before deploying it.

JavaScript Fatigue

JavaScript fatigue is a term coined over the last few years to describe the
explosive growth of JavaScript libraries, tools and frameworks, and the speed at
which they come and go out of fashion. Keeping up to date with the current
JavaScript trends can be very hard and tiring, especially when there’s work to be
done!

Many people, particularly beginners, can often feel overwhelmed by the sheer
volume of different technologies that now need to be learned just to produce a
simple web app. It is not uncommon to read an online tutorial that is overflowing
with technical jargon and acronyms such as ES6, jQuery, React, Redux, WebPack,
Babel, TDD, Jest, Git, async, OOP, functional-style, npm, Node.js, Yarn, SQL,
NoSQL, Graph databases ... it’s no wonder that some people find it all so
confusing!

Hopefully, reading this book has gone a long way to explaining what a lot of the
terms mean and how different libraries and frameworks fit into your workflow.
You should also keep in mind that you can achieve a lot with just plain old
vanilla JavaScript. You can go a long way with some HTML files, a sprinkling of
CSS and a single JavaScript file.

Modern JavaScript certainly has a rich and diverse ecosystem, and this means
there is a huge choice of tools to use. This can seem daunting at first, but in
reality it’s a good thing that there is a large choice on offer. You just need to be
disciplined about when and how you choose which tools to use.

Of course, it’s useful to keep up to date about modern JavaScript practices, but
you also need to accept that you can’t do it all. Try to keep up to date with any
emerging trends and developments, but don’t feel you have to adopt them straight
away. If you start to develop magpie syndrome (when you can’t help but be

636 JavaScript: Novice to Ninja, 2nd Edition

attracted to the latest shiny JavaScript framework) then you’ll never have any
time to master anything.

The best way to move forward is to avoid paralysis by analysis and get coding!
The more code you write, the more you will start to recognise where a certain
tool might help to improve your workflow. As you become more experienced, you
will soon know when it’s time to introduce a new tool into a project. And if
everything is working fine with your current setup, there’s no need to change it.
The old adage of “if it ain’t broke, don’t fix it” still holds!

Some interesting thoughts on the matter can be found in the following articles:

Ninja Skills

At this stage of the book, you should be well on your way to becoming a
proficient JavaScript programmer. But as JavaScript has matured, a whole
ecosystem has built up around it, which means that a Ninja programmer needs to
do more than just know the basics of the language. You’ll need to develop further
skills that set you apart from regular programmers. This section outlines a few
key skills that are well worth mastering to help take your programming to the
next level.

Version Control

Version control software allows you to track all the changes that are made to your
code, because every version of your code is kept and can be recalled at any time.
Many people use a crude form of version control by saving different versions of
code with different file names such as “projectV1.js”, “projectV2.js”,
“projectV3.js”... and so on. This is a reasonable method, but it can be error-prone.
If you’ve used this method before, how many times have you forgotten to change
the name before saving? It also doesn’t offer the same benefits that can be gained
by using a source control management tool.

One of the most popular source control management tools is Git1, written by
Linus Torvalds, the creator of Linux. Git enables you to roll back to a previous

1. http://git-scm.com/

Next Steps 637

version of your code. You can also branch your code to test new features without
changing the current stable codebase. Git is a distributed source control system,
which means that many people can fork a piece of code, develop it
independently, then merge any of their changes back into the main codebase.

Git uses the command line to issue commands, but there are a large number of
GUI front ends that can be installed to give a visual representation of the code.

Source control is invaluable if you’re working in a team, as it means that different
developers can work on the same piece of code without worrying about causing
any errors in the main codebase. If any mistakes do accidentally end up in the
main codebase, they can easily be rectified by rolling back to the last stable
version. It also prevents you from overwriting somebody else’s code.

There are a number of online services that can host Git repositories, including
GitHub2, Kilnhttps://www.fogcreek.com/kiln/, Bitbucket3 and Codeplane4. They
can be used to host an online Git repository that can then be forked by other
developers, making it particularly useful for team projects. Some of these services
make all the code public, so they’re often used by open-source projects to host
source code; others keep the code private, and are used to host personal or
business projects.

As a ninja JavaScript developer, your life will be made much easier by integrating
Git into your everyday workflow. You can find out more about Git in Jump Start
Git by Shaumik Daityari5.

Keep Your Knowledge Up to Date

The world of JavaScript is fast-moving, and it’s getting faster every year. You need
to ensure that you keep up to date with recent developments and best practices.
Here are some suggestions of how you can keep your knowledge current:

Subscribe to blogs such as SitePoint’s JavaScript channel.

2. https://github.com/
3. https://bitbucket.org/
4. https://codeplane.com/
5. https://www.sitepoint.com/premium/books/jump-start-git

638 JavaScript: Novice to Ninja, 2nd Edition

Write your own blog.

Follow other JavaScript developers on Twitter.

Attend conferences or local meetups.

Read magazine articles.

Contribute to an open-source project.

Join a local or online user group.

Listen to podcasts.

Use Common JavaScript Coding Patterns

A pattern is a piece of code that solves a common problem and represents best
practice. In the time that JavaScript has existed, a number of patterns have
emerged that help to write maintainable code that has been proven to work. In
JavaScript development, a pattern is the generally accepted way of achieving a
specific goal, often because it’s the best way of doing it.

Another advantage of using standard coding practices is that it makes sharing
code between developers far less painful. If you use the same style and
terminology, developers will find it much easier to follow your code. Patterns
often have names attached to them (for example, the IIFE pattern that we’ve seen
previously). This makes it easier to discuss different patterns, since the name can
be referred to explicitly.

An antipattern is a piece of code that’s accepted bad practice. They generally
cause more problems than they solve and should be avoided. Not using const,
let or var to declare variables is an example of an antipattern. This pollutes the
global namespace and makes the likelihood of naming collisions much more
likely. Another example of an antipattern is to fork your code based on “browser
sniffing‘ instead of user feature detection. Other examples that have been
mentioned already in this book are declaring functions using the Function()
constructor, using document.write(), using new Array() and new Object()
constructor functions to create arrays and objects instead of the literals [] and {}
and not ending statements with a semicolon. What is considered an antipattern

Next Steps 639

can also become a little evangelical: Many developers consider extending
Object.prototype (monkey patching) to be an antipattern, and a sizeable
majority will argue that having complex, deeply nested classes is also an
antipattern.

As you write more JavaScript, it’s a good idea to try and follow as many patterns
and conventions as possible. They’ll save you from having to reinvent the wheel,
and help you to write reusable code that is easier for others to read. A good
resource for learning more about JavaScript patterns is >earning JavaScript
Design Patterns by Addy Osmani6.

Another good practice is to follow a coding style-guide. These are usually written
by teams of developers to ensure they agree on how they write code. Airbnb make
theirs publicly available7 and it not only includes coding style recommendations,
but also explains the justification behind them. It would certainly make a good
starting point or template for your own style guide. You can also configure some
code linters to help you stick to a particular style-guide.

The post Elements of Javascript Style8 by Eric Elliot contains some excellent
guidelines that will help to improve your coding style (and hopefully understand
the reasoning behind them).

Build Things

You can learn all the theory you want, but the only way you’ll actually develop
your coding style is to go out and build things. By putting ideas into practice and
solving real problems, you’ll really start to get a feel for the language. There is
nothing better for improving your technique than writing code. So get writing! In
the next section, there are some ideas for what you could do.

Pair Programming

A great way to level up your skills is to pair program. This involves working
together with another developer on a project, either sat together in person or

6. http://addyosmani.com/resources/essentialjsdesignpatterns/book/
7. https://github.com/airbnb/javascript
8. https://medium.com/javascript-scene/elements-of-javascript-style-caa8821cb99f

640 JavaScript: Novice to Ninja, 2nd Edition

(more usually) by connecting machines remotely. It can be between a novice and
a more experienced programmer, where the focus is on the experienced
programmer helping the novice improve their programming style and teaching
them new tricks. This might seem like a one-sided experience, but it can be
tremendously helpful for an experienced programmer to try and explain difficult
concepts, and often leads to them developing a deeper understanding themselves.
It can also speed up the development of a beginner programmer as they can be
guided away from common pitfalls by the more experienced programmer.

Pair programming can also be between two programmers of a similar ability
where they are working together to try and solve a problem. The benefit here is
that they can discuss the different strategies they would use, and compare
different approaches to solving a problem. Having two sets of eyeballs looking
over code can also help identify careless errors that can take a long time to find
when you’re on your own.

Codeshare9 is a site that lets you connect with other programmers.

Contribute to Open Source Projects

The Open Source community is responsible for creating some excellent software
that many of us use every day. It also gives us an excellent opportunity to give
something back by contributing to a project, and provides the chance to gain
some experience of working on a big project with a large number of users.

There are many ways you can contribute to an open-source project, which will
help to develop your skills as a programmer and give you an appreciation of the
processes involved in developing software. Here are some ideas of how you can
get involved:

Help fix a bug that has been identified
Run benchmark tests
Write documentation or help to translate it
Suggest a new feature
Implement a new feature
Help to test a new feature

9. https://codeshare.io

Next Steps 641

Moderate the project’s message boards
Provide unofficial support for the project.

If you want some ideas about what you can do then take a look at Contributor
Ninja10, which provides a running list of issues that need fixing.

JavaScript Development Ideas

Now that you’ve learned how to program in JavaScript, you might be thinking,
‘what next?’ You need a project! In this section, we’ll look at what you can do
with your newly acquired programming skills.

JavaScript has evolved so much in recent years. It’s no longer considered just an
easy scripting language used to add a drop-down menu and a few effects to a web
page (although it is still perfectly fine to use it for this).

The following ideas are intended to get your creative juices flowing and, I trust,
spark an idea for a project. It is by no means a complete list of what you can do
with JavaScript — the possibilities are endless and only limited by your
imagination.

HTML5 Game Development

The advent of HTML5 has heralded a massive growth in online games written in
JavaScript and using other HTML5 technologies. Previously, most online games
were written using Flash, as JavaScript was considered too slow. The adoption of
Canvas as well as faster JavaScript engines now means that HTML5 games can
compete with native applications. The development of WebGL and browser GPUs
means that fast, rendered 3D games in the browser are now a realistic possibility.

Modern online classics such as HexGL11 and Swooop12 serve to highlight just
what is possible using just HTML5 technologies.

10. https://contributor.ninja/js/
11. http://hexgl.bkcore.com
12. http://swooop.playcanvas.com

642 JavaScript: Novice to Ninja, 2nd Edition

There are many libraries that help to write HTML5 game code. A couple of
excellent examples are Jaws13

Single-page Web Applications

A single-page web application is an application that, as the name suggests, runs
on a single web page in a browser. They aim to create a seamless experience as
users navigate around the application and avoid the feeling that they are moving
from one page to another. This is often achieved by preloading data in the
background using data stored in a back-end database and retrieved as JSON using
Ajax. Alternatively, the data can be stored locally using the Local Storage API that
we met in Chapter 14. An MVC framework will often be used to ensure that the
interface is updated quickly. Many applications are now using the single-page
web application model, a couple of good examples are the Strike to-do list app15
and the Stack Edit MarkDown editor16.

Progressive Web Applications

Progressive Web Apps (PWAs) are an evolution of single-page web applications
that are being developed by Google. The idea is that web applications can be
made more reliable and responsive by caching key resources in advance. This
will make them load quicker and appear snappier to use, without the need for a
constant network connection. PWAs achieve this goal by using a variety of
modern web APIs to make web applications feel more like a native application,
resulting in a much better app-like experience for users.

Mobile App Development

Android and iOS don’t use JavaScript as their native programming language.
However, it’s still possible to build an application using HTML5 technologies and
JavaScript, then use a conversion tool such as CocoonJS.17 These will convert an

13. http://jawsjs.com/ and Phaser14.
14. http://phaser.io/
15. http://www.strikeapp.com/
16. https://stackedit.io
17. https://www.ludei.com/cocoonjs/

Next Steps 643

HTML5 application into native code that can be run on the Android and iOS
platforms. So you can build using just HTML5 technologies and JavaScript, but
then deploy on multiple devices.

Desktop App Development

Electron18 is an open-source library that allows you to build desktop applications
using just HTML, CSS and JavaScript. It uses Chromium (the open-source version
of Google Chrome) and Node.js to create applications that can run on Windows,
MacOS and Linux. This means that if you have an idea for a desktop application,
you already have the skills needed to produce one.

Electron was developed by GitHub when they built their own text editor, Atom.
Since then, it has become a popular option for developers who want to create a
desktop version of a web app. It has been used to create desktop applications
such as Slack, Microsoft Visual Studio Code and Insomnia.

Node.js Development

JavaScript has been traditionally thought of as a front-end programming language
used for client-side programming in the browser. That all changed when Node.js
was released and transformed the JavaScript landscape. Node.js means that
JavaScript can be run without using a browser, so JavaScript can now be used to
write server-side code or command-line tools that interact with the file system.

As a JavaScript ninja, you’ll probably install Node anyway to use the many tools
that will make your life easier (such as React and WebPack, which we saw in the
previous chapter). Node.js can also be used to write your own tools that help to
automate your workflow, or to build server-side applications, dynamic websites
that link to back-end databases, and web API services. Node.js is increasingly
being used to develop large-scale websites and applications, with companies
such as PayPal, Groupon, and Yahoo using it to deliver parts of their sites.

Due to the asynchronous nature of JavaScript, Node.js has a number of
advantages over traditional server-side languages such as PHP, Python and Ruby.

18. https://electron.atom.io

644 JavaScript: Novice to Ninja, 2nd Edition

It’s ideally suited for real-time update applications with lots of concurrent users
as it’s able to quickly deal with requests in a non-blocking way.

If you want to learn more about Node.js, you can learn more about it by reading
Node.js 8 the Right Way by Jim R Wilsonhttps://pragprog.com/book/jwnode2/
node-js-8-the-right-way.

And There’s More!

And it doesn’t stop there ― JavaScript is becoming the language of choice for
communicating with devices via APIs provided by the manufacturers. The so-
called “Internet of Things” includes a range of devices, from watches and virtual-
reality headgear to home automation devices and even robots! Knowledge of
JavaScript will enable you to program an ever-growing list of electronic devices.

Chapter Summary

New versions of ECMAScript will continue to ship every year. Each version
should help to make the language more expressive and easier to use. This
rapid release cycle should mean that new features are implemented sooner in
browsers.

WebAssembly is a new low-level language that will allow browsers to run
compiled code on the web. This will make it possible to run processor-heavy
applications on the web.

A JavaScript ninja should use version control such as Git to manage their
projects.

A JavaScript ninja’s knowledge can be kept up to date by subscribing to
mailing lists, listening to podcasts, attending talks and conferences, following
developers on Twitter, and reading books and blog posts.

A JavaScript ninja should use common JavaScript coding patterns that are
proven best practice. This also makes it easier to communicate about code.

A JavaScript ninja should write lots of code and build things!

Next Steps 645

There are many different uses for JavaScript, such as HTML5 games, server-
side development using Node.js, progressive web apps and even desktop apps
using Electron.

JavaScript is increasingly being used as a scripting language for the Internet of
Things (IoT), meaning it can be used to program a variety of devices.

And that brings us to the end of our journey! I hope you have enjoyed learning
JavaScript and will continue to develop your skills in the future.

JavaScript has moved beyond its humble beginnings as a basic scripting language
for adding effects to web pages. It now occupies a unique position as a powerful
language that can be used to program on the client-side and the server-side.
JavaScript is now becoming increasingly available on several other platforms,
extending its reach beyond the Web. The future certainly seems bright for the
language as it offers various opportunities to interact with technology. The only
limit to what you can do is your imagination. So what are you waiting for? Get
programming, ninja!

646 JavaScript: Novice to Ninja, 2nd Edition