Two things; README Project by GitHub and a book on gratitude titled "Thanks a Thousand". These two things inspired me to write this series, to celebrate the less known but essential projects crucial to the larger ecosystem of web development.

What is Babel

Babel is a compiler. Babel is a transpiler. Babel is a piece of software that helps developers write modern JavaScript without having to worry about compatibility with browsers.

What is Transpiling?

The web is a moving target. Each new version of JavaScript comes with new features, additional syntax and a period of waiting. A period where developers wait for browsers to roll out support for the various feature in the new version of JavaScript; to use a new syntax or feature, it would be pivotal for all of the major browsers to support that functionality. This was a real problem in the past, where IE and Safari had lacklustre support for the 2015 version of JavaScript - officially named ECMAScript 6. Babel was born out of this struggle. Developers wanted features from ES6, but browsers were still stuck on ES5 (from 2009). The solution? A compiler for ES6. Since many browsers at the time did not support running ES6 from source, why not transform ES6 to ES5. Since this process is taking source code and transforming it to an older form of source code, we can deploy the transpiled code and switch over to the original source when support is released (JavaScript is interpreted, meaning it can be run from the source code).

Why is a relic from 2015 still hanging around today?

2021 is not 2015. Browsers have gotten a lot better at implementing ES features timely, but why do we still see babel in so many companies and projects? Because source code for the web is no longer just plain JavaScript from ECMA. Babel was and still is an essential part of the web development toolchain. It is one of many steps developers use to transform their code. From source, to runnable, to optimized, to production-quality JavaScript. Developers today are increasingly choosing to use JavaScript flavors for many reasons. Type security, object-oriented patterns, static analysis. So, we need a transpiler, a tool that takes one piece of source code and spits out a more general usable piece of source code. Babel to the rescue.

Let's talk about the 2 JavaScript dialects I use daily at work. TypeScript and JSX. Both of their documentation mentioned Babel. Both languages are not JavaScript, thus unable to run natively on browsers. Babel takes these 2 syntax and checks them for type errors or syntax fallacies. Then transpile them into runnable JavaScript code that can be further optimized with code splitting, minification. I can now write in a syntax that is not supported on any browser, and run them on every conceivable browser that interprets JavaScript correctly.

Fin

I hope this post either brought back fond memories of a past riddled with hellish browser support, or created insights to how web development was done and how the babel evolved over the years.

I did not write this post with the intention to be a complete tutorial, but as a journal. I meant it to be a record for a piece of technology that is still transforming the web development landscape. Working silently in the backdrop of shiny new libraries while making the same libraries tick.

Good Reads

Modern web apps without JavaScript bundling or transpiling

I didn’t much care for vanilla JavaScript prior to ES6. Through all of the 2000s, I chased different approaches to avoid writing too much of it. First there was RJS (Ruby-to-JavaScript). Then there was CoffeeScript. Both transpiling approaches that turned more enjoyable-to-write source code into the…

Cover Photo by Ave Calvar Martinez from Pexels

Say hello to The Angsana Series

The Angsana Series takes its name from a tree species native to my tropical home country, Singapore. The tree species also goes by the name of Pterocarpus Indicus. Locally, it is found everywhere. Citizens enjoy the shade it provides, the temperature it regulates, the lust greenery it provides from our windows. It stays in the background of our lives and silently provides the support needed to boost our quality of life.

I set out to write The Angsasa Series with this in mind. I want to celebrate the many open-source projects that silently stand as cornerstones to our software ecosystem. Come along with me, and we can explore the less-talked-about but crucial pieces of software that drive our daily lives.