Client Side MVC with Backbone, CoffeeScript, and Rails

As a backend developer, I always felt it’s tedious and time consuming to build frontend UI interfaces, and coding interactive behaviors in JavaScript, jQuery, HTML and CSS with Rails MVC has not been one of my favorite things – until recently.

I do a lot of R&D prototypes, which requires building new apps quickly, and often times the apps have to look very good in order to generate that ‘wow factor’. I can always get the job done by tweaking the JavaScript, HTML, and CSS here and there, but it just hasn’t been nearly as satisfying an experience on the frontend as I’ve had with Rails on the backend. There just hasn’t been a single omg, wow, I can't believe it can be done so elegantly moment on the frontend. Also, the constant context switching between JavaScript and Ruby only makes things worse.

This dilemma got alleviated for me last year when I found Sencha Architect, it allowed me to build frontend UI using the GUI editor very quickly and intuitively, and code JavaScript in small fragments in the IDE. By far, Sencha Architect has been the most productive tool for me in terms of building frontend UI. But there’s still this context switching problem. I just love Ruby so much to want anything to do with JavaScript (when possible).

Enter Backbone.js, CoffeeScript, and Twitter Bootstrap. (thought I’d never want to use the ‘Enter …’ expression, it always annoyed the heck out of me :))

This trio has been the closest to the Holy Grail of the frontend UI development for me so far.

Firstly, Backbone now provides structure to the front end apps with MVC (call it MV* if you prefer), making it a lot easier to develop and manage large scale client side MVC apps in the browser. Compared to the traditional server side MVC apps, the front end MVC single page apps are more responsive, and behave more like desktop apps. Then there is CoffeeScript with its similarly elegant syntax to Ruby that makes the context switching problem disappear, and more importantly, it enforces JavaScript best practices transparently (feel free to toss the JavaScript best practices and Nina books you bought).

Last but not least, Twitter Bootstrap with its beautifully (in the eyes of this beholder) crafted HTML/CSS components makes building awesome looking web apps a whole lot simpler.

For Rails developers, the backend MVC experience can be mostly carried over to the front end. For single page apps, server side MVC is largely not needed, especially the View part. And Rails is mostly an API server, which is just fine.

For behavior-driven development, there is Jasmine. When used with CoffeeScript, it’s almost the same as RSpec. And I also like Sinon.js for subbing and mocking server responses.

For client side MVC, Backbone is certainly not the only game in town, we have more than a few choices. Below are the brief summaries of some popular ones, feel free to check them out:

• Backbone.js – Simple, Easy, Popular, Flexible, Extensible
• Ember.js – Data & View Bindings, Computed Fields, Rails like
• Angular.js – Minimal Boilerplates, View Binding and DOM Abstraction, Extensible Markups
• Spine.js – Simple, MVC, CoffeeScript, Rails like
• Sencha – Full Featured, Comprehensive UI Components, Powerful Class System

All above are great choices for client side MVC along with some others. I like Backbone for its simplicity, especially when coupled with CoffeeScript, it’s a joy to use.

If you are interested in learning Backbone, here are some basics and also check out the resources listed below:

• Model – business domain models, key/value properties, events, persistence, validation
• Collection – list of models, provides convenience methods for sort, find, filter, iterator, CRUD, event handling, and etc
• View – Rendering templates, handle app & DOM events
• Router – map routes(url patterns) to handlers
• Template – UI pages that get compiled and rendered to the browser

And Backbone’s MV* compared to traditional MVC in the context of Rails apps:

Backbone 
Model
View Template(eco)
View + Router

MVC
Model
View(erb)
Controller

Simplicity is an advantage of Backbone, making it easy to learn, and flexible and easy to extend. But for large scale apps, this simplicity comes with a price – a lot of boilerplate code.

To alleviate the boilerplate code problem, and also address some common issues facing large scale apps (memory management, complex layout, and etc), several higher level frameworks are available, below are three of them, feel free to check them out:

• Backbone.Marionett http://marionettejs.com
• Chaplin.js http://chaplinjs.org
• Thorax (by Walmart Labs)

And I recently did a presentation at the DC Ruby User Group Jan 10, 2013 meetup on developing client side MVC apps using Backbone, CoffeeScript, and Rails, the slides can be found here http://www.slideshare.net/tomzeng/intridea-backbonerailsdcrug The sample app mentioned in the slides is available on Github at https://github.com/tomz/todo-backbone

Resources

• Backbone.js http://backbonejs.org
• CoffeeScript http://coffeescript.org
• Backbone on Rails https://github.com/meleyal/backbone-on-rails
• Twitter Bootstrap http://twitter.github.com/bootstrap
• Sinon.JS http://sinonjs.org