ES2015 Features You are Expected to Know

I teach programming full time, and currently my students have tasked me with teaching them about ES2015 (a.k.a ES6) - the latest version of the EcmaScript (JavaScript) specification. The problem with ES2015 is that the spec is vast and I don't consider it a wise use of time to cover every single feature in great detail. So I asked myself, what are the most important features to cover?

To answer this question, I went back our purpose as a code school: to prepare our students for the industry. How can we know what ES2015 features the industry expects us to know? Software professionals are expected to be able to learn new things on demand. In my own career as a software engineer, invariably, every time I switched to a new job required me to learn new tools. The authors of the most widely used JavaScript frameworks understand this, and therefore they all make it one of their priorities to create great learning resources for their framework. I will use these tutorials as a proxy. For each given ES2015 language feature, if many popular tutorials make use of it, then it is an important feature to learn.

The Survey

I conducted an informal survey where for each of the following front-end JavaScript web frameworks:

• AngularJS 2
• React
• Ember
• Meteor
• Aurelia

I skimmed through the tutorial or quick-start guide linked from the main website, and catalogued each ES2015 feature used. I am going to walk through the features used in each tutorial below, if you are impatient, you can skip right to the summary.

AngularJS 2

The AngularJS 2 tutorial, at time of writing, walks you through building a custom application called the Tour of Heros - a CRUD application for a list of imaginary super heros. It uses the following ES2015 features

• let
• const
• Module
• Destructuring assignment
• Class
• Template string
• Promise

As this tutorial uses TypeScript, it also uses some TypeScript-specific features like decorators.

React

The React examples and tutorial The tutorial walks through building a Tic Tac Toe game and uses these features:

• let
• const
• Class
• Arrow function

It also uses JSX - the language extension pioneered by React and supported by the Babel transpiler.

Ember

The Ember quickstart walks you through building an app for looking for apartment rentals using a test-driven approach. It uses the following ES2015 features:

• let
• const
• Module
• Destructuring assignment
• Enhanced object literals
• Template strings

Meteor

Meteor provides multiple tutorials on their website. Not only that, it provides 3 versions of their Todo list app, one for Blaze - their only front-end framework, another for Angular and yet another for React. I looked through all three of these, and found these features to be in use:

• let
• const
• Module
• Destructuring assignment
• Class
• Enhanced object literals
• Arrow function

Aurelia

Aurelia provides a quickstart tutorial and a more in-depth tutorial walking through building a contact manager application. I looked through both of them, and found these ES2015 features in use:

• let
• Module
• Destructuring assignment
• Class
• Arrow Function

Summary

In this survey of the tutorials of the 5 most popular front-end frameworks, I have gather a list of the ES2015 used, and given a tally of the number of tutorials that use each. I will also label each feature with "easy", "medium", or "hard" in terms of how hard the feature is to learn.

Another comparison we can do with this data is between the frameworks. We can compare which framework requires the most amount of learning in order to get up to speed based on the number of ES2015 features used in their tutorial, the ones that require the least number of learning would appear to be the most beginner-friendly.

Resources

I will leave you with three great resources for learning ES2015:

• Luke Hoban's ES2015 feature overview
• Kyle Simpson's ES6 & Beyond
• Nicholas Zaka's Understanding EcmaScript 6

Happy learning!