Transpiling Javascript with babel
Javascript as a language has been dormant for a few years, but from now on a new version of the language will be released every year. Javascript is now a constantly evolving language and transpilers are here to stay, to allow us to take advantage of these features today.
What is a Transpiler?
A transpiler is a tool that will read code and output equivalent code written in another language
ES2015
If you haven’t heard about this before, ES2015 is the name of the latest version of javascript, you may also have seen the term ES6 before but both refer to the same version of javascript that was released on June 17 2015. Future releases will from now on be referred to by ‘ES + year’ of the latest approved standard.
How will new features be released
New features that are proposed for the new versions of javascript go through 5 stages:
0 - Strawman: Idea;
1 - Proposal: Being worked on;
2 - Draft: Initial Spec;
3 - Candidate: Complete spec;
4 - Finished: Will be added to next release;
Why a transpiler
Transpilers allow us to use the latest version of javascript without having to wait for browser vendors to catch up on implementing the new proposed features.
Transpiling Javascript with Babel
Babel is the most popular javascript transpiler of today.
It basically takes javascript in and returns javascript out based on a set of options that you pass to it.
//ES2015 arrow function
(param1, param2, paramN) => { return statements }//Babel transpiled output
"use strict";(function (param1, param2, paramN) {
return statements;
});
The cost of transpilers
Using the shiny and latest comes at a cost, a build system is a mandatory step which can add some overhead on starting a project, and transpiled code will be heavier than it’s original counterpart, also debugging may be trickier specially in production environments.
Use only stage 3 or above features in production
Babel and other transpilers support features below the final stage, or below stage 4 features. The support for these features is intended to give developers a chance to try these new features and gather feedback from the community, they are not meant to be used in production, because they are highly subject to change, and you’ll get stuck with an unsupported feature in your codebase.
If you use a stage <4 feature you run the risk that it changes before hitting production and you will be stuck with an unsupported feature in your codebase.
Further Releases
Es2015 was the biggest release of the javascript language, and further releases are expected to be much smaller. ES2016 is constituted of only 2 features: ‘Array.prototype.includes’ and ‘Exponentiation Operator’.
Transpilers are here to stay
There’s a lot of confusion in the javascript community about what is part of which javascript release and which features are safe to use or not, also there are lots of articles mentioning early stage features as part of a next year javascript release, beware of that.
You can check all the active proposals for new javascript features at:
https://github.com/tc39/proposals
Finished poposals and expected release dates:
https://github.com/tc39/proposals/blob/master/finished-proposals.md
Transpilers are here to stay so it’s important to have an understanding of how they work, and if you want to use the latest of javascript today make sure that what you’re using will actually end up being implemented in a browser.
A good path to follow is making sure that you can send your code without a transpiling step to the browser as soon as you can.
