- The Babel Transpiler
- The World of Transpilers
So for a little background:
Remember Netscape Navigator? Back then the net was just comprised of static HTML documents: once a webpage finished loading in your browser, that was how it was going to look until you navigated to a new page. Because that is exactly as boring and inefficient as it sounds, Netscape wanted to add dynamic elements to pages, so that they could change after they were loaded and tailor their data-driven output to the input of the user. In order to do this, they had to create a language that could be transmitted in an HTTP response and build interpretation of that language into their browser so that it could be used for client-side scripting. So Brendan Eich built JS in ten days.
This is a big part of the ‘Why’ that we’re getting to.
Another big part of the ‘Why’ is the standardization of JS. In 1996, not long after the original JS language was rolled out, the language was delivered to Ecma International (European Computer Manufacturer’s Association) amid squabbles between Microsoft and Netscape about the future of client-side scripted web browsing. Microsoft even released a language called JScript that year to prevent trademark infringment. Standardization of the language would help it to become more broadly and more easily used, and the first iteration of ECMAScript was released in 1997. Brendan Eich is known to have likened the name to that of a skin disease.
ECMAScript’s standardization has allowed it to function as the primary form of client-side logic for the last 20 years. And it has developed well beyond scripting capabilities, into a language with functional and object oriented capabilities.
In the Book of Genesis, the Tower of Babel was a structure built by a united humanity after the Great Flood in order to ascend to heaven. God saw this and decided to diversify the languages of the united people so that they could no longer communicate with each other, and scattered them across the Earth.
That’s cool, but how does Babel work?
Babel uses what’s called an Abstract Syntax Tree (AST) in order to execute all of its translations. In three distinct steps, it breaks down all of the syntactical input:
- Parse: takes in code and outputs an AST
- Transform: takes in an AST and traverses it, adding, updating, and removing nodes as it does so.
- Generate: takes in the modified AST and joins it back into a string of syntax, also creating a source map
The Abstract Syntax Tree allows for this to take place because it breaks down code and organizes it with all of its metadata in a hierarchical tree.
For example, these two lines of code:
Result in the following Abstract Syntax Tree:
There is a cool webapp that allows you to see how your JS code breaks down into an AST at astexplorer.net!
Babel is then able to take this tree, translate it based on a preset (e.g. React, Flow, ES2015, ES2016, ES2017, etc.), and generate the ES5 syntax needed to run in the browser.
Presets allow you to define which language you are translating from and are configured via your .babelrc file, or alternatively in your package.json. However, you are not limited to the official presets that are available, and have the ability to create your own plugins to hone the way in which Babel parses, transforms, and generates your code. This allows for custom architectures and syntax that is designed to your specific needs! The article that the above AST illustrations are from elaborates on the ways in which you can use Babel plugins to your advantage. You can find it HERE, and you can read the official documentation about Babel plugins and presets HERE
There are also a couple very common transpilers that expand on but do not stray far from the bounds of ‘vanilla’ JS. These are Coffeescript and Typescript. CoffeeScript allows for more expressive, almost Ruby-esque, syntax:
You can read more about JS’s weak typing in this excellent excerpt from Kyle Simpson’s You Don’t Know JS.
And that’s not even close to all of them! W is also for WebAssembly, a transpiler designed to support C and C++ code right from the start with high performance, as is also done by EMScripten. L is also for LiveScript, which extends the functional programming capacities of CoffeeScript. C is also for ClojureScript, which transpiles from Clojure into JS. There are practically more JS transpilers every day!
And if you do hate it, go write a transpiler for the language you prefer!