As another part of my series on Javascript mobile apps, I’m going to discuss tooling.

I’ve listed my toolkit before, but here it is again:

  • jQuery
  • CoffeeScript
  • Backbone.js
  • Capt

jQuery

I use jQuery for the same reason everyone else does. It’s well implemented, fast and fun to use. The well implemented part becomes important when you’re dealing with fiddly implementation details of $.ajax calls. Being able to set headers, read headers and hook the progress events of the ajax object is important to a good mobile app. I use etags when checking for updates in my apps, specifying headers in a convenient hash shorthand is the kind of small detail that jQuery covers so well.

$.ajax {
  url : "http://example.com/endpoint/"
  dataType : 'json'
  timeout : 25000
  headers : { 'If-None-Match' : localStorage.getItem('etag') }
}

CoffeeScript

There are pros and cons of Javascript. The biggest downside I see is that if you’re working on projects that aren’t 100% coffeescript, you’re going to end up with ugliness. You either want to be able to convert all your code over to coffeescript (with the exception of 3rd party libraries), or you want to leave it all as javascript. Doing a combination is going to only cause heartbreak.

If you are sold on CoffeeScript though, it’s a fantastic tool. Using the fat arrow => to ensure class methods are called with the right this scope is an awesome timesaver. The biggest problem with CoffeeScript is probably debugging. This was easier in older versions of the coffee compiler, which had a 1:1 line to line conversion ratio, so model.js:23 was the same as model.coffee:23. Now, unhappily, your line numbers won’t match up, but as long as you can view the javascript output and find the error, you can easily work back and find out which line of coffeescript blew up on you.

Backbone.js

If you want a reason why to use Backbone, just view the apps using Backbone list on the backbone site. It’s a fantastic small piece of kit. It adds events, collections and models in a sensible way that will be familiar to any rails developer, but it does it without trying to pervert Javascript.

Basically, if you’re recieving json data from an endpoint and displaying it using Javascript, you should be using backbone or something similar.

I personally, used to make the mistake of trying to be ultra-minimal in my Javascript, avoiding doing heavy computation or having a lot of code over in the client. I’ve changed my way over the past year or two. If you’re struggling to do something without the correct tools, you’re wasting time, and you’ll probably end up with a half-assed solution. Refactor, break your code out into more classes, and increase your lines of code in Javascript.

Capt

This is my own tool, that I can’t really recommend to anyone else at the moment, since it’s a little bit half-assed and half-finished. But the important thing to do is to have a build tool that you can rely on. You want to be able to use .eco, .less, .coffee and .jst files easily, without having to compile them by hand, or having some makefile you run over and over. Find a build tool that watches your files, recompiles on the fly and includes each file seperately, so that when you get error messages, it’s not just error in bundled.js:31423423, which is going to be pleasantly impossible to debug.

I’d be keen to hear what other developers use for their build tools.