Titanium With Coffeescript and Backbone.js - Part 2

In Part 1 I looked into Titanium with Coffeescript and a Rakefile for compiling and run from the CLI. Now it is time to see how I integrate with Backbone.js for pure REST awesomeness.

Warning: I will assume you are using Ruby on Rails as the server backend.

Integrating backbone.js libraries

Backbone.js is often used with underscore.js, and I actually use the later a lot. So the first thing I do is to install backbone and underscore under Resources/lib directory, and import it on my main.coffee file.

Now the thing is, Backbone is pure Javascript and by default has no idea on how to make a HTTP call, besides using jQuery for AJAX. So I dug a little on the internet and found a Titanium compatible Backbone.Sync module that you can see on this gist. This version uses Ti.Network.HTTPClient to proper transmit the HTTP requests.

Making Rails accept the HTTP POST data

Now that my Titanium App knows how to make proper HTTP requests, I have another problem. During my tests I couldn’t make Titanium send the model’s attributes in the correct format for Rails to recognize them. Somehow Rails is supposed to accept the body encoded as JSON but I never got it to work. Also, I found no way of sending Files (TiBlob) to Rails without using my custom solution (how do you encode binary data on JSON?).

So I needed to invent a way of formatting the model’s attributes using Rails’ standards. You’ve probably noticed that on line 28 I call model.toParams() if I’m sending a POST body. So I hacked a quick way of generating Rails compatible attributes, and extracted into a class called QueryStringBuilder:

class QueryStringBuilder stringify: (obj, prefix, accum = {}) -> if _.isArray(obj) this.stringifyArray obj, prefix, accum else if _.isString(obj) || _.isNumber(obj) || _.isDate(obj) || "#{obj}" == "[object TiBlob]" this.stringifyString obj, prefix, accum else if _.isBoolean(obj) this.stringifyBoolean obj, prefix, accum else if obj? if obj.attributes? this.stringifyObject obj.attributes, prefix, accum else this.stringifyObject obj, prefix, accum else return prefix accum stringifyBoolean: (bool, prefix, accum) -> unless prefix throw new TypeError("Stringify expects an object") accum[prefix] = if bool then 1 else 0 stringifyString: (str, prefix, accum) -> unless prefix throw new TypeError("Stringify expects an object") accum[prefix] = str stringifyArray: (arr, prefix, accum) -> unless prefix throw new TypeError("Stringify expects an object") i = 0 for item in arr this.stringify(item, "#{prefix}[#{i++}]", accum) stringifyObject: (obj, prefix, accum) -> for key, value of obj continue if key.match(/_preview$/) new_key = key if _.isArray(value) new_key = "#{key}_attributes" new_prefix = '' if prefix new_prefix = "#{prefix}[#{encodeURIComponent(new_key)}]" else new_prefix = encodeURIComponent new_key this.stringify value, new_prefix, accum

This class uses underscore calls to detect variable types, and should handle most of the basic types on your application. It should handle nested attributes too, and notice that when an attribute is a file (TiBlob) it just passes the object down the stack, because later, the Titanium HTTP module will handle it and encode on the POST body.

Defining a Backbone model

So armed with the previous tool, I could for instance write a Backbone module to handle blog posts like this:

class Post extends Backbone.Model urlRoot: app.endpoint + "/posts" toParams: -> # assuming you've stored an instance of the previous QueryStringBuilder class... app.query_string_builder.stringify(this.attributes, "post") class Posts extends Backbone.Collection url: app.endpoint + "/posts" model: Post app.models.Post = Post app.models.Posts = Posts

Binding to Titanium Views

So with the previous mechanism, it’s very easy to tie Backbone Models to Titanium Views. Remember the way I did ViewControllers on part 1? Let’s build one that manages blog posts using a TableView:

class PostsViewController # assumming an existing @tableView and @window reload: -> @posts = new app.models.Posts() @posts.fetch success: => @prepareData(@posts.models) error: (e) => Ti.API.error JSON.stringify(e) prepareData: (models) -> @tableView.data = _.map models, (model) -> { title: model.get('title'), model: model, hasChild: true }

So a simple fetch and massage the data to fit the tableview. Nothing fancy so far right? Now the best part comes when you’re showing a Post model:

class PostViewController initialize: (@post) -> # create @window and @tableView data = [] data.push @createTitleRow() data.push @createBodyRow() data.push @createAuthorRow() @tableView.data = data createTitleRow: -> row = Ti.UI.createTableViewRow title: @post.get('title') @post.bind 'change:title', (e) => row.title = @post.get('title') row # ...

Notice line 16 and 17. We are literally binding the model attributes to a view (in our case, a row). So imagine that for some reason, you change the title of the post (by doing @post.set({title:"foo"})), Backbone would trigger the change, and the table view row would automatically display the new value! For instance, imagine an Edit button that shows a drill down view controller to edit the post. As soon as you change a value on the model, the parent view will be updated! That for me was plain awesome when it worked for the first time.

So by using this method, all I have to do is to bind model attributes to Titanium views, and all changes are automatically propagated to the correct places! Using this setup saved me a lot of time and code writing REST applications with iOS and Titanium.

Now this blog post is getting big and there are some things I didn’t talk, like how to save models on our Rails backend, and how this setup works on Android (hint: it does work!). Maybe I’ll leave that and a few tricks for part 3? :-)

There’s no place like ::1

Titanium With Coffeescript and Backbone.js - Part 2

Integrating backbone.js libraries

Making Rails accept the HTTP POST data

Defining a Backbone model

Binding to Titanium Views

Comments