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


MongoDB Trends
09/11/2020

A report that looks at trends in the usage of MongoDB alongside  SQL and other NoSQL database technologies, reveals a decline in SQL-only technologies at the same time as the adoption of&nbs [ ... ]



Microsoft Releases Playwright Test Runner
16/11/2020

Microsoft has released a preview version of Playwright Test Runner, a zero config cross-browser tool providing end-to-end testing for web apps. Features include browser automation for Playwright, Jest [ ... ]


More News

 

square

 



 

Comments




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

Last Updated ( Friday, 07 November 2014 )