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 to devil while performing a sacrificial ritual. Even then some API plugins won’t work.(XD)
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 compatible source code only. Developers can even customize Babel to suit them better.
How does it work?
Babel’s function is pretty straightforward and easy. It converts incompatible source code or the library functionality into browser supported code which your browser may find compatible. Babel does that in 3 simple steps.
The first thing it does is finding the unsupported or incompatible parts in the code that is 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. You must have heard of JSON, Babel too works similarly. It creates a data structure of the program code which is given as input, this comes in handy. With the representation, the manipulation of code becomes easier. Simple yet effective way to solve the coding transformation.
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 & node js). It allows you take the transpiled to the address website url for it to parse.
Additional Babel Plugins used for Compatibility
The moment you stop learning is the moment you stop living.