What is a polyfill

A few weeks back I found a bug with IE where all the user saw was a blank white page. If you’ve been around for a while in the wonderful world of the client-side SPA, you’ll probably know what was wrong without thinking twice. That’s right. It was a JavaScript error before client-side rendering happened.

Considering it the bug only rears its head in Internet Explorer, my first guess is a problem with polyfills. Yep! That was it!

Uncaught TypeError: contacts.includes is not a function

But we’re transpiling our code with Babel! Doesn’t that mean that I can use all the latest and greatest JavaScript I want without having to worry about whether the browser supports it? Nope! Let’s learn more…

Polyfills vs Code Transforms

JavaScript is constantly evolving thanks to the efforts of people in and around the TC39. Some of the evolutions rely on new syntax (like arrow functions) which allows me to do this:

const addOne = num => num + 1
if (addOne(2) > 2) {
  console.log('Math. Wow!')
}

Often, we can use this syntax in our source code so long as we convert it to syntax that can run in the browser (for example, by using a transpiler such as babel: example transpiled in the browser with babel-preset-env).

Some other of these new features rely on new APIs, like Array.prototype.includes which allows me to do this:

const contacts = ['Brooke', 'Becca', 'Nathan', 'Adam', 'Michael']
if (contacts.includes('Rachel')) {
  console.log('You have a Rachel!')
}

With these, if you run them through babel’s env preset the includes function is not transpiled because it’s not a syntax issue, but a built-in API one and babel’s env preset only includes transforms for syntax transformations. You could write your own babel plugin (like this) to transform the code, but for some APIs it just wouldn’t be practical because the transformed version would be significantly complex.

A polyfill is code which will make the currently running JavaScript environment support features which it does not. For example, a (imperfect) polyfill for includes might look something like this (refer to MDN for a real polyfill):

if (!Array.prototype.includes) {
  Array.prototype.includes = function includes(searchElement) {
    return this.indexOf(searchElement) !== -1
  }
}

The if statement is there to make this a “gated” polyfill. That means that if the functionality already exists, the polyfill code will not override the pre-existing behavior. You may consider this to be desirable, but it’s actually the reason that includes is not called contains on String.prototype (TL;DR: some versions of mootools implemented contains in a gated fashion but the implementation is different from how includes works so the TC39 had to change the name to not break tons of websites).

The part that assigns Array.prototype.includes to a function is called “monkey-patching” 🐒 By applying this to the prototype, we’re adding includes support to all arrays in the app (learn more about prototypes here). Effectively, the polyfill’s job is to make it so I can use the JavaScript feature without worrying about whether it’s supported by the environment in which my code is running (like IE 10 for example).

Where to get transforms and polyfills

With syntax transforms, I recommend babel-preset-env. It’s actually fairly straightforward. For polyfills, the most popular one is core-js. You might also look at babel-polyfill which uses core-js and a custom regenerator runtime to support generators and async/await the way that babel transpiles it. Polyfills are sometimes referred to as “shims” and you may be interested in the js-shims by airbnb (which I’ve been told are more spec-complient than core-js).

Conclusion

So what did I do to fix my IE10 bug? Well, one thing that really bugs me is that I have to ship all this code for polyfills to all browsers even if they do support these features. But a few years ago I heard of a service that was able to ship polyfills that are relevant only to the browser requesting them. I created my own endpoint that uses the module that powers that service and I’ll write about that next week!

I hope this is helpful! Good luck!

P.S. You may have heard of something called a “ponyfill.” Ponyfills are similar to polyfills except they don’t monkey-patch, instead they’re just the function by itself and allow you to call them directly. Learn more about ponyfills. In general, I’m more in favor of ponyfills, though you just can’t get away from polyfills completely because often your dependencies are relying on built-ins that your browsers don’t support.

Looking for a job? Looking for a developer? Check out my job board: kcd.im/jobs

Learn more about React from me:

• The Beginner’s Guide to React
• Advanced React Component Patterns (also on Frontend Masters).

Things to not miss:

• cypress-capybara - If you’ve used capybara before you’ll probably love this util from Justin Searls. If you like this, then you’ll probably love cypress-testing-library. In any case, don’t reuse your CSS selectors as test selectors!
• guppy - 🐠A friendly application manager and task runner for React.js by Josh Comeau.
• Themes Support in Codesandbox 🤩 - I set mine to Night Owl and Dank.sh so fast you wouldn’t believe it. That Ives van Hoorne has gone and done some amazing work again!

Some tweets from this last week:

> This is just a miracle of design. 🍌 – 11 Jul 2018

> A command you should execute right now: npm logout Login to publish packages, then logout to avoid worms from taking your credentials. Make it a habit. And turn on 2FA too. That’s important. And don’t reuse passwords. And use a password manager. – 13 Jul 2018

> My jobs before software development: > > - Lawn care / custodian > - Video editor / DJ > - Memory preservation technician (I digitized photos/videos etc) > - Camp Maintenance > - Data center tech > - Conference center A/V > - Computer lab tech > twitter.com/BenLesh/status/10174… – 12 Jul 2018

> Family vacation. > twitter.com/kvlly/status/10186… – 15 Jul 2018

This week’s blog post is “When to break up a component into multiple components”. It’s the published version of my newsletter from 2 weeks ago. If you thought it was good, go ahead and give it some claps (👏x50) and a retweet:

Special thanks to my sponsor Patreons: Hashnode

P.S. If you like this, make sure to subscribe, follow me on twitter, buy me lunch, support me on patreon, and share this with your friends 😀

👋 Hi! I’m Kent C. Dodds. I work at PayPal as a full stack JavaScript engineer. I represent PayPal on the TC39. I’m actively involved in the open source community. I’m an instructor on egghead.io, Frontend Masters, and Workshop.me. I’m also a Google Developer Expert. I’m happily married and the father of four kids. I like my family, code, JavaScript, and React.