Babel, The transpiler and polyfiller

Introduction

When I was in high school, there was a clothing trend called “Fela” after a popular musician. It is a tight fitted pants which spread out from the kneel down. It was the reigning thing then. Now, no one wears that again, if you do, you will be called OLD school.
In this article, you will be learning about transpilation, polyfilling, and how Babel functions to help bridge the gap as a transpiler and polyfiller.

Transpilation

Whenever a new syntax is created in JavaScript, it usually creates a gap as it cannot run on older engines. JavaScript is not a forward-compatible language and as such newer syntax needs to be converted in such a way that older engines can understand it so as not to create a gap problem.
For example, creating an ES2019 feature will not run in the 2016 engine. This gap is a problem that has to be resolved and that is where Babel comes in.
Just like you take your “fela” pants to the tailor to mend them so that they fit into the acceptable style, Babel helps to “transpile” your codes to the acceptable format so that they can be understood by the older engines. Babel is a transpiler that helps to convert newer syntax to an older syntax so that old engines can understand them
For example, the code:

If(true) {
   Let v = 3;
  Console.log(v)
 } else {
    Let v = 4;
   Console.log(v)
   }

In the case above, the let is used to create a block scoped v which does not interfere with another variable v created in another block scope. This cannot run in older JavaScript engines but with Babel, it is converted to

 Var $ 0, var $ 1 ;
  If(true){
  V$0 = 3
  Console.log(v$0)
  } else {
 V$1 = 4
Cosole.log(v$1)
}

Babel decides to produce two different variables v$0 and v$1 with unique names to achieve the same noninterference.
The reason for transpilation is that developers are expected to write clean codes with the newest syntax so as to be able to communicate their ideas most effectively.

Polyfiller

If the forward compatibility issue is that of an API, the API method which is not recognized by the older version is polyfilled or shimed.
Polyfilling is a piece of code used to provide modern functionality on older browsers which do not support them. Polyfills are mostly not used today because native APIs are faster in browsers and most browsers implement a broad set of APIs according to standard semantics.
An example of polyfill is the session storage API which is available in IE8 browser upward but not in IE7 and below.
The word polyfill was invented by Remy Sharp while thinking of a suitable name in a coffee shop.
What Babel does is quietly look for which polyfill our codes need and provide it automatically.

Conclusion

Transpilation and polyfill are two techniques used to fill in the gaps between codes with the latest stable feature and an outdated application or environment that needs to use the code. Since JavaScript is always improving, the gap will never go away.