Using a build process to minify, compress and optimize client side assets can take a variety of forms. The following document and attached examples provide the recommended method per the Client Side CoE.
At VML, developers are free to chose how they approach their everyday jobs. Our company methodology allows innovative individuals to solve problem in unique ways. This same philosophy leads to a very diverse range of technologies across teams and projects.
This point of view is one in many future documents from the Client Side CoE that will recommend a set of technologies to solve a common development problem. By using the suggested methods, you'll be able to take advantage of the following:
- Grow your knowledge of a framework through discussion with other developers at VML
- Receive help from other developers who are familiar with the given technology
- Work across teams more easily
- Reduce ramp up time when moving developers between projects
At the very minimum, all client side developers should be concerned with concatenation and minification of assets. Using a build process helps the developer test and repeat the steps required to prepare code for production environments.
The processes described in the example files also allow for the use of compiled client side languages.
It's strongly recommended that asset developers take the build process into their own hands. It's very unrealistic to expect a server side developer or system administrator to establish a build process the client side developer will find sufficient.
Minification and concatenation is nearly always appropriate for any web based project. Setting up a grunt task is easy, simple, and most elements are repeatable across projects.
Scenarios in which VML develops the original code base, but will eventually hand off assets to a third party or client, can complicate this process. When working with outside developers, thorough documentation is essential.
In short - grunt with a series of grunt-contrib modules is the preferred method of compiling, concatenating, and minifying client side assets at VML.
Instead of explaining each module in detail, we believe the best method of learning is through example. Two sample projects have been created to act as a set of tutorials for developers unfamiliar with grunt. Within each project you'll find a README with an explanation of purpose and install / compile instructions.
Please see @rmadsen's Github Project - https://github.com/ruzz311/vml-minification.
To run the example code, you'll first need to install both Node and Grunt.
- Node can be installed from nodejs.org.
- After node is installed, you'll be able to get started with grunt at gruntjs.org. If you've worked with grunt in the past, take special note of the required uninstall.
Teaching command line utilities is beyond the scope of this article. If you're unfamiliar or uncomfortable with CLI's, please reach out to a lead developer on your team or any of the following : @rmadsen, @bkrejci, @mcarter, @cbarendsen, @jlongstreet
A thorough explanation of Node is also beyond the scope of this article. If this is your first time using the framework, please review a very brief yet thorough explanation on package management within Node at http://en.wikipedia.org/wiki/Npm_(software) - it's at least thorough enough for the tasks covered in this article.
Node is a very versatile framework and will play a role in the future at VML. Both Node and Grunt are:
- Free to use
- Easy to install
- Well documented
- Open source
- Easy to contribute to
- Flexible and extendible
- Popular and interesting
Adobe, Pinterest, Backbone Boilerplate, Walmart Labs, Opera Software, jQuery, jQuery Mobile, jQuery UI, Twitter / TweetDeck and Modernizr just to name a few.
The above is a living document. Some feedback from those who have gone through the tutorials will be listed here:
- It's worth noting that references to files in the HTML documents are compiled assets. For example, in the simple project, the script asset should point to
assets/js/app.js, NOTassets/js/yourcode.js