What is the difference between a shim and a polyfill?

Question

Both seem to be used in web development circles, see e.g. HTML5 Cross Browser Polyfills, which says:

So here we're collecting all the shims, fallbacks, and polyfills...

Or, there's the es5-shim project.

In my current project we're using a number of these, and I want to stick them all in the same directory. So, what should I call this directory---shims, or polyfills?

Solution 1

• A shim is any piece of code that performs interception of an API call and provides a layer of abstraction. It isn't necessarily restricted to a web application or HTML5/CSS3.

• A polyfill is a type of shim that retrofits legacy browsers with modern HTML5/CSS3 features usually using Javascript or Flash.

Answering your specific question, call your directory shims if you want to keep the directory generic.

Solution 2

Shim

If you are familiar with the adapter pattern, then you know what a shim is. Shims intercept API calls and create an abstract layer between the caller and the target. Typically shims are used for backward compatibility. For instance the es5-shim npm package will let you write ECMAScript 5 (ES5) syntax and not care if the browser is running ES5 or not. Take Date.now as an example. This is a new function in ES5 where the syntax in ES3 would be new Date().getTime(). If you use the es5-shim you can write Date.now and if the browser you’re running in supports ES5 it will just run. However, if the browser is running the ES3 engine es5-shim will intercept the call to Date.now and just return new Date().getTime() instead. This interception is called shimming. The relevant source code from es5-shim looks like this:

if (!Date.now) {
    Date.now = function now() {
        return new Date().getTime();
    };
}

Polyfill

Polyfilling is really just a specialized version of shimming. Polyfill is about implementing missing features in an API, whereas a shim wouldn’t necessarily be as much about implementing missing features as it is about correcting features. I know these seems overly vague, but where shims are used as a more broader term, polyfill is used to describe shims that provide backward compatibility for older browsers. So while shims are used for covering up old sins, polyfills are used for bringing future enhancements back in time. As an example there is no support for sessionStorage in IE7, but the polyfill in the sessionstorage npm package will add this feature in IE7 (and older) by using techniques like storing data in the name property of the window or by using cookies.

Solution 3

From what I understand:

A polyfill is code that detects if a certain "expected" API is missing and manually implements it. E.g.

if (!Function.prototype.bind) { Function.prototype.bind = ...; }

A shim is code that intercepts existing API calls and implements different behavior. The idea here is to normalize certain APIs across different environments. So, if two browsers implement the same API differently, you could intercept the API calls in one of those browsers and make its behavior align with the other browser. Or, if a browser has a bug in one of its APIs, you could again intercept calls to that API, and then circumvent the bug.

Solution 4

Citing Axel Rauschmayer from his book Speaking JavaScript:

• A shim is a library that brings a new API to an older environment, using only the means of that environment.
• A polyfill is a shim for a browser API. It typically checks if a browser supports an API. If it doesn’t, the polyfill installs its own implementation. That allows you to use the API in either case. The term polyfill comes from a home improvement product; according to Remy Sharp:

  Polyfilla is a UK product known as Spackling Paste in the US. With that in mind: think of the browsers as a wall with cracks in it. These [polyfills] help smooth out the cracks and give us a nice smooth wall of browsers to work with.

Solution 5

A fantastic article written about this from a few years back that explains this well:

What is a Polyfill?

In the article the (2) are simply contrasted as such:

Shim: a piece of code that you could add (i.e. JavaScript) that would fix some functionality, but it would most often have it's own API.

Polyfill: something you could drop in (i.e. JavaScript) and it would silently work to mimic existing browser APIs that are otherwise unsupported.

View more solutions

Comments

[Mark Amery]

I think this is a misleading representation of both the common usage and what Remy Sharp actually says in blog post you've linked to. Shim is most often used synonymously with polyfill nowadays (see particularly the es5-shim and es6-shim) and Remy is particular about saying that to him the word 'shim' alluded to a custom API (by comparison with shim.gif). He is very much not dictating that the words be used in this way, and by saying "to me" he is tacitly acknowledging that his usage is not universal.

[JohnnyQ]

So while shims are used for covering up old sins, polyfills are used for bringing future enhancements back in time. This sums up everything to me. Thank you for a clear explanation.

[Matt Browne]

This answer is helpful, thanks. But it seems to me that the two terms often aren't used precisely on the web, including es5-shim. I think es5-shim is a mix of shims and polyfills by your definition.

[zeppelin]

WOW -> So while shims are used for covering up old sins, polyfills are used for bringing future enhancements back in time. <- Many thanks!

[TatzyXY]

The Date-Example looks like a Polyfill to me. Why I think it is a Polyfill? Because Date.now is a native call. A Polyfill will add that feature with the same API seamless to the Browser. A shim comes with a new API like: MyShim.Date.now(); Please correct me if I am wrong.