4 ms·

Backbone.js Tutorial - by noob for noobs

44 points by thomasdavis 16y ago

TimothyBurgess 16y ago
It's a good library in theory... but it could and should be condensed to a fraction of its size. Maybe I'm just being too critical and OCD but I feel like there's too much code for what it actually does. Off topic but... what in the world is up with the lowercase b's, d's, and u's on that site? Haha :)
- thomasdavis 16y ago
  Could I possibly get a screen shot lol I will have to disagree. By condensed do you mean the code could be implemented better? Or do you think there are too many useless methods? Just some things I have noticedl Backbones Controller/History beats most jQuery plugins and generally Backbone.js will still be smaller then the plugins for example jQuery BBQ or Baluptons implementation. The Backbone.sync method forces you to route all ajax calls through one gateway which means you have no code redundancy. Backbone is built to work along side of underscore.js which is also super light weight. Also very fast at manipulating the DOM and includes a default templating system which works great.
  - jashkenas 16y ago
    I think what Timothy is saying is that in order to just add some <li> items to a <ul> tag, there's too much code happening in the tutorial. ... Which is totally true. You only get to the point where something like Backbone would be an advantage when you have rich models with editable state.
    - TimothyBurgess 16y ago
      Along those lines is exactly what I'm saying... in addition to shortening the function names and other small (yet important size-wise) optimizations that would really help out in the long run. If I had the time I'd specifically address each optimization, but I don't. It's cool that my comment is at -1 points. Thanks HN! You make me want to return here more and more every day with your unbiased contributions.
  - alexpeattie 16y ago
    This shows the problem with the b's and d's (also the u's): http://i.min.us/ickmjM.png http://i.min.us/ickmjM.png its just that they descend below the baseline, which looks a bit odd. The effect only appears at the default text zoom (on FF for Windows).
    - Pheter 16y ago
      The same problem occurs in Chrome on Windows.
citricsquid 16y ago
For a community built off of a word that is almost always misunderstood by "normal people" you guys sure do misuse the word noob an awful lot. noob is negative, the word you want is "newb" or "newbie". http://www.urbandictionary.com/define.php?term=noob http://www.urbandictionary.com/define.php?term=noob
- thomasdavis 16y ago
  http://en.wikipedia.org/wiki/Tongue-in-cheek http://en.wikipedia.org/wiki/Tongue-in-cheek
- code_duck 16y ago
  You could think of it like the 'for Dummies' or 'for Total Idiots' series of how-to books. They're for beginners, but of course the title isn't intended to insult the target audience.
emehrkay 16y ago
His model (Friends Collection) is doing view duty. Shouldnt the addFriendLi method be apart of the controller binding the Friend(s) model and AppView view?
- thomasdavis 16y ago
  I looked back at the code and you're right so I patched it up. Thanks! Anyone wanting to see what I was doing wrong can go to the link below https://github.com/thomasdavis/thomasdavis.github.com/blob/8eee72d8811c9f22e79cef5bd3551ed9c3683704/examples/backbone-101/index.html https://github.com/thomasdavis/thomasdavis.github.com/blob/8...
- wfarr 16y ago
  Yeah, that ought to be in the controller or provided in a helper method outside the model.
  - thomasdavis 16y ago
    Backbone Views and standard MVC controllers are synonymous so I placed it in the Backbone View.
    - wfarr 16y ago
      Ah! Thanks for clearing that up. I haven't gotten around to dabbling in Backbone yet.
alexpeattie 16y ago
A very minor suggestion, but I think the last line (var appview = new AppView) is a little bit confusing on first reading - it's not immediately obvious that you're setting the variable to initiate the view... I've seen it written elsewhere like so: window.App = new AppView which I think is a good idiom.
- catshirt 16y ago
  fwiw these are not the same thing in this context. the example doesn't actually declare appview in the window namespace, possibly intentionally. i agree it's a bit unclear though.
  - alexpeattie 16y ago
    Of course you're right, they're not identical, but I don't think there's any practical difference between them here - they both initiate the view; but using the window namespace seems more readable, and is an established idiom. Maybe it is intentional, but I don't think so?
    - bluesmoon 16y ago
      but that would assume a browser, right?
      - catshirt 16y ago
        i think for a backbone view it's a fine assumption. i didn't mean to be nitpicky, just an fyi for anyone reading unaware.
      - alexpeattie 16y ago
        It does, but as catshirt says, that's probably reasonable. Especially as jQuery assumes a browser (and relies on the window namespace) too - so it wouldn't be suitable for a browserless environment anyway...
eferraiuolo 16y ago
I thought it would be interesting to create a comparable example of this mini-app with basic YUI 3 code: http://jsfiddle.net/ericf/wpuCm/ http://jsfiddle.net/ericf/wpuCm/ backbone.js seems like a great library, and MVC is on the YUI 3 roadmap ( http://yuilibrary.com/projects/yui3/roadmap http://yuilibrary.com/projects/yui3/roadmap ), hopefully some of the concepts from backbone get implemented in the YUI’s MVC layer.

44 points by thomasdavis 16y ago

It's a good library in theory... but it could and should be condensed to a fraction of its size. Maybe I'm just being too critical and OCD but I feel like there's too much code for what it actually does. Off topic but... what in the world is up with the lowercase b's, d's, and u's on that site? Haha :)

thomasdavis 16y ago
Could I possibly get a screen shot lol I will have to disagree. By condensed do you mean the code could be implemented better? Or do you think there are too many useless methods? Just some things I have noticedl Backbones Controller/History beats most jQuery plugins and generally Backbone.js will still be smaller then the plugins for example jQuery BBQ or Baluptons implementation. The Backbone.sync method forces you to route all ajax calls through one gateway which means you have no code redundancy. Backbone is built to work along side of underscore.js which is also super light weight. Also very fast at manipulating the DOM and includes a default templating system which works great.
- jashkenas 16y ago
  I think what Timothy is saying is that in order to just add some <li> items to a <ul> tag, there's too much code happening in the tutorial. ... Which is totally true. You only get to the point where something like Backbone would be an advantage when you have rich models with editable state.
  - TimothyBurgess 16y ago
    Along those lines is exactly what I'm saying... in addition to shortening the function names and other small (yet important size-wise) optimizations that would really help out in the long run. If I had the time I'd specifically address each optimization, but I don't. It's cool that my comment is at -1 points. Thanks HN! You make me want to return here more and more every day with your unbiased contributions.
- alexpeattie 16y ago
  This shows the problem with the b's and d's (also the u's): http://i.min.us/ickmjM.png http://i.min.us/ickmjM.png its just that they descend below the baseline, which looks a bit odd. The effect only appears at the default text zoom (on FF for Windows).
  - Pheter 16y ago
    The same problem occurs in Chrome on Windows.

citricsquid 16y ago

For a community built off of a word that is almost always misunderstood by "normal people" you guys sure do misuse the word noob an awful lot. noob is negative, the word you want is "newb" or "newbie". http://www.urbandictionary.com/define.php?term=noob http://www.urbandictionary.com/define.php?term=noob

thomasdavis 16y ago
http://en.wikipedia.org/wiki/Tongue-in-cheek http://en.wikipedia.org/wiki/Tongue-in-cheek
code_duck 16y ago
You could think of it like the 'for Dummies' or 'for Total Idiots' series of how-to books. They're for beginners, but of course the title isn't intended to insult the target audience.

emehrkay 16y ago

His model (Friends Collection) is doing view duty. Shouldnt the addFriendLi method be apart of the controller binding the Friend(s) model and AppView view?

thomasdavis 16y ago
I looked back at the code and you're right so I patched it up. Thanks! Anyone wanting to see what I was doing wrong can go to the link below https://github.com/thomasdavis/thomasdavis.github.com/blob/8eee72d8811c9f22e79cef5bd3551ed9c3683704/examples/backbone-101/index.html https://github.com/thomasdavis/thomasdavis.github.com/blob/8...
wfarr 16y ago
Yeah, that ought to be in the controller or provided in a helper method outside the model.
- thomasdavis 16y ago
  Backbone Views and standard MVC controllers are synonymous so I placed it in the Backbone View.
  - wfarr 16y ago
    Ah! Thanks for clearing that up. I haven't gotten around to dabbling in Backbone yet.

alexpeattie 16y ago

A very minor suggestion, but I think the last line (var appview = new AppView) is a little bit confusing on first reading - it's not immediately obvious that you're setting the variable to initiate the view... I've seen it written elsewhere like so: window.App = new AppView which I think is a good idiom.

catshirt 16y ago
fwiw these are not the same thing in this context. the example doesn't actually declare appview in the window namespace, possibly intentionally. i agree it's a bit unclear though.
- alexpeattie 16y ago
  Of course you're right, they're not identical, but I don't think there's any practical difference between them here - they both initiate the view; but using the window namespace seems more readable, and is an established idiom. Maybe it is intentional, but I don't think so?
  - bluesmoon 16y ago
    but that would assume a browser, right?
    - catshirt 16y ago
      i think for a backbone view it's a fine assumption. i didn't mean to be nitpicky, just an fyi for anyone reading unaware.
    - alexpeattie 16y ago
      It does, but as catshirt says, that's probably reasonable. Especially as jQuery assumes a browser (and relies on the window namespace) too - so it wouldn't be suitable for a browserless environment anyway...

eferraiuolo 16y ago

I thought it would be interesting to create a comparable example of this mini-app with basic YUI 3 code: http://jsfiddle.net/ericf/wpuCm/ http://jsfiddle.net/ericf/wpuCm/ backbone.js seems like a great library, and MVC is on the YUI 3 roadmap ( http://yuilibrary.com/projects/yui3/roadmap http://yuilibrary.com/projects/yui3/roadmap ), hopefully some of the concepts from backbone get implemented in the YUI’s MVC layer.