I spent some time on a little scripting project yesterday and decided to use Backbone and CoffeeScript. I've been looking for a reason to use Backbone just to become more familiar. I don't really use CoffeeScript, and even went through my periods as a CS hater. But it's always a good idea to stay familiar with what's out there. At the very least it'll make sure you're not full of shit when you talk to people about pros and cons. Anyway, this isn't comprehensive or even useful per se. I just thought I'd jot down some thoughts.
I should make a disclaimer that this wasn't a traditional project for Backbone. It was a node script that only uses models a collections. I needed to perform a bunch of actions on a dataset by hitting a REST api. I've been thinking for a while that tasks like this are often nicer if you can mock up a quick model domain around the api. Then you can work with Forum and Topic models and just do update and delete operations on them. Once you set these up, the scripting tasks become much more straight forward instead of wrangling http calls for everything.
I had read enough about Backbone to know the general outline of how to use Models and Collections. But trying to figure out how to treat these in CoffeeScript at the same time provided most of the headache. I wanted to try the class syntax, so I started out with something like this.
class Topic extends Backbone.Model
url: ->
baseURI + '/topics' + this.id
That seemed very reasonable to me. Yes the arrow function still bothers me and I was itching to use semi-colons. But all in all, pretty straight forward. Of course it didn't work. It's my own fault because I had written several of these along with a few other constructs without actually trying them out. I was just hacking and getting a feel for CS before worrying about getting the script running. I found myself very annoyed with CS. That's to be expected for me personally. I've talked about how the lack of punctuation and block delimiters actually slows me down. I have the same problem with Ruby and Python, and I used to write Python for a living. But it wasn't terrible, just personal preference, and I happen to be good at adapting to programming styles.
But here's a list of some things I noted.
I tried to use the string interpolation stuff.
class Topic extends Backbone.Model
url: ->
'#{baseURI}/topics/#{this.id}'
But it doesn't work with single quotes, which I prefer. I also used to write PHP so I know the advantages of being able to switch between strings that get interpolated and those that don't. But I also think that's mostly unnecessary in my experience. And this is supposed to be "just javascript". So finding that '' and "" now work differently is a smell to me. Not to mention that the string started to feel very cluttered with syntax once there are more than 2 substitutions. I went back to using concatenation.
I almost got used to the implicit return statements. It does require an extra moment of thought to look at the last line and make sure it's what I want returned from the function. I use return statements automatically so removing them is unlearning a habit. But once you do remove them, there's some dissonance with early return statements where you do have to use the keyword.
Topic = Zendesk.BaseModel.extend
url: ->
if this.has 'url'
return this.get 'url'
Zendesk.baseURI + '/topics/' + this.id
This is for the Zendesk api if you can't guess. Also I should probably use the little after conditionals if I'm trying to be idiomatic. I did in most places, but a few regular if statements crept in. Again the lack of delimiters makes this kind of bizarre to me.
config: (config) ->
extend this, config if config
config
But the unless thing bothers me the most.
options.url = model.url() + '.json' unless options.url
It's not until I get to the end of the line that I learn this doesn't happen all the time. It's weird. It makes uncommon conditions look like first class statements. I may be missing something about this. But to be fair, I've been renewing my appreciation for simple if statements. I've even abandoned the && / || trick in some cases
callback null, data if callback // CS
// vs.
callback && callback(null, data); // JS shorthand
// vs.
if(callback) { return callback(null, data); } // JS for old people
I've taken to sticking with the third form. Way more keystrokes, and yet completely unambiguous what's going on.
Finally, here's my little extend method. Backbone includes underscore, but I would've had to npm install it again to get it at the top level. And all I needed was this, so I wrote one. Can't say how many times I've done this exact thing. We really need this method or something very similar as a standard in JS. (end rant)
extend = (target, rest...) ->
for obj in rest
for key, val of obj
target[key] = val
target
I don't hate this. In fact I like this a lot. The rest params are sweet, the fact that for..in works on arrays is sweet. The fact that I can do a simple iteration over object properties is sweet. I've always been a fan of for loops over forEach, block scope not-withstanding. I haven't made my peace with for..of yet though. I would much rather have for..in just "do the right thing" depending on the input. But that's a pipe dream. Never gonna happen. So I could probably get used to the above. Or the JS equivalent anyway.
Anyway, back to getting the script working. I ran into several errors because my Model constructs weren't set up properly. I thought it was the class syntax. I realized that I didn't really know if class Topic extends Backbone.Model was equivalent to what the Backbone js tutorials say. var Topic = Backbone.Model.extend({}). My intuition told me it was not because I thought I remembered that class syntax in CS desugars to prototypal inheritance. It wouldn't be calling the extends method at all. So I skipped over this and switched to the assignment form. No classes. My models look like this in the end.
Topic = Zendesk.BaseModel.extend
url: ->
if this.has 'url'
return this.get 'url'
Zendesk.baseURI + '/topics/' + this.id
After the fact, I had the thought that Backbone.Model.extend was probably using the prototypal inheritance pattern underneath. That the class syntax was probably not my problem. But there you go.
The above problems were definitely harder to debug then they should've been. The error output doesn't point you to the right line. The code doesn't look the way I expect because it's generated. All the usual CS gripes. I won't spend a lot of time here because it just gets people riled up. I will say this though. I really feel like the only reason this wasn't a huge headache for me is because I'm very good at debugging javascript. I can't imagine someone who doesn't know javascript well going all in on CS and having to deal with this.
Anyway, I've got working models and collections now. Except they don't work because they expect to sync from the client using jQuery.ajax. One of the main reasons I wanted to try this is because I was intrigued at the idea of overriding the Backbone sync method and having all of i/o stuff just work. I used the backbone annotated source to get a feel for how sync usually works. And I ended up with this.
backboneSync = (method, model, options) ->
method = Zendesk.methodMap[method]
options ||= {}
options.method = method
options.url = model.url() + '.json' unless options.url
options = extend {}, Zendesk.syncDefaults, options
Zendesk.auth options
success = options.success
error = options.error
request options, (err, req, body) ->
return error(req, 'error', err) || err if err
success body, 'success', req if success
This is also very reasonable. By putting this method on my Backbone models, I can load them and update them in a node script using the request module. This was pretty awesome and exactly what I wanted to get out of this project. There are some rough edges here though.
- The success and error callbacks expect a jQuery.ajax style signature. I had to add the "success" and "error" things.
- The node request and response objects are not compatible with the xhr object. So if some backbone code tries to use these, it'll probably blow up.
- I had to add a method for authenticating. I would've thought Backbone supported a hook for this. I didn't see one offhand, but I didn't look too hard. Someone can enlighten me.
- I had to copy the
methodMapthat maps from CRUD names to HTTP methods, e.g. "update" -> "PUT". This is an unnecessary step. This map should be exposed for anyone to use.
Okay, this went on much longer than I thought. I know it won't make much difference to those who want to argue with me about some of this stuff. But I should re-iterate this is all just my personal opinion and experience. Take with a grain of salt please. Feel free to use the code below. It's only what I needed and I didn't even need to finish the task I started. It's also probably broken in several places. Cheers.
I am interested in constructive pointers and input on this code. Either about idiomatic CoffeeScript or better Backbone techniques.