8 ms·

Backbone.js Screencast - Introduction and Views

131 points by joeybeninghove 15y ago

A couple weeks ago I gave a webinar for Develop with Passion on Backbone.js. Unfortunately there was a problem with the recording, so I decided to redo what I covered in screencast form. In this screencast I give a basic introduction on how to bootstrap a new Backbone.js application and go in-depth on how to use Backbone Views in particular.

horseshoes 15y ago
Hard as hell guitars intro and then cut to a shy mumbling nasally guy, beet face and old lady room taking up half the room on the screen.
- joeybeninghove 15y ago
  Wow, thanks for the kind words, I think? :)
  - rawsyntax 15y ago
    don't sweat it, thanks for the hour long screencast on backbone.. that must've taken some time to put together
    - joeybeninghove 15y ago
      Sure, no problem. Funny thing is that I basically did it all in one take. That's just kinda how I roll. :)
- derickbailey 15y ago
  wow. you can't even man up and use a non-hidden font color? impressive. plus - i really hope you buy / watch my screencast when it's done... you're REALLY going to hate my voice, and i can't wait to hear what you have to say about it :)
  - kylemathews 15y ago
    His font is that color because he was downvoted enough times that the Hacker News software hid his comment.
    - derickbailey 15y ago
      interesting... i hadn't seen that before (not that i'm a total n00b or anything :D )
- BasDirks 15y ago
  Instaban please.
michaelbuckbee 15y ago
Thanks for taking the time to do the screencast and release it, I always find screencasts are a quick way to get a feel for how a new technology is going to work.
- joeybeninghove 15y ago
  No problem, thanks for the feedback! I really enjoyed doing it, hopefully more to come! :)
bilalhusain 15y ago
I just went through the presentation. > It covers Backbone Views and little bit of Events. And covers them nicely. Although, I would NOT suggest it to a pro developer (mainly due to 1 hr). > Backbone Model, Collection, Router, Sync etc will be, hopefully, covered in the next rounds. (Somethings will need to be revisited when wiring models etc) > A lot of time the presentations digresses. > Didn't talk about the setup - how haml, backbone is integrated; though I agree that it shouldn't be focus when starting. > Thanks to the video, I learnt a couple of things - views can be passed tagName..., params.name, haml each block > Finally, I'll add that Backbone looks even more cleaner in coffeescript (errors due to missing comma? no more a problem!) And jotted down comment after each 10 minutes into the presentation. > 10 minutes: not really backbone (jquery, javascript gotcha mostly) - admitted at minute 11 > 20 minutes: nice smooth sailing - el, tagName > 30 minutes: learnt a few things new things! but a bit slow for me :( > 40 minutes: mostly jquery/inheritence, next minutes are going to be about jquery templates > 50 minutes: focus lost in favour of templates, haml (but probably better for web-developer learning it) Teaching and motivating is a tough thing. Keep up the good work, waiting for the next part.
- joeybeninghove 15y ago
  Awesome feedback, thanks a ton for that! I definitely know there are areas where I can improve and will be working to do so in the future.
smokinjoe 15y ago
Great screencast. Before I saw it, I could hardly spell backbone.js, now I can't wait to start my first project.
websymphony 15y ago
Thanks for the cast, was quite informative. Kudos to you for trying to help others. Just a few suggestions for following casts. 1) Not sure if you are aware of it but there is a framework that you can use for the screencasts, just to make it look bit more professional: http://www.codeschool.com/code_tv/screencasting http://www.codeschool.com/code_tv/screencasting 2) Try give more screen space to code and browser. I personally, will rather have your code and your voice do all the talking. 3) In the beginning maybe have an outline, or list of concepts you are going to cover in the cast. And for future casts topics request :). 1) Can you talk about testing backbone with Jasmine, maybe Sinon too? 2) Design patterns for managing your backbone code or how responsibilities should be shared among collections, models, views? Again thanks a lot for the effort.
- johnohara 15y ago
  websymphony~ Thank you for the codeschool link. joey~ Good job on the screencast. Purchasing a Blue usb microphone (like a snowball or yeti), or its equivalent will improve your work dramatically. They are well worth the $$. You won't go back to the headset. I favor audio scripts (or at least a topic outline) instead of "wingin' it" like Sal Khan. It's more work but makes creating the presentation screens and desktop examples easier. Well done. Not easy.
  - joeybeninghove 15y ago
    Cool, thanks John! You're right, I definitely need to get a better microphone, been looking at the Rode Podcaster a bit, which I've heard is really good. Yeah, I had a basic outline, but my style of screencasting/live coding is usually just to let it flow. I definitely understand that some folks don't like that, but that's just what I'm most comfortable with and enjoy doing the most. Some folks like it, some don't. And I'm fine with that. :) Thanks a ton for the feedback. It's so useful for me to hear stuff like this!
- joeybeninghove 15y ago
  Cool, hadn't seen that framework before. I'll definitely check that out! As for the video, I really like seeing other folks show themselves on video as they code, as I think it makes it a bit more personal. So that's why I like doing it myself for my own screencasts. I tried to make sure the position of the video didn't cover up any key areas of the screen that contained important information. But perhaps I could've done a better job at that. And yes, I actually just gave my 2nd Backbone webinar the other day, which touched on Jasmine testing a little bit, as well as models and collections. You can view that here: http://bit.ly/qIDB2u http://bit.ly/qIDB2u I do plan on doing a few more in this series to dive into some topics a bit deeper. Your suggestions are great ones! Thanks a ton for the feedback, I really do appreciate it!
avparker 15y ago
Thanks for sharing. I'm completely new to backbone and jQuery and I've only recently started learning javascript (I have a C++/Java background, and only tinkered with Rails a few years back). I agree with bilalhusain, the talk does wander a bit, but as a jQuery newbie it was quite useful for me. YMMV. I liked how you built up the use of the framework, gradually adding events, templating, iteration etc. I would like to be able to follow along (doing the same steps myself), but I didn't understand the starting point of your project (is it a sinatra app?). Do you have instructions on how to get setup to that point? A screencast for setup would be great, but even a list of pointers would be helpful. Keep up the good work!
thomasjoulin 15y ago
I just finished to watch ! So far the best introduction to Backbone I've see (I never used it, but seriously considering to). I'm not going to repeat the criticism posted in comment, I agree with most of them, and I look forward to new tutorials from you !

131 points by joeybeninghove 15y ago

horseshoes 15y ago

Hard as hell guitars intro and then cut to a shy mumbling nasally guy, beet face and old lady room taking up half the room on the screen.

joeybeninghove 15y ago
Wow, thanks for the kind words, I think? :)
- rawsyntax 15y ago
  don't sweat it, thanks for the hour long screencast on backbone.. that must've taken some time to put together
  - joeybeninghove 15y ago
    Sure, no problem. Funny thing is that I basically did it all in one take. That's just kinda how I roll. :)
derickbailey 15y ago
wow. you can't even man up and use a non-hidden font color? impressive. plus - i really hope you buy / watch my screencast when it's done... you're REALLY going to hate my voice, and i can't wait to hear what you have to say about it :)
- kylemathews 15y ago
  His font is that color because he was downvoted enough times that the Hacker News software hid his comment.
  - derickbailey 15y ago
    interesting... i hadn't seen that before (not that i'm a total n00b or anything :D )
BasDirks 15y ago
Instaban please.

michaelbuckbee 15y ago

Thanks for taking the time to do the screencast and release it, I always find screencasts are a quick way to get a feel for how a new technology is going to work.

joeybeninghove 15y ago
No problem, thanks for the feedback! I really enjoyed doing it, hopefully more to come! :)

bilalhusain 15y ago

I just went through the presentation. > It covers Backbone Views and little bit of Events. And covers them nicely. Although, I would NOT suggest it to a pro developer (mainly due to 1 hr). > Backbone Model, Collection, Router, Sync etc will be, hopefully, covered in the next rounds. (Somethings will need to be revisited when wiring models etc) > A lot of time the presentations digresses. > Didn't talk about the setup - how haml, backbone is integrated; though I agree that it shouldn't be focus when starting. > Thanks to the video, I learnt a couple of things - views can be passed tagName..., params.name, haml each block > Finally, I'll add that Backbone looks even more cleaner in coffeescript (errors due to missing comma? no more a problem!) And jotted down comment after each 10 minutes into the presentation. > 10 minutes: not really backbone (jquery, javascript gotcha mostly) - admitted at minute 11 > 20 minutes: nice smooth sailing - el, tagName > 30 minutes: learnt a few things new things! but a bit slow for me :( > 40 minutes: mostly jquery/inheritence, next minutes are going to be about jquery templates > 50 minutes: focus lost in favour of templates, haml (but probably better for web-developer learning it) Teaching and motivating is a tough thing. Keep up the good work, waiting for the next part.

joeybeninghove 15y ago
Awesome feedback, thanks a ton for that! I definitely know there are areas where I can improve and will be working to do so in the future.

smokinjoe 15y ago

Great screencast. Before I saw it, I could hardly spell backbone.js, now I can't wait to start my first project.

websymphony 15y ago

Thanks for the cast, was quite informative. Kudos to you for trying to help others. Just a few suggestions for following casts. 1) Not sure if you are aware of it but there is a framework that you can use for the screencasts, just to make it look bit more professional: http://www.codeschool.com/code_tv/screencasting http://www.codeschool.com/code_tv/screencasting 2) Try give more screen space to code and browser. I personally, will rather have your code and your voice do all the talking. 3) In the beginning maybe have an outline, or list of concepts you are going to cover in the cast. And for future casts topics request :). 1) Can you talk about testing backbone with Jasmine, maybe Sinon too? 2) Design patterns for managing your backbone code or how responsibilities should be shared among collections, models, views? Again thanks a lot for the effort.

johnohara 15y ago
websymphony~ Thank you for the codeschool link. joey~ Good job on the screencast. Purchasing a Blue usb microphone (like a snowball or yeti), or its equivalent will improve your work dramatically. They are well worth the $$. You won't go back to the headset. I favor audio scripts (or at least a topic outline) instead of "wingin' it" like Sal Khan. It's more work but makes creating the presentation screens and desktop examples easier. Well done. Not easy.
- joeybeninghove 15y ago
  Cool, thanks John! You're right, I definitely need to get a better microphone, been looking at the Rode Podcaster a bit, which I've heard is really good. Yeah, I had a basic outline, but my style of screencasting/live coding is usually just to let it flow. I definitely understand that some folks don't like that, but that's just what I'm most comfortable with and enjoy doing the most. Some folks like it, some don't. And I'm fine with that. :) Thanks a ton for the feedback. It's so useful for me to hear stuff like this!
joeybeninghove 15y ago
Cool, hadn't seen that framework before. I'll definitely check that out! As for the video, I really like seeing other folks show themselves on video as they code, as I think it makes it a bit more personal. So that's why I like doing it myself for my own screencasts. I tried to make sure the position of the video didn't cover up any key areas of the screen that contained important information. But perhaps I could've done a better job at that. And yes, I actually just gave my 2nd Backbone webinar the other day, which touched on Jasmine testing a little bit, as well as models and collections. You can view that here: http://bit.ly/qIDB2u http://bit.ly/qIDB2u I do plan on doing a few more in this series to dive into some topics a bit deeper. Your suggestions are great ones! Thanks a ton for the feedback, I really do appreciate it!

avparker 15y ago

Thanks for sharing. I'm completely new to backbone and jQuery and I've only recently started learning javascript (I have a C++/Java background, and only tinkered with Rails a few years back). I agree with bilalhusain, the talk does wander a bit, but as a jQuery newbie it was quite useful for me. YMMV. I liked how you built up the use of the framework, gradually adding events, templating, iteration etc. I would like to be able to follow along (doing the same steps myself), but I didn't understand the starting point of your project (is it a sinatra app?). Do you have instructions on how to get setup to that point? A screencast for setup would be great, but even a list of pointers would be helpful. Keep up the good work!

thomasjoulin 15y ago

I just finished to watch ! So far the best introduction to Backbone I've see (I never used it, but seriously considering to). I'm not going to repeat the criticism posted in comment, I agree with most of them, and I look forward to new tutorials from you !