Simplifying the build process with buildify

Akshat Jiwan Sharma, Sun May 26 2013

After building abstract I realized that my code was fickle .I turned to code review for help. Joseph the dreamer was kind enough to help me. One of the suggestions that he offered was

I suggest you break down your application into concerns. Break them so that you separate your UI code, your IO code (read/write), your logic and your utilities. Then you could use a dependency system like Require to manage these separated code into modules. Don’t worry if you end up with multiple files. You can use their optimizer after you got everything done.

Breaking the javascript files into multiple modules / files can increase the number of downloads for the end user unless a build tool is employed that concatenates all those files into one. So I looked at the suggested library and I was shocked by how opinionated it was. Just take a look at this example which is like hello world of require. Even in this simplistic case one has to include the library, write configuration files and load modules before anything can be done.

Now most of the community thinks that this is a good way to write javascript code but I was not expecting this and it did not fit in with my way of developing a client side application. So I started looking for alternatives. During my research I stumbled upon buildify , a build tool for javascript.

Just take a look at the introductory example. Yes you still have to write a configuration file but the process is drastically simplified. Not only can you specify which files to concatenate but you can also define javascript templates (they make use of mustache) which can simplify the building process a lot.

The templating system helped me a lot with abstract. Initially all of my code was wrapped inside a $(function(){}). However when I broke the file into different modules I was faced with a problem. How to I break the global function? Initially I thought since all the files would be concatenated I can just do this

 $(function){ 

// contents of my first file

followed by

//contents of my last file

}();

and sure enough it worked. But this was really ugly way of doing things and JS Hint went crazy on me and I could not uglify it since the javascript was invalid. It was after that I decided to use templating. The solution using templates is a lot cleaner and easier. All I had to do was create another file, that I called base like this

$(function(){

  

 });

and then tell my build file to wrap all the concatenated files in the template. My final build file looked like this

var buildify = require('buildify');

buildify().concat(['jquery.autosize.js','markdown.js','StaticVariables.js',
 'models.js','helpers.js','drafts.js']).
wrap('base.js').
save('./index.js').
uglify().save('./index.min.js');

As you can see this method of building is quite nice. The method chaining gives a clear indication of the flow of the build process. Just by reading the code one can infer that

  1. The files specified in the concat function are joined

  2. The concatenated files are wrapped inside the base.js file

  3. The final result is then saved in the index file for development and in index.min.js for production.

The more I have worked with this build process the more I like it. It is unassuming and gives you the freedom of doing things the way you want. I am a lot happier with my code now. All that remains is to write unit tests (ack!)

brislink has reincarnated as specter, the posts in the brislink blog have moved to my personal blog


comments powered by Disqus