Building frontend web applications using backbone.js & brunch.io
02 Feb 2012
I planned to test:
- a language abstraction coffeescript
- a frontend MVC framework that deals with RESTful APIs spine.js, backbone.js
- a template engine (eco, coffeekup)
First of all, I tried spine.js that is a frontend framework that provides:
- bootstrapping tools (project generation…)
- testing tools
But I trashed it cause of hard jQuery dependency (<troll>I hate jQuery</troll>).
So, next I discovered brunch.io that is a backbone.js projects bootstrapper that does quite the same things as spine.js with the possibility to replace jQuery by zepto.js.
The stack here is composed of:
- css tools (boilerplate…)
- brunch.io (project configuration and class bootsrapping)
My favorite RESTful API to test new client is github’s one, cause it has been well designed and CORS requests are allowed.
If you planned to write a client side application on top of that kind of library, make sure the service is consumable via XHR, otherwise you’ll have to make a server side “reverse proxy application”, and then doing the job client side will make no sence (IMHO).
Lets start the project:
Now directory tree and configs has been created with default assets.
runs an express.js instance that delivers compiled files (just open http://localhost:3000 in your favorite browser).
Backbone main concepts
Backbone routers is the navigation layer that links UI actions to the views.
Views are controller classes that deal with your business models and the UI. Each view as an
el member that is the DOM element where rendering will be displayed.
Starting a view via brunch.io:
Then with a piece of logic:
A model is a business entity, that is linked to an HTTP ressource using the url attribute.
May be persisted and fetched from local storage to.
Collection is a set of model objects, as models, they may be linked to an HTTP ressource.
That’s all for basics. For now, my application only lists issues for a given project. I’ll maybe add more features (like create / update / delete issues) later. You’ll find a live demo here.