Babel — A magical middle layer

Table of contents

No heading

No headings in the article.

If we talk about browsers, presently there are a lot of options available whether it’s Google Chrome, Mozilla Firefox, Microsoft Edge, Brave, etc (Do let me know your favorite browser, mine is Brave). If you had used the console of the browser, you surely had noticed that you can run Javascript code there. Ever thought about how that Javascript code compiled but not Java or C code? The reason is the browser has an inbuilt Javascript compiler(to be specific its interpreter) that helps in interpreting the Javascript code. Is every browser have a common interpreter? No, Each and every browser have its own interpreter such as Google Chrome has V8, Mozilla Firefox has SpiderMonkey and the list goes on. Are these interpreters on the same page, I mean, does every interpreter execute every newly updated Javascript syntax? No, though most of the interpreters try to be updated. But they are prone to mismatch. Sometimes this can create a bad experience for the user, as some functionality is working in the x browser but not in the y browser. There has to be some way so that this mismatching can be avoided.

So, here come something called Babel. I guess many of the readers had already heard about it. It’s a transpiler(Transpilers, or source-to-source compilers, are tools that read source code written in one programming language and produce the equivalent code in another language that is in the same level.), that takes your javascript code and converts this code into the code that is supported by all browsers. If you had worked on a javascript project, you had noticed files like “main.dist.js”, this file is actually the Javascript code that is being supported by all browsers.

Using Babel comes with the trade-off as it sometimes becomes costly due to an increase in the bundle size of the javascript file, so not every project of Javascript needs Babel.

Ever thought about how it works internally?

There involve three major phases:

Parsing and lexing: This phase takes your code as a string and by doing some kind of manipulation, it converts it into a tree(specific Abstract Syntax Tree). You can think of an AST as just a piece of JSON having property and value. If you want to play around with AST, visit AST Explorer. The most famous parser available is Babylon.

AST Conversion of simple Javascript code in JSON format Transformation: This phase takes AST and by doing some kind of transformation, it converts it into another AST. The transformations here are doing all the magic by converting the specific Javascript syntax to the syntax which is understandable by all browsers. So there are plugins available for the same such as babel/core and babel/transform.

Code Generation: This phase takes AST and with the help of generators it generates the Javascript code. The plugin helpful in generating the code is babel/generator.

Babel is not only used in converting javascript code but it is also used in compiling typescript, converting JSX code into a readable format, etc.

That’s all for now, Hope you enjoyed the reading.

If you want to understand more about Babel, I am attaching some of the great resources.

Demystifying Babel

Babel: Beyond the Basics — Sebastian McKenzie, Creator of Babel

React London Meetup May 2015

For more info:

LinkedIn: linkedin.com/in/shivam-agrawal-a4a414181

GitHub: github.com/shivam1192

191