What is a Polyfill?

A polyfill, or polyfiller, 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.

Where polyfill came from / on coining the term

It was when I was writing Introducing HTML5 back in 2009. I was sat in a coffeeshop (as you do) thinking I wanted a word that meant “replicate an API using JavaScript (or Flash or whatever) if the browser doesn’t have it natively”.

Shim, to me, meant a piece of code that you could add that would fix some functionality, but it would most often have it’s own API. I wanted something you could drop in and it would silently work (remember the old shim.gif? that required you actually inserted the image to fix empty td cells – I wanted something that did that for me automatically).

I knew what I was after wasn’t progressive enhancement because the baseline that I was working to required JavaScript and the latest technology. So that existing term didn’t work for me.

I also knew that it wasn’t graceful degradation, because without the native functionality and without JavaScript (assuming your polyfill uses JavaScript), it wouldn’t work at all.

So I wanted a word that was simple to say, and could conjure up a vague idea of what this thing would do. Polyfill just kind of came to me, but it fitted my requirements. 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. It also didn’t imply “old browser” (because we need to polyfill new browser too).

Also for me, the product Polyfilla (spackling in the US) is a paste that can be put in to walls to cover cracks and holes. I really liked that idea of visualising how we’re fixing the browser. Once the wall is flat, you can paint as you please or wallpaper to your heart’s content.

I had some feedback that the “word should be changed” but it’s more that the community at the time needed a word, like we needed Ajax, HTML5, Web 2.0 – something to hang our ideas off. Regardless of whether the word is a perfect fit or not, it’s proven it has legs and developers and designers understand the concepts.

I intentionally never really pushed the term out there, I just dropped it in a few key places (most notably the book), and I think it’s when +Paul Irish gave a presentation some (many?) months later, directly referencing the term polyfill, was when the term really got a large amount of exposure (I think this was also helped with the addition of the Modernizr HTML5 shims & polyfill page).

Definitions

Alex Sexton also classifies polyfilling as a form of Regressive Enhancement. I think that sums it up nicely.

Paul also defines it as:

A shim that mimics a future API providing fallback functionality to older browsers.

Some Examples

Here’s an example: sessionStorage is available in all the latest browsers (IE8 and upwards) but isn’t in IE7 and below.

A polyfill can be used to plug the support for older browsers that don’t provide sessionStorage.

Now with the polyfiller in place, as a developer I can rely on using the Web Storage API (for sessions) and not have to feature test in my code or fork to handle different situations.

Another example is providing canvas support in IE. This is really where the poly part can be seen. If there’s no native canvas, we can provide canvas support using Silverlight. If Silverlight isn’t available, we can drop down to using VML using excanvas (note that excanvas actually does also include a Silverlight bridge which I’d expect it would try first anyway). Using these two scripts provides the developers with (faily) solid canvas backup should it not be native in the browser.

Where it’s from and where it’s going

Earlier on this year I co-authored Introducing HTML5 with Bruce Lawson. During the R&D time I was looking at shims and techniques to plug missing APIs but they weren’t quite progressive enhancement. I wanted a single word that represented this idea that there was a ‘thing’ that could plug browsers but wasn’t progressive enhancement but wasn’t graceful degradation either.

Polyfilling seemed to fit what I wanted to say (in my head!).

Ployfilla 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.

I tentatively used the new term during my HTML5 talk for ThinkVitamin back in June, but I didn’t want to push it for fear of trying too hard to push a new term out. However I did sneak it in to Introducing HTML5, which I can only assume lead to what happened recently.

Recently at JS Conf, Paul Irish released a list of polyfills and shims – an awesome resource list to save us developers the pain of older browsers.

It looks like polyfilling has some legs, so let’s start using them, and dragging older (and even the newer) browsers up to our expectations.

You should follow me on Twitter here I'll tweet about JavaScript, HTML 5 and other such gems (amongst usual tweet-splurges)

19 Responses to “What is a Polyfill?”

Damon Stephensond October 8th, 2010 at 1:34 pm

I ALWAYS have this image in my head whenever this topic comes up:
www.tooled-up.com/Artwork/ProdZoom/PLCQDP330GS.jpg
Paul October 8th, 2010 at 1:48 pm

Nice post, thanks for the handy list of polyfills and shims. Anything that helps flatten the browser landscape can only be a good thing.

P.S. You’ve a small typo on “Ployfilla is a UK product” :)
Mark Boas October 8th, 2010 at 1:57 pm

Remy,

Nice piece – and great to have an explanation. Now I understand the poly part – (nothing to do with parrots) :)

I especially like Alex Sexton’s reference to ‘regressive enhancement’.

I think the term polyfill is great but I previously favoured the old-school term ‘patch’ – it seems to fit in nicely with the definition in wikipedia :

A patch is a piece of software designed to fix problems with, or update a computer program or its supporting data. This includes fixing security vulnerabilities and other bugs, and improving the usability or performance.

en.wikipedia.org/wiki/Patch_(computing)

I liked the idea that if that browser makers can’t get on and bring their browser’s up to scratch, the wider community can create patches that will do.

It’s great to see this technique being pushed and gathering momentum – and we have you and Paul Irish to thank for that. So thanks! :)
HTML5 and CSS3 » Polyfills October 8th, 2010 at 2:31 pm

[...] Well, it seems I’m a little late to the party – Remy Sharp has beaten me to the punch and posted a great post explaining the sudden popularity of polyfills. You should read that too. [...]
alexander farkas October 9th, 2010 at 1:54 pm

Can you clearify the term shim and polyfill a little bit, for me. The scripts of polyfills and shims listed on the modernizr-page are extremley different. There are some shims (excanvas, svgweb, webforms2), wich are trying to implement the standard and there are shims, wich are building an abstraction on top of two or more technologies. How do you distinguish between them? If you don’t distinguish between them, then jQuery, YUI etc. are also shims ( $(‘#main a’) is a shim for document.querySelectorAll(‘#main a’) ).

I think we should try to implement the standard and than build nice extensions and abstractions on top of this. With this concept, we could throw in a standard compliant implementation and then use another extension or abstraction, from a different developer.

I’m currently working on a “shim” libary, where I try to combine some of the shims mentioned in this list with an capability loading concept. It is in an early state, so not really useable for production mode, yet. But if someone wants to help out, let me know. (afarkas.github.com/webshim/demos/index.html)
Blog Author Remy Sharp October 9th, 2010 at 3:36 pm
A fair question. If Browser X has all the features ever to be spec’ed out, a polyfill could make Browser Y behave the same as Browser X.

For example, I’d say jQuery isn’t a polyfill, but this is:
```
// first include jQuery
if (!document.querySelectorAll) {
  Element.prototype.querySelectorAll = function (q) {
    return $(this).find(q).get();
  };

  // the document object doesn't descend from the Element object, so
  // I've overridden this manually
  document.querySelectorAll = Element.prototype.querySelectorAll;
}
```
Now we can use the native querySelectorAll and we know, as developers, that jQuery has plugged the support in older browsers (actually Sizzle would be a better match – but it should still illustrate my point).
Weppy Updates: Opera, Chrome and Firefox support and simpler usage – Blog October 10th, 2010 at 3:59 am

[...] release of Weppy, my Javascript WebP to WebM conversion library, or something of aÂ polyfill for a format that is yet to be part of any specification (HTML5 seems to specifically reference the [...]
Jan! October 12th, 2010 at 3:55 pm

I immediately think of graphics APIs when I hear “polyfill”. I.e., flood fill a polygon. I am not the only one: www.google.com/search?q=polyfill+polygon+rgb|color

I am partial to “patch”, like Mark, and “shim” in general.
JavaScript Magazine Blog for JSMag » Blog Archive » News roundup: graphics, graphics, graphics October 15th, 2010 at 3:38 pm

[...] Mobile alpha is coming Saturday Paul Irish has compiled a list of HTML5 Cross-browser polyfills (what’s a polyfill?) NodeJS screencasts Share and [...]
Harmony Of My Dreams | Brendan Eich January 19th, 2011 at 2:02 am

[...] polyfills such as CoffeeScript (when not run as a server-side code generator) may become more widely used, [...]
Regressive Enhancement with Modernizr and Yepnope Â» JavaScript & CSS Â» SitePoint Blogs March 8th, 2011 at 3:15 am

[...] of a feature that works in all browsers, then adding features for more capable browsers.The “polyfill” or “regressive enhancement” technique just means that you go ahead and use the [...]
Paul Irish March 18th, 2011 at 9:50 pm

In case anyone needed a touch more clarification on the term polyfill…

A polyfill is a kind of shim that replicates the real API. So a websocket polyfill would create a window.WebSocket global with the same properties and methods on it as a native implementation. That means you can develop for the future, with the real API, and only load your compatibility polyfills in the fallback case for other browsers.
Rx Dumas June 21st, 2011 at 4:48 am

Why not Americanize it? Call it spackle.
Blog Author Remy Sharp June 27th, 2011 at 8:52 am

Because I’m English.
Manolo July 1st, 2011 at 9:22 pm

Good answer (English). Polyfill it is!

Despite the great explanation and the importance or standardizing terminology, this is also another buzz word some people will now use to make us think they know a lot. :)
Jorge December 19th, 2011 at 9:20 pm

So Polyfill in english is AguaPlast in spanish bit.ly/sL8FTv
George April 5th, 2012 at 8:14 am

Poly = many
fill = add up until full
Goni = corner

ergo: Polygon = many corners, poly fill = many times add up until full? Huh?! WTF?

Please, for the sake of semantics, etymology and greater understanding. Call it a patch or something!
You don’t call a copying machine xerox either, since you’re not from the US or Russia ; )
Honor your heritage, my British friend, but don’t forget that Greek came before.

You wouldn’t call a method call in higher-level languages a “GoTo” either, right?

PS: it’d be called “Pattex” in Germany… bit.ly/Hn2Erc
Blog Author Remy Sharp April 19th, 2012 at 11:01 am

@George – I don’t normally bother returning replies to these “don’t use another word” comments, but you know that the underlying greek meaning is exactly what I was shooting for.

Poly = many – in that there are many different ways to solve a specific problem, like say supporting the video element.

Fill = add up until full – until the full specification is available to us as developers.

(not sure what goni is supposed to be…)

My intention with this “word” was to lay the seed and allow the web community to pick it up and see if it had legs. Turns out it did. We, as a community, wanted a word to hook our new HTML5 et al technologies on, and ultimately a polyfill is a better practise than a shim as it’s removable in the future without change to your own code.

Our industry likes buzzwords – ajax, web 2.0 – this is just another one, and if it helps get better support and better experience to users, then polyfill it is :)
Ethan October 25th, 2012 at 12:52 am

George, the “poly” part is short for “polycellulose” – polyfiller (or the trademarked “polyfilla”) is made with fibers which make it shrink less. It’s an interesting term but it’s not very easy to describe the etymology here.

remy sharp’s b:log

What is a Polyfill?

Where polyfill came from / on coining the term

Definitions

Some Examples

Where it’s from and where it’s going

19 Responses to “What is a Polyfill?”

Post Details

Possibly Related

Popular Today

Noteworthy

License