Use a Customized Utility Library Instead of Pure Vanilla JS

About six months ago, I joined a new project and began making its website which targeted at mobile only. That was the first time for me to do mobile side development. It turned out not to be as easy as I thought before, quite a painful experience, to be honest.

Luckily, after several failed attempts, I managed to find a relatively efficient way to ease my daily development process. And that’s why I am writing this article for, to explain my view towards Vanilla JS in real world use cases.

Why Consider Using Vanilla JS

In the old days, taking good care of different browsers is a pain to every web developer. We usually had to write many if statements just to make sure a simple operation such as binding events works for all major browsers. With the help of jQuey, browser compatibility is no longer an issue. In terms of mobile web, there seems to be no need considering the use of jQuery since almost all of them are webkit based! Maybe it’s time to give Vanilla JS a try. With no external library involved, I could write all js code within the html file, reducing http requests number down to zero, which results in extremely fast page load time.

Vanilla JS is Not Good Enough

Most of you must have visited YOU MIGHT NOT NEED JQUERY. Everything went well at first replacing jQuery code with its Vanilla JS equivalent form. However, I soon found out that writing “document.querySelectorAll(‘a’)” all over my code is quite verbose compared with “$(‘a’)”. How to solve it? Easy, just go wrap it inside a function:

function $(selector) 
{
    return document.querySelectorAll(selector);
}

So I create a file called util.js included in every page. It contains all JavaScript utilities taken from all those library I like to use before. And when I found repeated codes, I extracted them into a small module and dumped it into that util.js. A month later, this common utility library quickly expanded its size to a level… well, no less than zepto. Oh my god! I tried not to use jQuery, but ended up with creating one myself. Of course, it’s much better than jQuery since it is customized with lots of functionalities jQuery dose not provide, such as cookie manipulation, class factory, and event emitter taken from nodejs. So, did I do it wrong? No, Vanilla JS is just not good enough to prevent me from writing jQuery style code. A small util library is a must for better development experience. This also explains why tiny libraries like Umbrella JS or Bliss.js was written, to make Vanilla JS more comfortable to work with.

What’s the Problem?

Writing your own utility library is fine. The problem is all about code reusability. Think about it. If you start a brand new project, what is the first thing you would do if no external library allowed? Write another utility library for it? Copy and paste code from your old libraries again? That’s silly. How about a general purpose util library… Then you’re reinventing another version of zepto with different api design, oops.

My Solution

Since utility library is made of many small JavaScript code snippets, why not break it into code pieces and use these bricks to customize special utility libraries for every new project? Sounds perfect. Now the problem turns into which tool I can choose to help construct the library. Webpack seems to be a nice choice. However, using it requires an extra entry js file. I want to write short codes inside html file and maybe a little nodejs template logic will also be involved.

<!-- PageA.tpl -->
<div>
    A bunch of html elements, blah blah blah…
</div>
<script>
    a.on(‘click’, function ()
    {
        {{if env == ‘xxx’}}
            doSomething();
        {{else}}
            doSomethingElse();
        {{/if}}
        // …
    });
</script>

Webpack doesn’t seem to be able to handle such cases. Personally, I am fond of underscore library code style. Thus, I decided to make a tool good at scanning source code for generating customized underscore like utility libraries, kind of like a smaller version of Webpack. Here is how to use it, just type a command and the util library will be generated on the fly.

eustia --watch

The tool is opensource at Github now. With the help of it, I no longer copy paste code from projects to projects in order to write util library on my own. I also created a repository for collecting useful code snippets, so I can use it via search and install command. For the most regular use ones, I move it to the project itself and try to write test for it.

In summary, Vanilla JS is not good enough, but we can still aid it with a customized util library.

Thanks for reading, and I hope this article does some help to you.