We take a look at how Babel helps web application developers transpile code and deal with data using concepts such as parsing.
Join the DZone community and get the full member experience.Join For Free
Cross-browser compatibility can simply be summed up as a war between testers and developers versus the world wide web. Sometimes I feel that to achieve browser compatibility, you may need to sell your soul while performing a sacrificial ritual. Even then some API plugins won’t work!
I apologize for the mental imagery, but incompatibility issues get me riled up. All this was before I wasn’t familiar with Babel.
Leveraging Babel for Browser Compatibility
Transpilers are often mistaken for compilers, but they are a bit different. They work on the source code and return a more sturdy and compatible source code. Developers can even customize Babel to suit them better.
How Does Babel Work?
Babel’s function is pretty straightforward and easy. It converts incompatible source code or a library's functionality into browser supported code, which your browser may find compatible. Babel does that in three simple steps.
The first thing it does is to find the unsupported or incompatible parts in your code that were passed. It does that by using AST (Abstract Syntax Tree).
Abstract Syntax Tree
As the name itself indicates, it is an abstract representation of code. This works in similar manner to JSON. It creates a data structure of the program code which is given as input. With the representation, the manipulation of code becomes easier. It's a simple yet effective way to solve coding transformation ossies.
The highlighted part of the source code is transformed into the compatible one. This is done with the help of the AST so as not to handicap any functionality of the program. You can even customize your own Babel plug-in.
You have now the transformed code, now you need additional plugins that will help you effectively use the transpiled code. Source map helps you in this, it works well with the V8 (Chrome and Node.js). It allows you to take the transpiled code to the address website url for it to parse.
Additional Babel Plugins Used for Compatibility
Published at DZone with permission of Robin Jangu. See the original article here.
Opinions expressed by DZone contributors are their own.