Six Steps for Approaching the Next JavaScript

Featured article by Cody Lindley, Senior Developer Advocate of Telerik Platform

The next recommendation/version of the JavaScript standard, also known as “harmony”, “ES.next”, “ECMAScript 6”, “ES6”, and “JavaScript/ECMAScript 2015”, is cemented at last. The major language updates included in ES6 are expected to end a rather stagnant history of change.

For those who aren’t familiar, I encourage you to explore the real-world usages of ES6 in the wild since ES6 is most likely being integrated into a tool that you already depend on or will be integrated in the near future.

In order to get prepared for ES6, below is a six part approach for learning the next version of JavaScript:

1. Verify You Have Enough ES5 Knowledge

The ease in which you grok what is new will depend upon your understanding of ES3 and ES5. After all, ES6 is just a superset of ES5. If you are shaky on the past or need a refresher, you should pour over the “Speaking JavaScript: An In-Depth Guide For Programmers” book. The book’s content is free and online.

If you are comfortable with the ES3/ES5 “Kung Fu” you already have, then you should be primed to acquire ES6 knowledge.

2. Get a Local ES6+ Environment Running

While you can run snippets of ES6 by way of online editors, you should really set up a local environment for serious learning. I recommend using Babel, which can be setup in a multitude of ways.

Additionally, I would use jspm.io to get set up with an ES6 development environment. By reading this article and following its instructions, you should be able to get an ES6 environment up and running in no time at all.

3. Study ES6 from Those Teaching it, but Be Picky

This may be fairly obvious, but in order to learn ES6 you have to study the content created by those who are teaching it. However, a fire hose of content is currently being spewed, as should be expected on the web, and it’s not all worth your time. So, be picky!

Start studying ES6 by warming up on one, or all, of the overviews below.

– An Overview of ECMAScript 6 features by Luke Hoban

– Using ECMAScript 6 today by Dr. Axel Rauschmayer

– Expert ES6 from TagTree

– Learn ES6 (Harmony) Now! by Brian Genisio and Miguel Castillo

– ECMAScript 6 — New Features: Overview & Comparison by Ralf Engelschall

Next, decide time to screencasts (like the below) and reading the one completed book on the topic.

Screencasts

– JavaScript Fundamentals for ES6 by Scott Allen and Joe Eames

– JS.Next: ES6 by Aaron Frost

– ECMAscript 6 Lessons by John Lindquist

Book

– You Don’t Know JS: ES6 & Beyond by Kyle Simpson

An honorable mention goes to the series of ES6 blog articles, “ES6 In Depth” that are coming from Mozilla. You might supplement these with the above.

4. Focus on Modules

Of all the features and syntax that are new, I believe the module system will be the most significant and important to learn. So, I’d focus specifically on learning modules, in-depth, first. To do that, I suggest reading and reading the blog post, “ECMAScript 6 modules: the final syntax” from Dr. Axel Rauschmayer.

Once you are clear on the syntax and features, start using ES6 modules ASAP. Again, I recommend using jsmp.io, SystemJS, the es6-module-loader polyfill and Babel.

If jsmp.io doesn’t blow your hair back, then I believe the only legitimate alternative currently available is to use something like Webpack and Babel.

5. Reference the ES6 Specification During Learning

This might just be a bit painful (if not crazy sounding) for those who are not already reading the specification. But, when learning something new, why not augment that knowledge by also attempting to read the corresponding section in the actual specification (final pdf draft)?

Reading the specification isn’t easy, but if you keep doing it, it will pay off. Soon, it will become second nature to quickly reference the specification for final programming clarity.

If this idea is the craziest thing you’ve heard me spout in a while, then at the very least consider reading the Mozilla documentation for each new ES6 update you learn.

6. Study Browser Adoption & Act

Once you have a lay of the land, it’s time to think about how and where you can start using ES6+ code in production. Start thinking about everything that Babel can do for you during development, but don’t forget about the environments that can already make use of ES6 features without something like Babel.

For example, the most recent version of Chrome supports around 40’ish percent of ES6 features, according to the compatibility tables from kangax.

About the Author:

Cody Lindley is a front-end/JavaScript developer and recovering Flash developer. He has an extensive background working professionally (18+ years) with HTML, CSS, JavaScript, and client-side performance techniques as it pertains to web development. If he is not wielding client-side code he is likely toying with interface/interaction design or front-end application architecture. When not sitting in front of a computer, it’s a sure bet he is hanging out with his wife & three boys in Meridian, Idaho.

Currently he is working for Telerik (focused on Kendo UI) as a Developer Advocate.