Autopolyfiller - Precise polyfills

In this article, I want to talk about the Autopolyfiller tool that helps you use the latest ECMAScript functions and not think about plug-in polyfills.

Unfortunately, not all users use the most modern browsers, and often we have to sacrifice readability of the code or use polyfills to more or less equalize all browsers and write cross-browser code.

There are a number of ways to remedy this situation:
')

lodash and underscore

This is quite a popular way to “fix” browsers today, plus the whole lodash brings a number of useful functions for working with data. In addition, it allows you to save the nerves of developers who are still afraid to change the prototype of the base classes "for good".

_.chain([1, 2, 3, 4]) .map(function (item) { return item * item; }) .filter(function (item) { return item < 9; }) .value(); 

I personally don’t like it because lodash makes the code “noisy”. But this is everyone's business.

es5shim

es5shim repairs almost all missing features that were approved in the ES5 specification. You just need to connect the file es5-shim.js and you can freely use almost all the benefits of EcmaScript 5.

 [1, 2, 3, 4] .map(function (item) { return item * item; }) .filter(function (item) { return item < 9; }); 

This code certainly looks much cleaner.

polyfill.io

The point is very simple. You include a script in your html code that is dynamically generated from the header of the client browser’s User-Agent and repairs everything that is broken in it:

 <script src="//polyfill.io"></script> 

(do not use this link in Production)

The method is quite interesting, but everything even patches what is not used in your code. Plus, someone might not like the dynamic generation of scripts, but it is cheap enough if you use caching web-north, although not entirely safe (see other caching proxies).

The project itself is polyfill .

Autopolyfiller

The previous methods of fixing JavaScript have a significant drawback. They make you think. It is more accurate to independently resolve all dependencies of your code, taking into account the versions of supported browsers (include some additional scripts). Or they can break about the reality of www. Yes, and precisely for this reason, many developers include all es5shim (without special builds) and are afraid to turn it off after giving up support for IE8 (and it just doesn't work). The project gradually acquires unnecessary dependencies and it is very, very painful to clean these dependencies.

Alternatively, you can create some file in which to store all methods used by ES5. And when adding a new method to the code to extend this file, considering all versions of supported browsers. Using this list, you can get custom es5shim build. And what if we increase the version of browsers, delete the method used? To write scrith? In general, the awl on soap.

If you look at it from the other side, then your code is that file with the list of dependencies, just this list is not explicit:

 [1, 2, 3, 4] .map(function (item) { return item * item; }) .filter(function (item) { return item < 9; }); 

We can easily understand that this code uses 2 functions from ES5: Array.prototype.map and Array.prototype.filter .

It is enough for us to teach the robot to find dependencies in our code and we will be able to automatically “patch” our code only with the necessary polyfills. A huge plus is that this list of dependencies clears itself and expands itself as your code changes.

From this simple idea was born the project Autopolyfiller, which helps you not to think. As you have already noticed, its name is similar to Autoprefixer , which professes the same principles, but with regard to CSS.

The algorithm of work of Autopolyfiller is very simple:
- You define a list of browsers that your project supports (this is not a must)
- Feed your code to Autopolyfiller
- Autopolyfiller parses AST and finds ES methods *
- Removes methods that you do not need using a list of browsers
- You get a code with polyfills

Due to the fact that JavaScript is an interpreted language, Autopolyfiller can miss in some very extreme cases.

- In this code $('div').map() it will find Array.prototype.map .
- In this code, eval('Object.keys(this)') and this code Object['k' + 'eys']() it will not find anything.

But if you do not do anything strange and do not use eval-like structures, then its accuracy will be quite high.

Out of the box, Autopolyfiller only supports safe, cross-browser and stable polyfills (ES6 not), which are taken from the open “database” of polyfills . However, you can easily expand it with your own.

In addition to the console utility and API, there are currently written Tasks under Gulp , Grunt and Enb . So that you can easily screw the Autopolyfiller into your assembly process today. And if you're still in doubt, try the demo !

References:
- Autopolyfiller project on Github
- Quality code autopolyfiller
- Autopolyfiller demo

I will be glad to answer all your questions.