Javascript Web Application Development Flow


Recently, I was asked a question about Javascript development: how are modules used in ES6 and then how do they magically become one .js file when deployed. Since I have been using a workflow which answers both of these, I am going to write it up here for anyone who wants to know.

Big projects can be written in modular form in one of the EcmaScript standards (Actionscript, Javascript, Typescript etc) and then compiled into one file for web delivery.

The current project I am working on is written in ES6, the 2015 Javascript standard which natively supports modules. This modules support is, however, not implemented in most browsers as of yet. Thus I use a build process to compile ES6 to ES5 using babeljs. This compiles all modules into the ES5 standard which is widely implemented in most modern browsers. This process, however, still produces several different files. To conjugate all these files into one, I use Browserify. This traverses the dependency tree and includes all the files into a single javascript file. This file, however, is still big and contains comments and large file names. Next step is to minify this one single file, for which I use UglifyJS2 which mangles names and removes comments etc, making the code smaller in size, and if proprietary, harder to read and understand. This file, which is significantly smaller in size, with efficient compression can be easily delivered over the web.

This minified version is the one you use when you do:

<script src="/compiler.min.js"></script>

Note that the code structure and logic does not change in any of these steps. It is all a way of combining different files into one making sure code loads in the right sequence. Of course, all these steps can be automated using a build system like Grunt.

The modules system is one of the best things about the ES6 standard in my opinion. The documentation to get started can be found here.

Merry Christmas and Happy Holidays!

-Taha


comments powered by Disqus