I do a lot of R&D prototypes, which requires building new apps quickly, and often times the apps have to look very good
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
I can't believe it can be done so elegantly moment on the frontend. Also, the constant
This dilemma got alleviated for me last year when I found Sencha Architect, it allowed me to build frontend UI using
Architect has been the most productive tool for me in terms of building frontend UI. But there's still this
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