SitePoint Podcast #145: Backbone.js Fundamentals with Addy OsmaniBy Louis Simoneau
Listen in Your Browser
Play this episode directly in your browser — just click the orange “play” button below:
Download this Episode
You can download this episode as a standalone MP3 file. Here’s the link:
- SitePoint Podcast #145: Bachbone.js Fundamentals with Addy Osmani (MP3, 34:16, 32.9MB)
Subscribe to the Podcast
Louis chats to Addy Osmani (@addyosmani) about backbone.js.
Browse the full list of links referenced in the show at http://delicious.com/sitepointpodcast/145.
Addy: Hi, it’s nice to be on your show.
Louis: It’s great to have you. So, the reason that prompted me to reach out to you and try and get you to come on the show is you’ve recently put out sort of a free in-progress book about Backbone.js, is that right?
Addy: Yeah, that’s right.
Louis: So, before we dive into talking about the book and what prompted you to do this sort of project, I’d like to maybe give the listeners some background on Backbone. So do you want to explain a little bit about what Backbone.js is and what problem does it try and solve, and why would people want to use it.
Louis: Right. Maybe you can make this a little bit more concrete in my mind and the listener’s mind. What’s a simple example of sort of a front end application that could benefit from this kind of framework?
Addy: Anything that I would consider non-trivial. So let’s say we’ve got a simple photo gallery application which would be something that perhaps isn’t using a single app paradigm, you’re going to be having people refresh their page every single time they’re interacting with something. So, if I click on a thumbnail to view a larger version of a picture I might be going to a completely different page, that might mean I’m making more http requests, I’m having to have the user wait even longer for things to load up, and in a single page application paradigm, which is what frameworks like Backbone tend to help people do, it means fewer clicks to get things working, it means how snappy the interface is, but in terms of organizing your code it means that I can cleanly break apart the various components that make up that application. So, it’s clear to me, well, what is the concept of a photo in that application? Well, I can use models to model the data around that and say okay, well, a photo might have a caption, a photo might have an image source, it might have some additional meta data, okay well that’s the concept of the model. The collection, which is something we have in Backbone, probably represents a number of different models, so that means that if I have a gallery I’m going to have multiple models, i.e. multiple photos, in that particular gallery. And my views might essentially mean okay, well, what is that I’m actually rendering to the end user, am I taking them from an index page that might just say what the application does, and taking something that might actually let them traverse and browse through different image collections, for example, routing there is perhaps going to be used for actually taking them from one page to another and giving them URLs, clean URLs if you are using HTML5 PushState for just using the hashtags to actually navigate around the application without having to make them sort of refresh the page at all.
Addy: So that’s one example.
Louis: Right. So in that case you’re — sort of your photo model would be substantiated based on sort of, say, if I load a new page I get some JSON back from the server and that contains an object representation of these photos in the gallery, and rather than just sort of haphazardly iterating them over them in inline jQuery I’m cleanly bundling them up into a model object which would then be easier to use in other places in the application.
Louis: And it behaves a bit more like a server side application, or like we’re used to developing in object oriented code.
Louis: So it can have a bit of a learning curve to it, and I guess this is where the idea of doing this book comes in, right?
Louis: Right. And the other thing obviously that’s really interesting about this book, above and beyond it being a book about Backbone, is that you’ve done it sort of for free online in a sort of collaborative fashion, because it’s all on GitHub, and I assume you’re accepting contributions from different people, and it’s still very much in a development stage, it’s still incomplete, but I had a read through the Basic section, and in terms of getting you up and running it definitely has all the basics, but there’s, I assume, a lot of work to come.
Addy: Yeah, yeah, there’s a lot of work to come. So when I first released the book, I think about two weeks ago, I started a wish list that developers could go into and add requests for topics they’d like covered, so if a developer wants anything written about in the book, or they want me to consider writing a chapter about something, all they have to do is just submit an idea, I’ll talk to some other developers about it and see what they think, and if we think it’s a good idea I’ll write a chapter about it. Just going on some of the items on the wish list right now there are people that want me to sort of address using different test stacks Backbone, you know, people want to know how to unit test Backbone using solutions like Queue Unit, they want to learn how to build mobile applications with it, so there’s a lot of work still left to go, but I’m excited about it, I think we have an excellent opportunity to sort of build something that is very open, will hopefully be very authoritative and will help some people on their journey through Backbone.
Louis: Yeah, absolutely. And this kind of free online book has been maybe not a super common pattern in the industry, but it’s definitely something that’s happened before, and there have been some really great examples; I mean both of Mark Pilgrim’s books on Python and HTML5 are these huge resources that are extremely useful for those topics, and I think help those topics get a lot more interest from the community than they might otherwise have gotten.
Addy: Oh, absolutely. I think one of the reasons I wanted to release this book for free is I believe that educational material should be free and accessible where possible. I think that authors who write are totally within their rights published contents and ask for something back, people need to make a living, but when you open source your content it just means that more people are going to be able to read it, share it, spread the word about it, and, I don’t know, I think it’s a nice way to go about putting educational material out there.
Louis: Yeah, especially for something like Backbone where it’s not very mainstream at the moment, so if you were to publish a book, a conventional book, you wouldn’t expect to sell a lot of them, but having it for free can build a lot of momentum behind this because it makes it easier for people to learn it.
Louis: Yeah, absolutely. And so did you find yourself at any point struggling to implement the same feature set across all of these different frameworks?
Addy: Oh, absolutely. I think it’s very difficult to I guess be a master of all frameworks, it’s extremely difficult because of varying feature sets and the syntax that’s involved, and so the community’s been extremely helpful here. Anytime there was an application which I didn’t feel that I could implement personally I tried reaching out on Twitter and on GitHub, and the community has been great, people have come forth and said, you know, I’m going to spend a weekend building this application and if you can help me with the style just to make sure that it’s implemented properly, I’m fine with pushing this to To-Do MVC, and that’s really helped the project sort of grow. At the moment I’m currently working some contributors to get sort of Dojo MVC’s quote in there and other applications, but it just means that whatever experience other developers have with frameworks that I don’t, we can still lend those to the project and hopefully help somebody else out there pick something that will work well for them.
Addy: I think in terms of the amount of code the developer has to write themselves it’s minimal; it’s minimal, the addition is very minimal. You do of course have to include the framework that you’re opting for, so if I’m using Backbone it’s just going to be a few additional kilobytes to my project, if I’m using Spine it’s going to be the same case. But, yeah, it’s minimal in terms of the developer effort requires to turn that code into something a little more structured.
Louis: Yeah, and does that extend to things like the browser’s history and the back button?
Addy: It does; depending on the framework it can actually have a built-in support for managing back button, but yes it does. It also means that if I navigate multiple depths down inside an application it might have multiple views, I can easily use the back button; if the application has been coded correctly I can use the back button to go back exactly to where I was.
Louis: Yep, right. And do you know under the hood if that’s using HTML’s browser history?
Addy: Again, it really does vary depending on the framework that you’re using.
Louis: Yeah, but just talking about Backbone specifically because you’d probably know a bit more about it.
Addy: So in terms of the specific question you’d probably be talking more about Backbone or HTML5 PushState, and in terms of that, yeah, Backbone does support HTML5 PushState, if you want to turn it on you can use it. And the benefit of using PushState is rather people seeing a — sort of a hash or hash fragment in the URL at all, all they’ll see is very clean, very plain URL; the end user, they won’t know that, without sort of inspecting your code, they won’t know that you’re using a single page application, it’ll look like it’s a completely server based application and that like all these paths are actually naturally existing on the server side, but they’re not, so it’s actually quite a beautiful thing because it means that they don’t need to worry about is this weird looking URL actually going to work in other browsers or anything like that. And the beauty of frameworks that do support HTML pushState, in a lot of cases they gracefully degrade back to using hash bang if pushState isn’t supported. So if I try navigating using a pushState URL which doesn’t contain any hash bang, and my application doesn’t necessarily support that, I can use hash bangs instead and still provide users with the ability to bookmark URLs.
Louis: Right. So that was a bit of a diversion of what you were talking about, which is to say that when you’re looking at breaking your application down and taking an application that you’ve written in an unstructured way and trying to make it structured using this, and you were just getting to the point of saying how do you break down the interactions into routes and that sort of thing.
Louis: Definitely. Alright, well, I just want to thank you so much for taking the time to come on the show and hash out all these topics, I think it’s really interesting to get your view on all this. Before we go I’d just like to provide everyone with links to the relevant material, so the book is at github.com/addyosmani/backbone-fundamentals, and do you want to give some links to your Twitter and your website for people to look you up online.
Addy: Absolutely. I’m on Twitter @addyosmani, so that’s a-d-d-y-o-s-m-a-n-i; and that’s the exact same for GitHub, so github.com/addyosmani, and if you’d like to read a little bit more about some of the screencast books and articles that I write, they’re all on addyosmani.com.
Louis: Fantastic, that’s all pretty straightforward. So, again, thanks so much for taking the time to come on the show and talk about this, and I really look forward to seeing how this book develops and how people jump in and contribute to it.
Addy: Absolutely, thank you for having me.
Louis: It’s been a pleasure, thanks.
Addy: Great, thank you.
Louis: And thanks for listening to this week’s episode of the SitePoint Podcast. I’d love to hear what you thought about today’s show, so if you have any thoughts or suggestions just go to Sitepoint.com/podcast and you can leave a comment on today’s episode, you can also get any of our previous episodes to download or subscribe to get the show automatically. You can follow SitePoint on Twitter @sitepointdotcom, that’s sitepoint d-o-t-c-o-m, and you can follow me on Twitter @rssaddict. The show this week was produced by Karn Broad and I’m Louis Simoneau, thanks for listening and bye for now.
Theme music by Mike Mella.
Thanks for listening! Feel free to let us know how we’re doing, or to continue the discussion, using the comments field below.