In this tutorial, you will learn how to ensure that any JavaScript code that you write works in any browser, regardless of compatibility. In my last tutorial, I gave an introduction to Babel. With ECMAScript 2015+ came a slew of new features - promises, fetch, arrow functions - all sort of amazing JavaScript goodness 😍
When you test your code using the latest version of Chrome, it works 💥 When you test the code in IE it doesn't. When this happens you have a few options:
- Never write Javascript that uses any new language features
- Maintain two or more Javascript files each catered to a specific browser
- Use tools to make your new code work in older browsers.
Out of those options, the easiest and best option is to let something convert your code into something an older browser will understand. This is where babel and polyfills come in!
Why Do I Need To Use A Polyfill And Babel?
Out of the box, Babel will 'transpile' your code. Transpile is definitely one of those annoying technical terms that sounds complex, however, in reality, is easy to understand. When Babel transpiles your code, it will convert any syntax that older browsers won’t understand and turn into code that it will.
Using Babel out-of-the-box will ensure a Javascript compiler can run your script. This doesn't mean that an older browser will understand that code. Take a promise for example. Syntax-wise creating a new promise is valid Javascript syntax, so it would be transpiled. If you try and run code that uses that promise in IE you will get an error. This is where polyfills come into play.
What Is A Polyfill?
A polyfill is a bit of code that makes an unsupported bit of code work in a browser that doesn’t support that feature. It's like a find and replaces. When the code is run in a modern browser the polyfill is not called. When the same code is run within an older browser, the polyfill will be called and the browser will use the swapped in code instead. This means your code that uses new syntax will work everywhere. In newer browsers that support that feature as well as any older browser that does not. Clever right? promises, map(), fetch(), includes(), padEnd(), requestIdleCallback() can all be polyfilled. You can find a list of all W3C approved polyfills at polyfill-central.
To recap, if you want your code to work in older browsers you will need to transpile it and you will need to use polyfills. The polyfill will make sure the older browser understands how a new language feature works. The transpiler will make sure it can compile it.
Polyfills And Babel
When we work with babel, we can use the babel-polyfill plug-in to do all of this for us. Getting polyfill working in your solution is as simple as installing an NPM package and enabling it!
With the plug-in installed, while Babel transpiles your code, it will automatically add a polyfill for any feature that may require it. Meaning, your code will work in any browser without you having to do anything. Super simple, however, very powerful! Happy Coding 🤘
