Useful tools to develop front-end JavaScript

JavaScript development is... not easy. Sometime I get the feeling that JavaScript was designed with the deliberate intention of tripping inattentive programmers. Oops, you declard a global instead of a local variable, too bad for your algorithm. Gah!

For this reason, I try to rely on tools able to catch the frequent mistakes I make. Problem is, unlike in Java or C#, no IDE do that sort of work very well; the JavaScript ecosystem change so fast that any IDE is already outdated on release day. So for now, I rely on CLI tool that are easier to create and update, but less user-friendly. They work with typed command rather than fun little icons, and plug-and-play is a distant dream.

Still, once I got over the initial bump of complexity, I noticed a significant improvement in my workflow. I wrote down that list of tools; I sure hope it can avoid others the paralyzis of starting a large scale JavaScript project.

Now, a word of caution: JavaScript is a large and fast-evolving world, and nobody seems to agree on anything. This list is my own JavaScript tool belt, and some of the tools listed here may not please everyone. All I know is that those tools improved my workflow, and I hope they can improve the workflow of others. But alternative solutions may better suit other projects.

Also, as I said, those are CLI based, and what more, they are often done by volonteer, so

  • Opening a command-line is a prerequisite;
  • They won't magically integrate one into another: some assembly is required to make them work as a coherent whole;
  • Their documentation can be lacking. A strong Google-fu is essential.

You have been warned.


The tools

Node and NPM.

JavaScript outside the browser. Most of the tools are based on those technologies, so they are handy even when not working on the server. Not having to switch between languages when writing build script is welcome.


Grunt

A build automation to run repetitive tasks. Its just so easy to forget somethings in a complex procedure. With grunt, tasks can be automated so they are done the same way every time. It's an ISO-9001 certification for the build. Custom tasks can be coded for special needs, and it's easy to find useful predefined tasks in the immense repository of existing plug-ins. Careful though, Sturgeon law apply for non-official plugin.


JSHint

A linter to find syntax errors and problematic use of JavaScript. Linting your code before hitting "refresh" eliminate a lot of facepalm moment, and help ensuring a consistent coding style. I suggest cranking it up to the maximum severity first, and then turning off the annoying rules that don't seem to make sense.


CSSlint

A linter to catch CSS syntax errors and problematic rules. Best used with the grunt plugin. Its opinionated nature can get in the way; I suggest relaxing some of the rules.


Karma

I am a real fanboy of that one.

A test runner that can run unit tests in any browser. Open a server, point it to your source and test file, connect any browser to the URL it gave you, and be amazed at how you can run unit tests in 10 different browser in less than five second. This blew my mind when I first saw it in action.

What set it appart from similar tools is its compatibility with a grunt workflow. I created a "check" task in grunt that lint the JS files and run test in every supported browser in one short command. For people who run their tests every 5 minutes, this is amazing.


Mocha

A JavaScript test framework. Karma run test, Mocha structure them (think JUnit). While there are many test framework for JavaScript, I like mocha because it work well with browsers and Node, and because it handle asynchronous tests easily.


PhantomJS.

An headless browser that don't require any GUI to run. Finally a browser that can run on a CI server! Great to run smoke and unit tests without an heavy browser sitting on your RAM. Best combined with Karma above and Selenium below. Running it in the background without cluttering the screen is a killer feature.


Browserify

A modular approach to JavaScript. Structure the JavaScript in independant modules instead of shoving everything in one big global var. This is great to avoid the traditionnal mess of "everything is in the global namespace, yay!". RequireJS is another approach, but I couldn't get it to work properly when I tried it.


grunt-contrib-concat

Pack file together into one big file. If you don't use Browserify, at least use that utility. Jamming 30 script tags in an HTML page is just too hard to maintain. It use it along with my browserified JS bundle to include third party libraries that don't support CommonJS (the browserify/node module format).


Live Reload

Allow you to reload the browser at every change. This is mostly a designer tool, but a very useful one. The Mac App Store version is not free, but the command line version is open source and can be use natively by the grunt-contrib-watch plugin.

Like Karma, it work in any browsers instance capable of opening the URL it give you; I used it on a real iPhone and an Android Phone to do mobile design without moving my hand away from the keyboard to refresh. Pretty cool.


Express

A small web framework for Node. While this list is for browser based JavaScript development, I found that a quick and dirty Express server to mock / iterate on the REST APIs used by the application is pretty useful.


Modern IE

Virtual machine for any version of IE on any Windows, for most virtualization technologies (VMware, Virtual Box, Parallel, Hyper-V). The VM work for one month. Very useful to test against those crufty old version of IE. Especially great for those on a Mac like me. A big thank you to Microsoft for this ^^.


WebStorm

An IDE to develop JavaScript, with code completion and refactoring tools. JavaScript being dynamic, this won't be like Eclipse or Visual Studio by any mean, but it can go further that a simple text editor.

I guess this is my controversial suggestion. A lot of developer prefer their Sublime Text / VIM / Text editor of choice. Me, I find that being able to do an extract method with a simple Cmd + Alt + M is pretty useful to avoid dumb mistakes. Look, just use what you like OK?


Selenium for node

A browser automation tool. I am cautious with Selenium tests; they are by nature end-to-end, and thus usually slow, brittle and hard to maintain. Still, my experience showed me they have their place. Combined with PhantomJS, I use Selenium to run an end-to-end "Smoke Test" that can run the parts of the application that are hard to unit test, like bootstrapping code. This serve to catch errors that I would have missed otherwise.


Those tools really improved the way I develop with JavaScript, and I don't think I could live without them today. If someone feel as stuck as I did when I first started doing large scale JavaScript development, I would suggest at least checking them out. You can also check the more complete list created by James Shore, who is the author of the 'Let Code JavaScript' video tutorials.

Also, if I had one piece of advice to give about JavaScript development, it would be: Don't cling too much to the tools you had before. Forget advanced refactoring tools, forget Maven, forget Eclipse. The usual tools for Java, C#, Python etc. are of little use with JavaScript. This mean redoing the development stack from the beginning, and it can be frustrating when JavaScript is only a small part of a project. Still, it's important to put down the proverbial hammer and to learn how to use a screwdriver, because JavaScript sure has a lot of loose screws.

Anyway, I wish good luck to anyone with a big JavaScript project :) .