Try Tuts+ Premium, Get Cash Back!
videos

Understanding Backbone.js and the Server

on Sep 15th 2012 with 52 comments
Tutorial Details
  • Difficulty: Intermediate
  • Completion Time: 30 Minutes

Most Backbone tutorials will describe the process of sending RESTful requests to the server. But, how do we capture that data with our server-side framework? How do we know what the request urls are? How do we monitor these requests using Chrome Dev Tools? I’ll show you all of that and more in this screencast.

Choose 720p for the best clarity.
Download Video

Closing Notes

Hopefully, if you’d been struggling to figure out how Backbone can communicate with your server, this video has clarified a few things. Don’t forget: if the acronym, REST, only makes you think about taking a nap, be sure to refer here and here to learn more about it.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.jvsoftware.com Javier Villanueva

    Great tut Jeffrey just a quick question, why did you use URI::segment() instead of get_show($id) to get the id of the model? Is it not possible with that version of laravel? It’s been a while since I used the framework so I’m not sure if they changed that.

    • http://dextructables.com Dex Barrett

      I think it works both ways, but yeah, personally I’d use the parameter approach instead of the segment one.

      • constient

        hi

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Hey, guys. Of course yes. Just a brain freeze. Screencasting is hard. :) Both methods work, but, yes, use $id.

      • http://www.jvsoftware.com Javier Villanueva

        Nice, btw what theme/coloor scheme are you using? It looks cool

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        It’s the RailsCasts theme.

  • http://notes.kloop.kg Said Kaldybaev

    Cool ))) thanks Jeff!

  • http://funez.uy JFunez

    Hi Jeffrey Way.

    Very clear as always.
    One question, can I force/override the save and fetch methods of backbone, to work offline? i.e. to use LocalStorage, or websql of the browser

    Thanks for the tuts

  • Tony

    Another awesome tutorial Jeff!

  • http://abderrahmane-tj.co.cc Abderrahmane TAHRI JOUTI

    I suppose you know this already Jeffrey, But you don’t need to refresh the page to get the data from the server :D

    Nice tutorial though.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      hehe

  • http://www.makemescript.nl Maik Diepenbroek

    Awesome Tut Jeff!

    I was familiar with REST but not with lavarel or backbone. Looks great though.

    You’ve explained the core fundamentals, thanks for making me enthusiastic about this!

  • http://www.lidoma.ir MD

    I so happy to have a “Download Video” link for Videos in NetTuts+ finally just like WebDesignTuts+.
    please keep this important property.

    Thanks

  • Marcin

    Thanks! Very nice video tutorial as always! Good job. However I run into some issues. I tried to do shell commands with laravel, but ie. ‘php artisan generate:resource’ returns ‘Sorry, I can’t find that task.’ Artisan help:commands does not show it. Does it mean you have created your own task?
    BTW: I am on Win7

  • http://zsitro.com Zsitro

    Now that’s the best screencasting speed i’ve seen. Big time!
    Ty.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Oh good – I’ve been working to find the perfect pace. Not lightning fast, but no so slow to the point that it puts you to sleep. :)

  • LiveFLex

    NIce screencast. Quick question: how come the primary key in the courses table incremented from 1 to 3 – what happened to the second record?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      I think I deleted a minute from the screencast and started over.

  • Pendar

    You explained how to fetch data from the server, but it’s still not clear to me how to bootstrap data on the page load as they’ve said here on Backbone’s page

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Well – using Laravel, you’d do View::make('home.index')->with('books', Book::all());. Then, within the view, you could add something like:

      <script>
var Books = new Backbone.Collection;
Books.reset({{ eloquent_to_json($books) }});
</script>

      The reason for bootstrapping in this way is to avoid having to send a needless AJAX request right when the page loads — just to receive data that you likely already have.

  • http://aldoutrera.com Aldo Utrera

    Thanks for the screencast Jeffrey, amazing timing, I was just about to start a project with angular and laravel and the json methods in laravel are going to come in handy.

    This is something I was really thinking about lately. You see a lot of people with tutorials and stuff and ‘come to try my js framework/library’ but nobody goes a step forward and try to explain a little about how this would talk to a server, so thanks Jeff, this was really needed.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks, Aldo! Glad it helped.

  • http://dffrnce.tumblr.com nXqd

    Thanks Jeff for great video about backbone.

    Out of topic: Do we have any videos about validation on backend, and returning meaningful message to user ? I find it’s hard sometimes we have to check on front end and back end as well. Looking for a good practice of doing this :)

  • http://net.tutsplus.com Jeffrey Way
    Author

    Hey guys –

    One quick note on my screencast is that it’s probably better to use Response::json() instead of eloquent_to_json(), because that will also send the proper headers in response.

    • gsm

      or even Response::eloquent()

  • Jose Perales

    Great Video!!

  • http://www.kikouken.com adam16ster

    my goodness is there anyone better than jeff at screencasting?! seriously i’d like to know.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Ahh thanks man.

  • Ian

    Hi Jeffrey,

    Any thoughts on why I get a 404 error when using backbone?

    I have setup larabone.dev

    When I do course.save() it gets a 404 error for http://larabone.dev/courses but manually typing in the url in the browser, it works.

    Looking at the headers in chrome everything looks right except for the 404 status.

    Thanks for any suggestions

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Hmmm – When you manually browse to http://larabone.dev/courses, that’s triggering a GET request. But, when Backbone sends the request to create a new course, it’s POSTing to larabone.dev/courses. So you need to represent those two in different ways.

      In your Laravel controller, do you have:

      public function post_create()
{
  // create new course with Input::json();
  // return Response::eloquent($course);
}

      Along with the appropriate route?

      Route::post('courses', 'courses@create');
      • ian

        Hey, thanks for the quick response.

        I made a mistake.

        I kept testing things out and looking over every spelling one letter at a time and finally tried changing post_create to action_create and when it worked I realized I had left off ‘restful’ when making the resource in artisan.

        Hanging my head in shame.

        Thank you and sorry for wasting time with this sillyness.

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Ahh – I did the same thing recently, in my Laravel Workflow video on Premium, I think.

  • http://fadamakis.com Fotis

    I personally prefer Django for the server side but Laravel looks really cool.
    Great tutorial. Thanks a lot.

  • http://bizflame.com bizflame

    Thanks for the great tut jeff.

  • David

    Great tutorial Jeffrey! I really like seeing tutorials on REST using different frameworks.

  • Mohamed Cherif BOUCHELAGHEM

    What about HTTP return codes I think is really importante

  • http://www.telecommutetojuryduty.com/ Dominick

    Jeffrey, you’re a Tuts master and your screencasts keep getting better and better. This one was so easy to follow and very clear & useful. I’m a front-end dev and have been working on my first Backbone project (with a Rails backend)—this rounded out my knowledge a bit by showing me a different server-side framework, Laravel. Thanks so much!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks, Dominick! :)

  • http://ako-kaman.com Ako Kaman

    Hey Jeff, good job man, as always!
    But one little mistake:
    You create a normal controller using your own generator task, then you edit the route, and next, the controller is converted to a restful one!

  • Bas

    Thanks for the tut Jeffrey! I also had the 404 problem with posting from Backbone. According to the Laravel docs i had to set the restful var in the courses controller ( public $restful = true;).

  • http://nacho.saski.com saski

    Great tutorial! I love how you overlay the terminal console over the SublimeText editor. How do you do that?? it’s video editing or any dark command???

  • Ian

    I completely forgot about finishing this tutorial last week and attempted a backbone tutorial from another site yesterday, which used a ruby server and json file for the data. We all learn differently and I have to say I would have been able to focus and understand backbone better if I had already finished this tutorial. For some reason everything works better in my mind when it starts with the server.

  • Isaac

    Hey, really nice tutorial!

    I’ve had some difficulty picking up Backbone and this really clarifies that whole RESTful workflow.

    Thanks.

  • Minuwan Deshapriya

    Nice tutorial. One tiny question, how to delete a specified id in this case using laravel ?

    • http://twitter.com/ashitvora Ashit Vora

      make a DELETE Request.

  • ade

    WOW.. Jeffrey you are really GOOD at explaining things. You should do more of this kind of stuff.

  • http://twitter.com/gioarvan Panos Arvanitis

    ty! laravel deserves attention…:)

  • http://twitter.com/marcogomesr Marco Antonio Gomes

    in laravel4 $input = Input::json(); $input['title'] works

  • ben

    Would have been valuable to see how to get a cross domain POST. I can’t seem to get it working even with the proper response headers on the server.

  • http://twitter.com/ionutzp Ionut Popa

    Hi Jeffrey,

    From the BB documentation: “A special property of models, the cid or client id is a unique identifier automatically assigned to all models when they’re first created. Client ids are handy when the model has not yet been saved to the server, and does not yet have its eventual true id, but already needs to be visible in the UI.”

    In your example you get the model already specifying and id. In a real world situation how would one handle this issues of ids for models? I mean after creating a model retrieving the id from the server and updating the client side model state…
    Hope this is clear