Client Side MVC with Backbone, CoffeeScript, and Rails
I can't believe it can be done so elegantly moment on the frontend. Also, the constant
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.
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
|View + Router||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:
Thorax(by Walmart Labs) http://walmartlabs.github.com/thorax
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