Building frontend web applications using backbone.js & brunch.io
02 Feb 2012
Last sunday I decided to grow up my javascript skills by playing with modern and cool libraries.
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…)
- views
- models
- routing
- 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:
- underscore.js
- backbone.js
- jasmine
- coffeescript
- css tools (boilerplate…)
- brunch.io (project configuration and class bootsrapping)
Test project
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
Routers
Backbone routers is the navigation layer that links UI actions to the views.
Sample router:
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:
Models
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.
Sample:
Collections
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.
See you.