Front-end developer to backbone.js, what you need to know

If you are front-end developer you probably heard of Backbone at one time or another, this little framework implemented an MVC architecture on the front-end. Now if you never really delve into MVC and your only knowledge of it is doing some lite Code Igniter work you are in for a treat.

Not your typical MVC framework

It’s called an MVC framework but really it’s a weird kind, there is no controller, the event system is completely different from your typical PHP/Ruby MVC style and there is a new thing called collections. Basically Backbone is a MRVT(Model Route Views Template), scratch that, it’s in fact a MCRVT(Model Collection Route View Template).

It’s easy to get lost in all this, the documentation is ok but you probably going to miss a thing or two.

Can I use backbone with a back-end MVC Framework

I guess you could, but generally it would probably not be that useful. Backbone is really good at handling single page front-end heavy apps. If you are using a back-end framework to do all heavy lifting you probably use jQuery only for handling forms, animations and events.

Using Backbone in that case seems a little complex for the gains you get. That being said it seems a lot of people use backbone.js with rails. It would be an interesting article to see if it is possible and useful to only use the view in backbone with a multiple pages application.

The basic

A model is 1 item of your JSON object, so for a car dealer, that would be one car in the inventory. Want a new car? create a new model.

The collection handle a list of models, basically a collection has nothing to do with your back-end and everything to do with displaying your models, this is where you would also filter the cars years, colors etc, to display them.

The view is where you typically handle events, so all of the grunt works is here, clicks events and etc. I guess we can say that if you are only using jQuery to do some small UI, everything you normally do would be in views. Don’t be fools, there is generally no HTML in the views, you need to call a template for that.

The router is well, a router, it handles url hashes.

But if you really want to understand how it works you probably going to need tutorials. There is a good list of tutorials on backboneFu. They range in difficulties, I particularly like the nettuts one.

Screen Casts

I feel that as a Backbone noob, the screen casts over at peep code where the best at really strengthening my comprehension of backbone.

How hard is it?

Personally I find Backbone.js challenging but fun at the same time. I can understand why an engineer would like backbone, but I feel the knowledge needed to delve in it is a bit high, because of that, I was really surprise how much the Backbone adoption is strong.

Also generally you need more lines of code to do a functionality vs other solutions or plain jQuery.

All in all, if you want to do single page apps, backbone is a no brainer (it also has a strong following in mobile), for those that are only handling events, I would look at doing vanilla jQuery, adding a similar code structure of backbone in your code.

Cedric Dugas is an experienced front-end developer and founder of Position: Absolute, based in Montreal, Canada. When he is not doing CSS and jquery (does it ever happen?), he likes to read on web usability and play trumpet. Why don't you follow him on twitter.

Trackbacks for this post

  1. Position Absolute, web apps and front-end stuff -, the ressources for Backbone.. maybe «

Got something to say? Go for it!