No more holy sxxt when writing JavaScripts

Lost in Space
@tomchentw/software
2 min readOct 13, 2014

Recently, @jonathanong released a game changing project: polyfills.io to the JavaScript world. The idea of that is really simple:

Serve what only you need polyfills to your browser based on its user-agent string.

Awesome, right? You can now always play with the latest JavaScript APIs, and no network overhead to worried about. Don’t call

Array.prototype.slice.call(arguments).map(mapFn)

to convert arguments object into array. Now just use

Array.of(arguments).map(mapFn)
// Or combine them together using:
Array.from(arguments, mapFn).forEach

interesting, right? Open your inspector on this page and try it out yourself!

One more thing

However, I found that there are many code duplications across the polyfills. Not to mention well-developed shims like es5-shim that are written in the era without module systems. Another issue is, now we have a database on how much polyfills for each version of browsers, we should be able to remove the test existence code and just serve them as needed. We can also apply this trick for bug-fixes, too.

So I came across a solution: why not rewrite them all with module styles? We can have more tricks to play with using modern module loaders like webpack. We can inject predefined variables to our script, as they’re acted as constants, the unnecessary code could be removed by dead code elimination during minifying process.

From those repositories, we’ve got everything needed: working code and passing test specs. We just need to convert them into modularized style (CommonJS) and linked them with webpack. The first target is definitely es5-shim/es5-shim.js!! It took me two days to finish it and the result is really astonishing: the gzipped file size is 17.8% saved!! I’m really impressed!! Imaging how much duplication we can removed after whole rewrite?

https://github.com/tomchentw/holyfills

So here it comes: holyfills. Naming reason is in the title of this post. My next target would be es6-shims, thanks to @paulmillr’s great work! I’m also looking for contributors so if you think it’s interesting to you and wanna join, just fork and raise a pull request.

Let’s make developing with JavaScript more fun!

--

--

Lost in Space
@tomchentw/software

<Tom Chen> Aspie. Introvert. Remoter. Blogger. 「從程式碼的26個英文字母到文章的26個英文字母,開始發現寫作的魅力。」