Preamble
As the front end development world continues revolving and evolving into a fully fledged platform, and as javascript continues to make headway in all facets of the tech stack, more and more functionality is being added almost every day.
While this should be a fantastic development, here comes that giant black cloud that we all know too well: Customers.
If you’ve been in front end development for any time at all, you have been through this scenario: After building your latest and greatest new feature that performs just right, you dust off that ugly step sibling known as Internet Explorer, and……nothing. Something you’ve written has offended the browser that won’t die so deeply that all you see is a blank white page.
After cursing Barb from accounting, and remembering her insistence on using IE8 even though Microsoft ended support for IE in January 2016, brewing another cup of coffee, and calming down a bit, you open up the console to see just what IE could be throwing a fit about now:
It seems that this time, IE doesn’t support Array.find
Introducing Polyfills
A Polyfill is a piece of code that adds functionality to older (or just less compliant) browsers so that you can use the latest and greatest features from the W3C specification
Before we go any further, I should explain what Transpiling is and how it differs from Polyfills.
Transpiling is the process of compiling code from one “language” to another. If you are using React through create-react-app then you are already using the transpiler Babel which converts all of your fancy classes, arrow functions, const and let variables from ES2015 (and above) into code that browsers understand.
If you are wondering which functionalities will require a polyfill, one of the easiest ways to check is to take the list of minimum browser versions you will be supporting and search the fantastic site Can I Use to your heart’s content.
Once you’ve determined which polyfills are required, one good resource which may have pre-made open source polyfills that suit your needs is MDN
Create React App built in Polyfills
Luckily, those of us using create-react-app already have two rather useful polyfills included upon creation of our application.
- Promise to handle the ECMA6 Promise proposal
- fetch that has replaced the old XMLHttpRequest
While these two polyfills are great… this begs the question, why not more? Why not Array.find or Array.includes???
Well the answer is: it’s not all about you, now is it?
Actually, the create-react-app developers have only included what they deem absolutely necessary in order keep the size of the library to a minimum. (for a far more thorough discussion, check out this link here)
So for now, we are on our own…
Solution
Adding your own polyfills is actually quite easy, especially for those already written and hosted on MDN :). Simply create a new javascript file for the polyfill, and copy in the code (we tend to store these files in an aptly named polyfill folder. As an example, our ArrayFind.js file looks like this:
You’ll notice that this has come directly from the MDN site, with the small addition at the top of the file:
/* eslint no-extend-native: “off” */ which will prevent the linter from complaining and spitting out warnings in the console:
You may find it easiest to create a central file which calls each of the polyfills you’re using. We make use of an index.js file that looks similar to the following:
This way, there is only one file to import via the base index.js file.
Final Thoughts
With a little bit of preparation, you should be able to use most of the Javascript world’s latest and greatest features, while still keeping your customers happy by supporting Barb from accounting’s, umm….. interesting browser preference.
.png){kind=small}
