Integrate Polyfill.io

[eduardoboucas]

Polyfill.io is a really interesting polyfill-as-a-service open-source project. The idea is that it serves polyfills to specific JavaScript features only if the browser of the user requesting them doesn't already support them natively. For example, check https://cdn.polyfill.io/v2/polyfill.js?features=fetch on a modern browser (one that supports fetch) and you'll see that no JS is served.

This has two major benefits over including polyfills manually:

1. You don't have to worry about managing and including polyfills in your codebase. You write modern JS code and let the Polyfill service handle compatibility issues at the edge;
2. You're not serving polyfills to people that natively support them, avoiding sending unnecessary data across the wire.

The code behind Polyfill.io is available on GitHub and even though it can work as a standalone server, it can also be used as a Node.js module.

My think is that we could use it to extend CDN with the ability to automatically polyfill JS files. So you'd serve your JS file with modern code and CDN would inject any necessary polyfills depending on the client's browser.

I'm happy to have a stab at this if we think it's worth pursuing.

[josephdenne]

I love this @eduardoboucas and would like to see a proof of concept, so please proceed.

[eduardoboucas]

This talent I have of creating more work for myself never lets me down. I shall proceed! 🚀

[orinokai]

I’ve been looking into polyfill.io recently too, but I ended up thinking: since it doesn’t completely replace transpiling (e.g. with Babel), what’s the real value? I can use babel-polyfill to get the same result as part of the build process. Or am I missing something?

[eduardoboucas]

@orinocai I think transpilation and polyfilling should be separate processes. For example, with Publish we're transpiling ES6 to ES5 at build stage with Babel, but the resulting bundle still includes ES5 code that isn't supported by some browsers (like Array.prototype.some or fetch, to name just a couple). Polyfill.io would be ideal to conditionally augment the bundle with the necessary polyfills.

And yes, you could add polyfills for these at build stage, but you'd be increasing the size of the bundle for everyone.

Also, you're assuming that everyone that needs to add polyfills will also have a transpiler, which may not be the case.

[orinokai]

@eduardoboucas Yep, fair enough. I still think if you’re going to transpile then the added polyfills would be a minimal size increase to the bundle, but I’m totally with you on the last point.

[eduardoboucas]

@orinocai Would you find it useful if CDN could also take care of transpiling?

[orinokai]

I’ve not yet had an opportunity to use CDN in production, but in theory yes, @eduardoboucas. It would be amazing if CDN could transpile JS and also CSS with something like http://cssnext.io

[eduardoboucas]

Just a quick note to say that I really want to see this one being built. Perhaps this could be CDN 3.1, which we could tackle after API ACL? One to discuss in the next call. 📞