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:
- 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.
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?
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 🤘