When I started learning about building static websites using HTML, CSS and Javascript back in 2012, everything was so simple and straightforward. Open up your text editor, create HTML, CSS and JavaScript files, and, voila, you now have a working static website.
Problem
While front-end development seem to be very straightforward during those times, there was a major problem that web developers deal with when they work with JavaScript. Browser vendors were inconsistent in implementing ECMAScript1 specifications. With this problem, it was a great challenge to write JavaScript code (including web APIs like DOM) and making it sure that it works across major browser vendors(including Internet explorer 💢).
Solutions
Thankfully, there were many talented developers who found ways to come up with creative solutions to make the lives of other developers easier.
Polyfill
One of the earliest solutions to address inconsistent Javascript implementation or lack of latest ECMAScript syntax was through the implementation of a Polyfill. A Polyfill is a code that extends APIs that are available in browsers in such a away that it enables developers to either have a consistent API that addresses cross-browser compatibility issues or to take advantage of new language features that are not yet available on old browsers.
Javascript Libraries: jQuery
Another one of those solutions was jQuery. jQuery was the most popular front-end library during that time (and still wildly popular today). It was a lifesaver for so many developers. It is a library(helper functions including polyfills) that that provided a simple API that takes care of intricacies of cross-browser javascript compatibility.
Compilers
Fast forward to 2014, HTML5 was born. Following that, JavaScript got a much anticipated update with the release of ES6 (ECMAScript 6) in 2015. These updates has taken the world of front-end development by storm. Many developers who used to hate Javascript, started to change their minds because of the new features that were pretty good for them to ignore. People were starting to drop jQuery because it was starting to become redundant given that some developers who cares too much about their website loading performance and saw it as an additional bloat on their website. It has also become a redundancy because the features it offers were now integrated natively on new HTML5 web APIs. Yet, the problem of inconsistent browser support for ES6 still exists and the desire of so many developers to leverage the new features of JavaScript was constantly increasing.
To solve these issues, Javascript compilers were made to address these issues at that time. Today, I'm going to discuss one of those JavaScript compilers which is widely used even today.
BabelJS
For developers who are new in Javascript development, you may already have either followed a ReactJS tutorial or you may have used project boilerplate templates like CRA(Create React App). I assume you may have seen the babel key in your package.json or source code files such as .babelrc and babel.config.json. All of these are ways to provide configuration options to a wonderful tool which is called BabelJS.
BabelJS is a toolkit that enables developers to use ES2015+ language features (including bleeding edge ECMAScript release candidate features) on their Javascript code and produce a source code that is compatible with target environments(ie. older browsers and previous NodeJS versions) who do not provide the latest ECMAScript support.
How does BabelJS help developers
From how I understood upon reading the documentation of BabelJS, here are the two major ways it helps developers to support target environments:
- Source code transformation - This feature transforms your ES2015+ source code into older versions of Javascript(like ES5, etc.) which is supported by target environments.
- Polyfill injection - Babel makes it easier for developers to integrate polyfill into their source code as it knows which polyfill must be injected depending on the developer's target environments.
Knowing these things which sums up what BabelJS does, I would like to add these basic things that I took note of, which in my opinion, are helpful for new developers to know about BabelJS as they look into their Babel configuration files.
-
Plugins - On your babel configuration file(
.babelrcorbabel.config.json), you may see thepluginskey. Babel makes it possible to do source code transformation through plugins. -
Presets - On your babel configuration file, you may actually see first the
presetskey. Presets are simply an opinionated collection ofpluginswhich tries to achieve a specific goal to support a type of JavaScript implementation (ie. ReactJS, VueJS, etc.). Some of the common presets that you will see are@babel/preset-envand@babel/preset-react. - @babel/preset-env - this is a preset that enables you to write the latest Javascript syntax out of the box. I would just like to add that I have seen this snippet for quite some time already and I always ignored what's the purpose of this in a babel config file. 😂
- Tip - In the past I was so confused as to why my babel config wasn't working on my code which caused my project to not work in a certain browser. I discovered that there can be multiple babel configurations that may override your configuration. Thankfully, I solved it before through google search 😂. Now, I know a better solution. I discovered that it is possible to see which babel config is used on certain source code files .
Conclusion
Now that we know how BabelJS makes our lives easier by allowing us to use JavaScript's newest features while not having to deal with incompatibility issues when targeting specific environments, it is safe to say that BabelJS has indeed solved the problems that we've mentioned earlier. No wonder why JavaScript is still the most popular technology used by developers. I personally think that BabelJS is a major contributor that pushed JavaScript forward to where it is today and will continue to be in the coming years.
As I reflect on this post, I can say that new front-end developers today are blessed for not having to deal with the pains of manually supporting old browsers like we used to in the past. At the same time, I think that while we can enjoy today these new language features in Javascript that is made possible by tools like Babel, it is also important that we take time to understand how Babel fits into the big picture among the other tools that sums up the tool chain of a modern Javascript development environment (ie. Webpack, CSS preprocessors, etc.). If new developers don't intentionally understand the tools that make up of the whole JavaScript development toolchain that they use today, they will definitely encounter difficulties in facing the new challenge of experiencing bugs, not only caused by their source code but also caused by the suite of Javascript development tools they use during development and during building production. This is why so many are experiencing what they call JavaScript fatigue.
Thank you for spending the time reading this post. I hope that you learned something today!
Hi! This article is originally post on my website. If you have any suggestions, corrections, or constructive feedback about this post, please let me know. I would greatly appreciate it!💯
Top comments (4)
Very nice article. Although I knew what Babel is, your article felt like I was reading a story. Very nice flow of the post 😊
Thank you for the kind words, Amit! I greatly appreciate it :)
You have greatly describe what Babel is with your interesting story, there have been lot of changes made in the internet world.
Hi Jack! Indeed, it's crazy how the internet world has changed so much. I appreciate you for taking time to read my post. :)