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.

29 Responses to “What is a Polyfill?”

  1. I ALWAYS have this image in my head whenever this topic comes up:
    http://www.tooled-up.com/Artwork/ProdZoom/PLCQDP330GS.jpg

  2. 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” :)

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

    http://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! :)

  4. [...] 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. [...]

  5. 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. (http://afarkas.github.com/webshim/demos/index.html)

  6. 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).

  7. [...] 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 [...]

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

    I am partial to “patch”, like Mark, and “shim” in general.

  9. [...] Mobile alpha is coming Saturday Paul Irish has compiled a list of HTML5 Cross-browser polyfills (what’s a polyfill?) NodeJS screencasts Share and [...]

  10. [...] polyfills such as CoffeeScript (when not run as a server-side code generator) may become more widely used, [...]

  11. [...] 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 [...]

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

  13. Why not Americanize it? Call it spackle.

  14. Because I’m English.

  15. 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. :)

  16. So Polyfill in english is AguaPlast in spanish http://bit.ly/sL8FTv

  17. 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… http://bit.ly/Hn2Erc

  18. @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 :)

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

  20. [Slightly edited the opening -- Remy]

    For those of you that might still have trouble with the concept, a polyfill is simply an implementation by the developer to emulate a native (or future native) browser function or sequence.

    For example:

    A browser doesn’t have document.ready, so you emulate this by putting a javascript call at the end of the document that evaluates and executes if the document content is at an expected length.

    This is not a polyfill:
    You add a onClick to an area tag to hide a div, this isn’t a polyfill as it is not something the browser is supposed to do natively (the browser isn’t supposed to automagically hide divs when button ‘x’ is clicked universally.)

    Now my examples thus far have involved javascript, however polyfill refers to ANY developer implementation that emulates a native function. Meaning it could be JavaScript, HTML, CSS, VBScript, coffee script, JAVA, etc. Thus the prefix: POLY, meaning many or multiple.

    These implementations are intended to fill a void that browser native functions should already be filling, thus: FILL.

  21. You are a fucking retard, a polyfill is not a patch, it’s a procedure to flood fill a polygon. The term “polyfill” was already used in old graphics APIs before you misused it. Why not using the fucking “patch” term? You are like Corky Thatcher: a retard with great visibility.

  22. @Alberto – Wow why do you seem so upset? It’s okay to disagree with his choice of term, but why do you have to make ad hominems? I suppose it’s somewhat understandable if this subject was somewhat personal, but really, it’s an article from 2010 about why someone wrote a word on the internet.

  23. Calm down Alberto!

  24. @Alberto-
    Wow, talk about crazy over-reaction and unnecessary hostility.

    You can be upset at a hijacking of your apparently religiously reserved terminology, but directing that ire at Remy is ridiculous ignorance.

    BTW, here’s some more terminology bastardizing to “upset” you:

    “polyfill: back-filling standardized. prollyfill: back-filling likely-to-standardize. hopefill: back-filling what we hope gets standardized” (https://twitter.com/getify/status/343441715060932610)

  25. @alberto You mad bro?

  26. Because terms never acquire new meanings, right Alberto? (hint, Google etymology).

    You have provided a prime example of a word which has changed its meaning over time: (from Wikipedia) “In modern English usage, the terms “idiot” and “idiocy” describe an extreme folly or stupidity, and its symptoms (foolish or stupid utterance or deed).”

    Stupid utterance, indeed.

  27. Alberto, please take your arguments directly to the metaphorical source: http://www.polycell.co.uk/products/polycell_fine_surface_polyfilla.jsp

  28. Polyfill works for me both in terms of its British English usage – something that fills in cracks – and it’s Greek etymology – to fill many things (ie. missing functionality in old browsers). Both describe in essence what an HTML5 polyfill does, and more to the point – it has stuck. As a C++ developer I know that ‘polyfill’ has already been used for graphics drawing routines that fill a polygon with a particular colour or pattern – but so what? Words can have different meanings in different contexts. Deal with it, @alberto!

  29. [...] and Mozilla’s less imaginatively named x-Tag polyfill library. The polyfill concept has been around for a while. The idea here is to replicate an API that the browser should have natively in JavaScript or a [...]

Leave a Reply
Not required

CODE: Please escape code and wrap in <pre><code>, doing so will automatically syntax highlight