Polyfills, Transpiling and Babels

A polyfill is a JavaScript file that patches a hole by replicating some native feature thats missing.

What is a polyfill?

A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively.

An example polyfill

The code below is a polyfill for the new ES6 String method, startsWith():

if (!String.prototype.startsWith) {
  String.prototype.startsWith = function (searchString, position) {
    position = position || 0;
    return this.substr(position, searchString.length) === searchString;
  };
}

As you can see, a polyfill is just regular JavaScript.

This code is a simple polyfill (check it out on MDN), but there's also a significantly more robust one.

Why does the startsWith() polyfill begin with the following line?:
if (!String.prototype.startsWith)
It avoids overwriting the native startsWith method.

Remember that a polyfill is used to patch missing functionality. If the browser supports ES6 and has the native startsWith method, then there's no reason to polyfill it. If this check didn't exist, then this polyfill would overwrite the native implementation.

Uses for Polyfills

Polyfills aren't only for patching missing JavaScript features JavaScript is the language used to create a polyfill, but a polyfill doesn't just patch up missing JavaScript features! There are polyfills for all sorts of browser features:

SVG Canvas Web Storage (local storage / session storage) Video HTML5 elements Accessibility Web Sockets

Compiler is a computer program that takes a program written in some source code language and then converts it to a target language like machine code. Running code through a compiler changes its level of abstraction how close it is to human readable code to machine runnable code. So that's compiling, taking a source language and converting to into a lower level language.

Transpiling is a subset of compiling. So, its take source code and converts it into target code. Just like a compiler but the source code and target code are at same level of abstraction. Basically if the source code starts out as human readable then the output language will also be human readable

This way we could write our JavaScript using ES6 syntax and functionality an d then use a transpiler to convert it from ES6 to ES5

The most popular JavaScript transpiler is called Babel. Babel's original name was slightly more descriptive - 6to5. This was because, originally, Babel converted ES6 code to ES5 code. Now, Babel does a lot more. It'll convert ES6 to ES5, JSX to JavaScript, and Flow to JavaScript.

Transpiling project in repo

The way Babel transforms code from one language to another is through plugins. There are plugins that transform ES6 arrow functions to regular ES5 functions (the ES2015 arrow function plugin). There are plugins that transform ES6 template literals to regular string concatenation (the ES2015 template literals transform). For a full list, check out all of Babel's plugins.

Now, you're busy and you don't want to have to sift through a big long list of plugins to see which ones you need to convert your code from ES6 to ES5. So instead of having to use a bunch of individual plugins, Babel has presets which are groups of plugins bundled together. So instead of worrying about which plugins you need to install, we'll just use the ES2015 preset that is a collection of all the plugins we'll need to convert all of our ES6 code to ES5.

WARNING: Babel uses both Node and NPM to distribute its plugins. So before you can install anything, make sure you have both of these tools installed: install Node (which will automatically install NPM)