Polyfills As A Service
Written by Ian Elliot   
Friday, 07 November 2014

Polyfills - don't you just hate'm, but you can't live without them. The big problem is knowing when you need them. Now there is a solution that gets it just right every time.

 polyfillicon

 

In case you have missed out on what a polyfill is, I should explain. JavaScript a very powerful language and when someone invents some new feature it is usually possible to implement the new feature using the existing language - a polyfill. The idea is that browsers that support the new feature don't need the polyfill, but browsers that don't can still run your new up-to-date code with the help of the polyfill. It might not be as efficient as a native implementation but it allows the new feature to work everywhere. 

The problem is working out when a polyfill is needed, and perhaps even which version of a polyfill is needed. You can often end up running a polyfill when you don't need to. 

This is what a team at the Financial Times suggests as a solution:

  1. Developers insert a script tag into their page, which loads the polyfill service endpoint.

  2. The service analyses the browser’s user-agent header and a list of requested features (or uses a default list of everything polyfillable) and builds a list of polyfills that are required for this browser.

  3. The polyfills are ordered using a graph sort to place them in the right dependency order.

  4. The bundle is minified and served through a CDN.

For example, if you only need the Array.from polyfill you would include a script tag like:

<script src="//cdn.polyfill.io/v1/polyfill.min.js?
 features=Array.from" async defer>
</script>

You can of course add additional polyfills that you need after the features=

 

polyfillmatrix

 

There is a  feature matrix that you can use to discover what polyfills are supported and on what browsers. You might be a little worried that this approach seems to have gone back to the black art of user agent sniffing rather than feature detection, but in this case the reasoning is good. Browsers differ in the completeness of their support for various new features and only by testing which browser the code is running in can the correct polyfill be determined. 

Now we come to the surprising part. 

This service is live and you can start using it now. The Financial Times Lab has created the server side code needed and it is hosted for free by Fastly as a worldwide CDN.

The code is open source and available on GitHub so you can look at it, modify it and, of course, run your own server if you want to. The team also needs more polyfills and more tests to determine which polyfill to use so feel free to contribute. What is more if you do get a pull request into the repository, the FT will give you a month's premium access to all FT content - sounds like an enticing  bribe to me!

 

polyfillicon

 

More Information

Polyfill service

An easier way of using polyfills

Related Articles

Web Components With X-Tag       

GitHub's Atom Editor Is Web Native - What?       

 

To be informed about new articles on I Programmer, install the I Programmer Toolbar, subscribe to the RSS feed, follow us on, Twitter, FacebookGoogle+ or Linkedin,  or sign up for our weekly newsletter.

 

Banner


Microsoft Launches Project Reunion Developer Preview
17/03/2021

Microsoft has released a developer preview of Project Reunion, its initiative aimed at bringing the Windows development environment back to a coherent state.



Oh My Git! The Game
19/03/2021

Learn how to use Git with this fun, interactive game which takes you from being a complete newbie to efficient expert by covering everything you are likely to need. 


More News

 

square

 



 

Comments




or email your comment to: comments@i-programmer.info

Last Updated ( Friday, 07 November 2014 )