Building frontend web applications using backbone.js & brunch.io

02 Feb 2012

• javascript
• backbone
• brunch

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:

$ 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

Routers

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

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:

$ 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
    this

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

  addAll: =>
    @issues.each @addOne

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.

$ brunch generate model issue

Sample:

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

  defaults:
    title: 'New issue'
    body: null

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.