Using backbone.js in my first product, what I learned

This week I launched an online wedding planner called WeddingDeck. Weddingdeck has backbone in it’s heart. There has been ups and downs while using it, and I wanted today to talk about a couple of stuff that happened to me along the road.

Defining your structure

There is no predefined structure shipped with backbone. Much like jQuery in fact, you kind of have to make your own. Personally I would prefer if there was a preferred structure explained (just for the sake of having a base one) but anyway, I guess you can pick that up on blogs. Personally I decided to go for a folder by “modules”, each module having a model file, a router file, a template, and a file for each view (generally in a folder views).

That makes a lot of js files. Like more than 80 js files in my case. Obviously that’s pretty bad to load, so in production I use minify php to combine all that js in 2 files. I really like the granular structure this give me. Easy to find stuff and bugs.

Events

Something I talked before, I really have some troubles with events from time to time. Like this week I had a weird bug where on submit of a form a modal view would open, which is in no way linked to that form.

I’m still not sure how that happened.. The other thing is handling dialogs, it was a bit of a bitch. But with backbone 0.9 they added .setElement() which triggers the delegateEvents, it’s now much better than before.

Template bugs are sometimes painful

Having errors in your templates is a pain because you don’t really know where they come from. Personally I use the underscore template engine, and one of the thing that really helped reduce my number of errors was to wrap my data passed to the template in a object.

Undefined variables are not accepted in underscore template, but undefined object properties are acceptable and return a nice blank.

Backbone is still cool

I started my mobile web version and I can reuse 70% of my code, that is really cool! I also had a lot of fun playing with backbone, it’s definitely a easy framework to extend, and you are in fact encouraged to extend backbone and overwrite functions to fit your needs.

I think the extendibility of backbone is one of the things that really shows the quality of the framework.

Cedric Dugas is a front-end veteran with more than 9 years under the belt, between his open source projects & entrepreneurial ambitions he is a product architect at CakeMail. Why don't you follow him on twitter.

5 Comments on "Using backbone.js in my first product, what I learned"

  1. Ruben Müller says:

    Have a look at the Backbone Boilerplate: https://github.com/tbranyen/backbone-boilerplate
    or Brunch at http://brunch.io for a predefined structure. :)

  2. deeptechtons says:

    I have been viewing your posts related to backbone for past 2 days and i have to say that you really done your homework there are valauable points i missed during development with backbone that you got here.thanks :)

  3. Greg Benner says:

    Hey Dude,

    Really enjoy all the posts and vids.
    I’m also trying to learns ruby and backbone and this stuff helps!
    :D

  4. Sven says:

    as for a folder structure and having too many files, have a look at this repo here [1], I’m using requirejs to pull in everything and make a build for production.

    https://github.com/svnlto/vertebrae/tree/master/public/js

    hope this helps.

Got something to say? Go for it!