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 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.

16 Comments on "Front-end developer to backbone.js, what you need to know"

  1. Alex Kinnee says:

    I think it’s definitely useful to use a lightweight backend MVC framework with Backbone.js on the front end. You’d want to use an MVC framework with good support for REST routing. The MVC framework’s views would just be the JSON formatted data that Backbone.js expects.

  2. Calvin says:

    I don’t know whether it’s just me or if everybody else encountering issues with your site.
    It appears like some of the written text in your posts are running off
    the screen. Can somebody else please provide feedback and let me know if this is happening to them too?

    This may be a problem with my browser because I’ve
    had this happen before. Many thanks

  3. Spot on with this write-up, I seriously feel this amazing
    site needs far more attention. I’ll probably be back again to read more, thanks for the information!

  4. Wow! Finally I got a website from where I be capable of really obtain useful
    data regarding my study and knowledge.

    Feel free to surf to my blog … Webkinz Food Recipes

  5. Good web site you have got here.. It’s difficult to find high-quality
    writing like yours these days. I really appreciate people like you!
    Take care!!

    My web-site :: Emmie Z. Friehauf

  6. My brother recommended I might like this web site. He used to be totally right.
    This put up truly made my day. You can not consider just how so much time I had spent for this info!
    Thank you!

    my web-site: Jackqueline M. Ernspiker

  7. This article gives clear idea for the new users of blogging, that
    actually how to do running a blog.

    my page … Gabriel T. Johnsey

  8. What’s up it’s me, I am also visiting this
    web site daily, this web page is actually nice and the viewers
    are genuinely sharing good thoughts.

  9. When someone writes an paragraph he/she keeps the
    plan of a user in his/her mind that how a user can be aware of it.
    So that’s why this article is great. Thanks!

  10. If some one needs expert view concerning blogging afterward i advise
    him/her to pay a quick visit this webpage, Keep up the nice job.

  11. I think the admin of this site is actually working hard in favor of his website, for the reason that here every data is quality based stuff.

  12. Whats up very cool web site!! Man .. Beautiful .. Superb
    .. I will bookmark your blog and take the feeds also?
    I’m happy to seek out numerous helpful information here in the put up, we want work
    out more techniques in this regard, thank you for sharing.
    . . . . .

  13. Having read this I thought it was really informative. I appreciate you finding the time and
    energy to put this information together. I once again find myself spending a lot
    of time both reading and commenting. But so what, it was still worth it!

  14. Hey, I think your blog might be having browser compatibility issues.
    When I look at your website in Safari, it looks fine but when opening in Internet Explorer, it has some overlapping.
    I just wanted to give you a quick heads up! Other then that, very good blog!

  15. What’s up to every one, the contents existing at this website are actually amazing for people experience, well, keep up the good work fellows.

Trackbacks for this post

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

Got something to say? Go for it!