Building frontend web applications using backbone.js &

02 Feb 2012

Last sunday I decided to grow up my javascript skills by playing with modern and cool libraries.

I planned to test:

First of all, I tried spine.js that is a frontend framework that provides:

But I trashed it cause of hard jQuery dependency (<troll>I hate jQuery</troll>).

So, next I discovered 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:

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:

$ npm install -g brunch
$ brunch new issues
$ cd issues

Now directory tree and configs has been created with default assets.

$ brunch watch --server

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.

Sample router:

class exports.MainRouter extends Backbone.Router
  routes :
    ':username/:repository': 'repository'
    '': 'repository'

  repository: (username, repository) ->
    app.repositoryView.render(username, repository).el


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 generate view issue_list_view

Then with a piece of logic:

{IssueView} = require 'views/issue_view'
{Issues} = require 'collections/issues'

issueListTemplate = require './templates/issue_list'

class exports.IssueListView extends Backbone.View
  el: 'section:first'

  initialize: (repository) ->
    @issues = new Issues
    @issues.url = repository.get 'url'
    @issues.url+= '/issues'
    @issues.bind 'reset', @addAll

  render: =>
    issues = @issues.fetch()
    @$(@el).html issueListTemplate

  addOne: (issue) =>
    view = new IssueView model: issue
    $(@el).find('#issues tbody:first').append view.render().el

  addAll: =>
    @issues.each @addOne


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.

$ brunch generate model issue


class exports.Issue extends Backbone.Model
  ul: '/path/to/issue/ressource'

    title: 'New issue'
    body: null


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.