Write Browser Compatible JavaScript Using Babel

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.

The Rise of JavaScript Compatibility Issues

With more and more developers contributing to the community, more and more framework versions came into existence. On the other hand, all browsers evolved with different philosophies. Not all JavaScript innovations were picked up by the browsers for native support. This in-turn resulted in a huge gap between the JavaScript language and its blanket support by all browsers. The older versions, however, were left in shambles, as they lacked support for JavaScript. Even the different versions of frameworks, when put together, added to the developer’s anxiety.

Leveraging Babel for Browser Compatibility

Babel is a transpiler and a brilliant one indeed. Everyday, developers face challenges when integrating the functionalities of different libraries. Different versions of JavaScript often lead to messy botched up jobs, which is a big reason for compromised efficiency.

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.

Parsing

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.

Transforming

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.

Generation

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

Babel alone is not enough for your JavaScript to be compatible. You need more tools for efficient cross browser compatibility. Webpack is another tool that helps in reducing the bundle size. Sourcemap, which we mentioned earlier, is also useful when bundling or catenating. Babel too has a lot of presets that are used to transpile JavaScript code for old browsers or solve problems with ECMAScript versioning. Polyfills in Babel include a custom regenerator runtime and core.js. It emulates an ES2015+ custom environment which is used in applications, meaning you can even use new built-ins like promise and weakmap along with a couple of new array functionalities. It automatically loads with Babel.