How to get up and running quickly with ES6
In this piece, we’ll step through the basics of the latest iteration of the language, cover what’s new and why it’s important, and give you some useful resources to get you up and running quickly with ES6.
A brief introduction to ES6
There’s a little potential naming confusion to get out of the way before we go any further, however. This version was originally known as ECMAScript 6 (hence the ES6 part), and subsequently renamed to the somewhat clunky-sounding ECMAScript 2015 (ES2015). ES6 is the shorthand name that’s stuck around.
As with previous versions of the spec, the changes introduced in ES6 are, in many ways, an attempt to get the underpinnings of the language up to speed with standards already set by other languages such as Python and Ruby.
Why now is the perfect time to get on board the ES6 train
Scarred by many years of dealing with multiple devices and browsers, front-end developers are naturally cautious about piling into new versions of languages when they arrive hot off the presses.
There are two particularly good pieces of news that can help you ease into ES6 gently:
- It’s a superset of ECMAScript 5. This means that backward compatibility with your existing code should be pretty much bulletproof. You’ll be taking advantage of new features rather than having to worry about ripping apart your existing projects.
- We’re nearly there with browser support. As a detailed compatibility breakdown shows, this is a moving target, but vendors are definitely going in the right direction. There are also smart options available for mapping ES6 to ES5 in production using ‘transpiling’ and ‘polyfilling’.
Long story short, with browser support inching towards more or less 100 percent, now is the perfect time to dive into ES6 as a developer if you’ve been putting it off so far.
The key features of ES6 at a glance
ES6 brings substantially more goodies to the table than we have space to cover in depth here, but the following highlights should be enough to encourage you to explore the full feature set at your own pace:
- Constants: The introduction of immutable variables brings a welcome dose of certainty to the language.
- Default parameters: Developers can finally clearly indicate defaults for function parameters in a standardized manner.
- Modules: While workarounds for this have long existed, ES6 arrives with proper native support to help keep your code cleaner.
You’ll also find a generous heap of syntactic sugar spread throughout the specification to make your day-to-day dealings with the language a bit more pleasant. Check out the ES6 breakdown from Webapplog for more in-depth details on all of the above.
Hitting the ground running with ES6
Naturally enough, there are many ways to skin this particular cat, but we’d suggest the following sequence for those who are at the beginning of the road:
- Start by sitting down and studying a detailed breakdown of all the major ES6 features. Luke Hoban’s overview on Github is an excellent starting point.
- Bookmark Ralf Engelschall’s handy list of ES6 features, which includes ES5 comparison points throughout.
- Get on board with Babel for transpiling so you can start authoring ES6 today and outputting automatically to ES5. There’s a nice breakdown of both Babel and Prepros (a GUI alternative) over at neoelemento to walk you through the basics.
- Finally, commit to some actual formal training. ES6 will be helping you pay the bills for many a year to come, so it’s well worth the investment. ES6 for Everyone is eminently affordable and will have you quickly and confidently using all major features.
By approaching things in a structured sequence as above, and throwing an appropriate mix of hello-world and greenfield projects into the mix, you should be off to the races with ES6 in no time at all.
As we’ve stressed throughout the piece, now is an excellent time to start tackling ES6 seriously as a developer. Full browser support is very nearly there, smart solutions exist to help you output to ES5 with a minimum of fuss, and the new features available will make your code both cleaner and more pleasant to write.
Let’s recap the main sequence you’ll want to follow:
- Get familiar with the background to ECMAScript specifications.
- Briefly review some standout new features in ES6 to get a flavor for what’s in store.
- Follow our simple four-step guide above to hit the ground running.
Image by: Visualhunt.com