6 ms·
Hello Backbone.js - A step-by-step tutorial
- arturadib 15y agoFeedback and contributions are always welcome. Feel free to fork it and send pull requests.
- hswolff 15y agoVery cool work. Would have been great to read when I was starting out with Backbone. One question: there's only 5 steps created thus far, correct?
- chriserin 15y agovery nice. I'd like to see some use of underscore templates to replace some of the jQuery append/html rendering techniques. Also, routing would be cool. (nitpik: In your swap method there is a variable swaped, should prob instead be swapped)
- arturadib 15y agoDoh! Thanks, swapped now fixed :)
- deleted 15y ago[deleted]
- justicefries 15y agoI would've liked to have seen this been test driven - I think that's what a lot of people don't necessarily make the connection on with Backbone, and how that affects logic and view separation. Otherwise, nice.
- deleted 15y ago[deleted]
- oscilloscope 15y agoThis is exactly what it feels like to build Backbone interfaces! Definitely would give someone a leg up learning for the first time, compared to the Todos app. Plus it doesn't have anti-patterns like `this.model.view = this`, a line which Yehuda Katz actually mocked at a recent SproutCore meetup.
- jashkenas 15y agoOut of curiosity, what did Mr. Katz say about setting a reference from the model to the view at the meetup?
- oscilloscope 15y agoHe had led in to a section on "Other MVC Frameworks". Then a single slide with some code along these lines: Todo = OtherMVC.Model.extend({ clear: function() { this.view.remove(); } }); TodoView = OtherMVC.View.extend({ initialize: function() { this.model.view = this; } }); Basically he ragged on that for breaking MVC, and never mentioned Backbone by name. I spoke to him afterwards, and he seemed pretty set against Backbone. He considers manually bubbling events to be tedious: "not the happy path". I've been inspired by Morphic recently, where models having knowledge of their views makes sense. When I was a beginner though, I was briefly puzzled by how to connect multiple views to a model and vice versa: I first tried to extend the pattern above before binding to model events.
- tialys 15y agoAs someone who's just getting started with Backbone, I'd be very interested to see that talk, and here suggestions for what to do instead of 'this.model.view = this'.
- theitgirl 15y agoAwesome tutorial. I have been experimenting with Backbone for a few weeks now. I did not understand the point of _.bindAll(this, ..) in initialize till now :) It would help if the sections of code that you add in each step were highlighted somehow. I definitely like the step-by-step approach.
- arturadib 15y agoCool thanks. I'm not sure docco, the document generator I'm using, allows that type of highlighting. (anyone?) But to some extent the comments on the left already point out new sections of code - only new material gets those comments.
- lapusta 15y agoDo we really need to get all methods with 'this' bindAll'ed? I'm using it only for methods who get callbacked.
- Precambria 15y agoI built http://www.facebook.com/nikerunning?sk=app_151033471623290 http://www.facebook.com/nikerunning?sk=app_151033471623290 with Backbone.js. Still trying to get my head around underscore and controllers.
- huetsch 15y agoThis is my first exposure to Backbone (aside from hearing DHH recommend it at RailsConf). It looks like it helps formalize a lot of what I'd already come to realize was a good way of doing large JS apps - MVC design. However, I've found one of the most painful things I have to do when doing a lot of JS is dealing with HTML as a string. Escaping quotes is a pain in the neck, syntax highlighting is broken in my editors. The HTML here is pretty simple so it's not problematic, but sometimes you need to render larger, more complex blocks of HTML. HTML is just not as easy to work with in JS when you compare it to the templating systems provided by Rails, Pylons, etc. Does Backbone have anything to help this?
- yesbabyyes 15y agoBackbone itself doesn't have template support, but there are loads of libraries for that. There is a list in this performance rundown: http://jsperf.com/dom-vs-innerhtml-based-templating/160 http://jsperf.com/dom-vs-innerhtml-based-templating/160 Another path is "anti templates" like http://beebole.com/pure/ http://beebole.com/pure/ or https://github.com/hij1nx/weld https://github.com/hij1nx/weld
- knowtheory 15y agoYeah but if you look at the structure of this, it's just using jQuery's abilities to append stuff. You could just as easily build a node structure using document.createElement and append an actual DOM node to the body, if you're concerned about mistyping raw HTML.
- Pewpewarrows 15y agoNot Backbone itself, but its dependency written by the same (awesome) developers: Underscore.js. Underscore has functions to help you with client-side templating. It basically boils down to you writing html as you normally would within a script tag, like so: <script id="foobar" type="text/html"> <ul> <li><%= test %></li> </ul> </script> Because it's in a script tag, the browser doesn't render that snippet of a template on its own. And since the type is text/html, the browser also doesn't try to interpret that as javascript. Now all you have to do is select the id of the script tag using your favorite library (like jQuery) or with getElementById, get the innerHtml as a string, and pass it to Underscore's template function along with a dictionary of values that you want replaced (such as test above). Like Django or Rails templates, you also can do some basic logic within the template, like looping over an array to make a list of items. If Underscore's syntax isn't your cup of tea, there's a slew of other libraries available, like Mustache or jQuery's own tmpl module. You'll never go back to building the DOM yourself or dozens of concatenated strings of html again!
- lapusta 15y agoThere is a shortcut for finding items in current view: "$('ul', this.el)" - this.$('ul')
- ryeguy 15y agoDon't forget about spine.js: http://maccman.github.com/spine/ http://maccman.github.com/spine/ It's essentially a fixed version of Backbone. It gets rid of the psuedo getters (you can do model.attribute instead of model.{set|get}('attribute')). It gets rid of "collections", and just adds them as class methods on the model. It just makes more sense. It's getting a bigger following, and I hope it can reach the mass of backbone someday.
- awj 15y agoI wouldn't call it a "fixed" version of Backbone. It changes some things I'm not overly concerned about (getters) and replaces collections with something that at first glance appears less useful. I like collections, they give me a good place to put any logic and state involved with groups of models. If need be I can have multiple collections dealing with the same model class, each with whatever varied behavior needs supporting. In spine it looks like I get to manage all of that myself, which appears to be a trade of versatility for simplicity. Not trying to knock Spine, I just don't like it when "oh it's a fixed X" is used to mean "it's a version of X that does things the way I like". There are a lot of actually broken projects out there, Backbone is not one of them.
- maccman 15y agoYes, I would say that if want to emulate what you're doing with Collections in Spine, it's just a case of subclassing the model. This makes more sense imho, and may lead to even further code re-use.
- jashkenas 15y ago@awj has this right. I very much appreciate projects like Spine and wish it great success, but it's an alternative, not a fixed version of the same thing. Pseudo-setters exist in Backbone for a very good reason: change events, and Collections are (IMO) more than 50% of the entire usefulness of Backbone in the first place. The point is that you have solid aggregation and analysis functions to base your model manipulations on: map, reduce, filter, find, every, some, etc etc.
- edw 15y agoThis tutorial fails one of the basic tests of a good introduction as put forth by the recent article in Dr Dobb's (http://news.ycombinator.com/item?id=2607303 http://news.ycombinator.com/item?id=2607303): it provides no motivation. What is Backbone.js good for? A basic tutorial might want to explain _why_ I should take the time to engage with it.
- arturadib 15y agoHey thanks for the constructive feedback. The Backbone project page already does a good job of describing the motivation behind it. From the front-page of the tutorial: "[This tutorial] was designed to provide a smoother transition from zero to the popular Todos example [provided in the Backbone website]." Also, it's on Github for free - contributions are welcome!
- edw 15y agoI went to the project home page and found the first paragraph in the intro section to be the most concise statement of the problem Backbone.js is trying to solve, but even that states the case for the project's existence in negative terms: it helps you avoid a problem. But that problem comes up when you're trying to accomplish something, and it would be better to say that Backbone.js is an awesome way to insert MVC stuff here.
- rictic 15y agoMy guess is that I'm close very close to your ideal intended reader. I'm a javascript programmer looking for better ways to handle and persist state in my apps. I think you might be dismissing the above criticism too quickly. Arriving at the page there wasn't much that told me what problems Backbone would solve or what features it offered. It was also rather difficult to actually get to a working version of the Todos demo (it's not linked from the annotated source or the step by step tutorial, as far as I can tell). In the same way that there's a bolded summary of the idea being expressed at the start of each page of the tutorial, I think a similar summary of Backbone at the beginning of the tutorial would be helpful.
- 15y ago
- samdelagarza 15y agoThis is a nice tutorial, thanks @arturadib. btw, backbone.js has an unofficial google group at: http://groups.google.com/group/backbonejs http://groups.google.com/group/backbonejs
- thomasdavis 15y agoI don't even know whats happening. http://backbonetutorials.com http://backbonetutorials.com
- p0larboy 15y agoGood job arturadib... Most programmers(or rather lesser programmer like me) tend to walk away from teaching once they had grasped the new lanaguage.. I managed to struggled through Backbone for the last few days and I'm beginning to see the light of it.. Will try to come up with a tutorial if I find the time!
- sujithrs 15y agoNice tutorial! I see few people asking about templates with backbone. I have been there few days back and have ported the TODO app to run on Rails 3.1 with view templates (using coffeescript ofcourse!) https://github.com/sujithrs/todo https://github.com/sujithrs/todo Enjoy!
- JGuo 15y agoI had made plans to learn backbone.js today. I checked out HN this morning and voila there's a fresh tutorial posted :) Thanks so much!
- lamnk 15y agoI'm learning Javascript and wish there are some Javascript tutorials like this somewhere :(