Crafting Browser-Compatible JavaScript Code with BabelJS

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.

The Rise of JavaScript Compatibility Issues

Not so long ago, the compatibility problems due to old browsers made it quite hard for the developers to solve. After the open source communities showered comprehensive support for the JavaScript frameworks/libraries, JS became viral in web development world. In the beginning however, hardcore developers had concerns. It seemed that the JavaScript was as powerful as it was heavy on the efficiency. But with rapid development in browser and digital technology, it was possible for the JS community to flourish.

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 following what they thought was the idea of perfection. Not all JavaScript innovations were picked up by the list of browsers for native support. This in-turn resulted in a huge gap between JavaScript language and it’s blanket support by all browsers. The older versions however were left in shambles, they lacked the support for the 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, 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 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.

Parsing

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.

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 & node js). It allows you take the transpiled 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 tool so for efficient cross browser compatibility. Webpack is another tool that helps in reducing the bundle size. Sourcemap mentioned earlier is also useful when bundling or catenating. Babel too has a lot of Presets that are used to transpile the new JavaScript code for the old browsers or solving the ECMAScript version problems. Polyfill in Babel includes a custom regenerator runtime and core.js. It emulates ES2015+ custom environment which is used in applications, meaning you can even use new built-ins like Promise, weakmap along with a couple of new Array functionalities. It automatically loads with babel.

Leading JavaScript framework/libraries like React too have abundant use of this amazing tool.

Conclusion

It is genuinely a great tool that has potential to resolve a lot of cross browser compatibility issues in JavaScript code. We wanted to give back to the community for showering so much love on us. LambdaTest is proud to announce that we support Babel and want it to be a great success. Till then, Keep Testing!

Robin Jangu

Robin is a Tech Blogger and Social Media Marketer.

See author's profile