Kickstarting your JavaScript project

Lately there has been tremendous amount of tools and technologies for JavaScript projects. For each aspect of the project configuration, like build automation for example, you can find several tools providing the same thing. The fact that you have so many options to choose from can lead to no choice at all (as Barry Schwartz stated). Therefore, this blog post will show a set of tools which will help you start and configure your JavaScript project quickly and easily.

Disclaimer: Tools mentioned here are the ones that suited me the most as I’m coming from the Java world, so they are not the ultimate weapon that everyone should use.

In my example, I wanted to create an AngularJS project with all the usual things that I was used to with Java projects, such as dependency management, build automation, and so on. The actual JS framework that you decide to use won’t affect anything that will be mentioned here.

Let’s start. The first item on our list will be dependency management. Humans left caves long ago, so we should also use a tool which will handle dependencies for us instead of doing it manually like cavemen.

Meet Bower !

Bower is a package manager which will keep track of your dependencies. There are a couple of requirements before you can install Bower. You need to have Node.js , npm and Git installed in order to use Bower. Installation is straightforward, all you need to do is to install Bower via npm from the command line.

$npm install -g bower

Like similar tools, Bower has its own manifest file (bower.json) where all dependencies for your project are saved. Using Bower, you can install all packages specified in the bower.json file or you can install packages individually by name and add them to the manifest file. All installed packages will be stored in the bower_components directory as a part of the default configuration.

You can use the bower init command to create the initial bower.json file.

$bower init

After that, install your packages and save them to bower.json with the following command:

$ bower install --save

Ok, so now you are ready to install all the libraries that you need, but where will you find them? Bower has its own registry where you can search for packages.

After adding several packages, your bower.json should look like this.

https://gist.github.com/ozrengulan/21ef53fc1c8f1fdadafc

Note that there are signs as a prefix to some of the package versions. This is because Bower supports semantic versioning when declaring packages. So you can specify if you want to update only a bugfix version or maybe you want to specify a range of versions and so on. After the packages are installed, you can just use them in your html pages, referencing to the bower_components directory if you didn’t modify default configuration.

1<script src="bower_components/angular/angular.min.js"></script>

Achievement unocked! Dependency management successfully implemented!

Next stop, build automation!

Grunt , doing the work for you!

By definition, Grunt is a JavaScript task runner and before we dig into Grunt’s configuration, let’s see what Grunt can offer us:

• Code quality check
• Test execution
• Cleaning of distribution directory
• Copying of source files to distribution directory
• Replacing server properties
• Minifying CSS files
• Minifying and concatenating JS files into one distribution file
• Adding revision number for each release
• Starting up Grunt’s server
• Creating watch on source files in case of modification

Requirements for running Grunt are pretty much the same as for Bower. You need to install Node.js , npm and Grunt itself. You can install Grunt easily by adding it to npm’s package.json file which will then be picked up when you run:

npm install

Also, you need to install Grunt’s command line interface since you will be using it to run Grunt tasks.

npm install -g grunt-cli

The heart of Grunt is his Gruntfile.js. This is the place where you will configure the tasks/plugins you want to use. The file itself can be split into two parts, the first one where you configure each of the plugins and the second one where you define what your build process will look like.

https://gist.github.com/ozrengulan/5790d0ce0c926dd378cf

For each of these tasks, Grunt already has plugins which you can use. You can search for existing plugins in the public repository or you can create your own.

Here is the list of useful plugins that I find interesting and their description:

• jshint-stylish for static code quality check
• karma and jasmine-core for writing and running unit tests
• grunt-contrib-clean for cleaning of directories
• grunt-contrib-copy for copying source files
• grunt-contrib-cssmin for compressing CSS files
• grunt-contrib-uglify for compressing JS files
• grunt-filerev for revisioning files

There are tons of other plugins which might be useful to you, so feel free to explore what else Grunt can offer you.

Yeoman

One more thing I would like to mention is Yeoman. Yeoman is a scaffolding tool which can be very useful for kickstarting your web app. You can specify what kind of project you would like to generate and which technologies to use. If you are interested to see more about Yeoman, take a look at their official web page .

That’s all, folks!

I didn’t go into particular implementation details, since the intention of this post is to get you going. Also, all tools that I mentioned here have several alternatives, like using npm directly instead of Bower etc. I wanted to share my experience and what was useful to me, hoping that it can also be useful to you :).