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.
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
Combined with the watch files mechanism the only thing to get feedback is to save.
Completely Mock / Stub the server interface
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:
- grunt-jade to compile your jade templates
- recess and grunt-recess to compile your less code
- grunt-contrib-compress to zip all your files into one artefact
- grunt-clean to remove old build
- grunt-contrib-copy to copy assets like images etc.
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!