Do Polyfills dry in 5 minutes?
The term Polyfill was coined by Remy Sharp. According to MDN:
A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.
For example a polyfill could be used to mimic the functionality of an HTML Canvas element on Microsoft Internet Explorer 7 using a Silverlight plugin, or mimic support for CSS rem units, or text-shadow, or whatever you want.
So a polyfill mimics the wanted functionality on older browsers. But what does it really mean?
Shim vs. Polyfill
Let’s begin our journey with some general concepts.
A shim is any piece of code that performs interception of an API call and provides an abstract layer between the caller and the target. It is not necessarily restricted to a web application. Typically shims are used for backward compatibility.
A polyfill is a type of shim that retrofits legacy browsers with modern HTML/CSS features.
Shim Example: ES5
To better understand the idea, let’s take a look at the es5-shim npm package.
In ES5 there is a new function Date.now. In ES3 the syntax for the same functionality would be new Date().getTime(). If es5-shim is being used, then we can just write the code using the ES5 syntax and do not care if the browser is running ES5 or not — if the browser supports ES5, it will just execute the code normally, however, if the browser uses the ES3 engine, es5-shim will intercept the call to Date.now and return new Date().getTime() instead. Such interceptions are called shimming.
The relevant source code from the es5-shim looks like below:
Polyfill Example: canvas in IE
Polyfilling is a specialized version of shimming. It is about implementing missing features in an API, whereas a shim is about correcting features. So while shims are used for covering up old sins, polyfills are used for bringing future enhancements back in time.
An example is providing canvas support in IE. If there is no native canvas, we can provide canvas support using Silverlight. If Silverlight is not available, we can drop down to using VML using excanvas. Using these two scripts provides the developers with a solid canvas backup should it not be native in the browser.
The above example is a perfect embodiment of Sharp’s polyfill definition:
Poly meaning it could be solved using any number of techniques — it wasn’t limited to just being done using JavaScript, and fill would fill the hole in the browser where the technology needed to be.
Write your first own polyfill
To master the understanding of the topic, let’s dive into writing some code.
In ECMAScript 5 there were many new Array prototype methods added. For instance, the filter method, which allows getting an array containing only the values of the original array for which the filtering function returns true.
Since this feature was added in ES5, older browsers do not support the filter method. What if we want to (or have to) support for example IE8? Fortunately, you read this article and soon you will be able to create a polyfill for it!
First, there has to be a feature detection to check if the filter method is already supported. In this case, we just need to check if the Array prototype contains a function named filter.
Second, we have to write our own implementation of the filter function.
And that’s it! If you are interested in writing more polyfills, I have found some more difficult examples:
Thank you for reading!
