Over a million developers have joined DZone.

What is the difference between a shim and a polyfill?

DZone 's Guide to

What is the difference between a shim and a polyfill?

· Web Dev Zone ·
Free Resource
In the JavaScript world, one frequently hears the words shim and polyfill. What are those things and what is the difference between them?

Shim. A shim is a library that brings a new API to an older environment, using only the means of that environment.

Polyfill. In October 2010, Remy Sharp blogged about the term “polyfill” [via Rick Waldron]:

A polyfill is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will.

Thus, a polyfill is a browser-related shim. You typically check if a browser supports a given API and load a polyfill if it doesn’t. That allows you to use the API in either case. The term polyfill comes from a home improvement product:

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.

Polyfilla – image from tooled-up.com [via Paul]

Paul Irish has published a list with “HTML5 Cross Browser Polyfills”. es5-shim is an example of a (non-polyfill) shim – it retrofits ECMAScript 5 features on ECMAScript 3 engines. It is purely language-related and makes just as much sense on Node.js as it does on browsers.


Source: http://www.2ality.com/2011/12/shim-vs-polyfill.html


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}