To develop large scalable JavaScript projects you need the right setup. You can use a tool like yeomen to avoid boring setup effort. But in many projects you can’t use such tools (maybe you have to work with windows) and therefore you need to set up everything by yourself. In this blog post I will summarize what tools and frameworks I use to develop JavaScript efficient.

My aim is to setup a development environment in a way that you get early feedback!

Use a fast build tool

The baseline of your development velocity is the speed of your build tool. For me grunt is the tool of choice. It’s both easy to understand and easy to extend. In addition you get a lot of free plugins. The tool itself is super fast and for me definitely the best choice.

Watch files to build instantly

The compiling process should be invisible while you’re programing. But you should compile as much as possible to get early feedback. Therefore you can use the watch task which is already integrated in grunt. To compile your project all you have to do now is to save a file.

Lint your JavaScript code

Static code analysis is so useful. You can identify a lot of problems while compiling without executing even one line of your code. That’s awesome. I strongly recommend to lint your code, but configure your lint rules carefully. Your team should completely understand why all this rules are necessary and all team members should commit to the rule set. The tool: jshint

Test drive your code (TDD / BDD)

Test driven development is the most important thing if you really want fast feedback. But no one likes to stop programming, switching to a browser, reloading the test page to see a red bar, switching to the IDE, programming, switching to the browser … you got it right? It’s annoying and therefore I use following tools to get a nice tdd feeling:

  • basic test framework: jasmine
  • mocking/stubing: sinon.js
  • command line interface to avoid a bad development experiance: grunt-jasmine-runner and PhantomJS

    Combined with the watch files mechanism the only thing to get feedback is to save.

Completely Mock / Stub the server interface

Test driven development let you develop your JavaScript(-App) without a working back end (REST interface or something else). But you still can’t watch your user interface without. So what I did is to mock all ajax requests. As a result you can not only test drive your application logic without a backend but you can also use the entire application! That’s awesome, right? I tried this development style first two years ago and I’m still loving it. You are so much faster and you are completely independent. I prefer this also when I’m working alone because you can try some things faster without heavy backend changes. All you need are two handy frameworks:

Use live reloading of updated watch files

When you already mock everything the icing on the cake is to have live reloading of updated watch files. With this feature and a big screen you can see your changes right away. That’s brilliant and so easy with grunt-reload.

Now you know all tools I highly recommend; But there are even more which makes your development a lot easier:

I hope you like this overview and you’re motivated to improve your development setup. Feel free to share your favourite tool with us, too — thx!