BeginNØR

Learn JavaScript: Novice to Ninja

Chapter 16: 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.

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

WebAssemblyis 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 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 fatigueis 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 developmagpie syndrome(when you can’t help but be 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 isGit, written by Linus Torvalds, the creator of Linux. Git enables you to roll back to a previous 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, includingGitHub,Kiln,BitbucketandCodeplane. 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 inJump Start Git by Shaumik Daityari.

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:

Use Common JavaScript Coding Patterns

Apatternis 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 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 isLearning JavaScript Design Patterns by Addy Osmani.

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 theirspublicly availableand 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 postElements of Javascript Styleby 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 topair program. This involves working together with another developer on a project, either sat together in person or (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.

Codeshareis 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
  • 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 atContributor Ninja, 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 asHexGL,Word’s Biggest PacmanandSwooopserve to highlight just what is possible using just HTML5 technologies. These are great examples of what can be done, but games need not be overly complex; the success ofFlappy Birdshows that a good idea that’s well implemented can be incredibly popular.

There are lots of examples of different styles of game atjs13kGames– an annual competition where all the games must be written in 13 kilobytes or less (including all the code, graphics and sounds!).

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

If you’re interested in writing an HTML5 game, you can find lots of useful information at theHTML5 Game Development website.

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 theStrike to-do list appand theStack Edit MarkDown editor.

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 asCocoonJS,Cordova,orPhoneGap.These will convert an 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

Electronis 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. 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 readingNode.js 8 the Right Way by Jim R Wilson.

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!
  • 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-sideandthe 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!

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16