11 ms·

Backbone.js Fundamentals

287 points by bmaeser 15y ago

thelicx 15y ago
What is the difference between this documentation and http://documentcloud.github.com/backbone http://documentcloud.github.com/backbone ? At first sight they look the same.
- bmaeser 15y ago
  [quote]In this mini-book, I'll be covering a complete run-down of Backbone.js; including models, views, collections and routers. I'll also be taking you through advanced topics like modular development with Backbone.js and AMD (with RequireJS), how to solve the routing problems with Backbone and jQuery Mobile, tips about scaffolding tools that can save time setting up your initial application and more.[/quote]
  - timc3 15y ago
    Excellent, really looking forward to hear how you deal with loading of backbone.js modules and how you organize your code. Would be interesting to know if you precompile your modules..
    - bmaeser 15y ago
      your could use stitch (https://github.com/sstephenson/stitch https://github.com/sstephenson/stitch) or brunch (http://brunch.io/ http://brunch.io/) which uses stitch internally
- ramanujam 15y ago
  This looks more like a quick start condensed guide for someone who has already has a good understanding of JS. The official documentation is more extensive and will take an hour or two to read.
deleted 15y ago
[deleted]
micheljansen 15y ago
This comes at the perfect time. I have just started a project where I am using Backbone for the first time and I have found the documentation to be lacking at best. I think one of the things that Backbone really needs is some opinions on how to organise projects. Coming from Ruby on Rails, I really appreciate how that framework recommends (or forces) you to structure your stuff in a certain way (they even structure how to use Backbone inside a Rails project). Backbone feels more like a loosely connected set of tools (View, Router and Models), without a clearly expressed vision of how to use them together.
- sbarre 15y ago
  You may want to look at EmberJS[1] if you want a more opinionated framework for single-page apps. It's still in development and I'm not sure if all of the components are production-ready but I've also heard (??) you can use it alongside Backbone.js [1] http://emberjs.com/ http://emberjs.com/
  - knowtheory 15y ago
    I would be surprised and confused to see how one would use Ember alongside Backbone. Both Ember and Backbone have separate notions of how models should be handled as well as having separate routing systems. I'm not entirely clear what you'd be mixing and matching.
  - micheljansen 15y ago
    I have been following Ember since it was still SproutCore 2 and I am looking forward to try it out on a hobby project. Looks like they took the good parts of other frameworks as inspiration and left the bad parts of SproutCore behind, but a little too cutting edge to use in a project with real deadlines for now :P
- pdelgallego 15y ago
  You should consider Spine as well. Backbone has concepts of Models, Views and Collections (groups of Models) vs Spine that has concepts of Models and Controllers. Both additionally have client side routes. Spine abstracts away prototypal inheritance a little more regarding "super". Spine has localStorage support natively.
overshard 15y ago
Now this is released... after I spend hours and hours figuring out undocumented stuff myself. Great stuff.
devmach 15y ago
What bugs me about backbone.js : * Lack of documentation. Every time, when i want to do something more than "todo app", i have to read the source code. Well, it's OK and a programmer has to read the source code to understand whats going on under the hood, but a little bit more good documentation can be really helpful. * Examples are so simple. In a read world app it's more complicated. I have model ( persons ) and this model has collections ( contact datas, invoices etc. ) to find a way to handle all the mess i spend a weekend and read useless tutorials. In the end i gave up, read source code and my builded app on events. A better example could save my time and if there was a "best practices" guide, i could be sure that i'm on the right track.
- knowtheory 15y ago
  Is "lack of documentation" what you really mean? Do you mean something more like, needs more howtos and sample apps? 'Cause backbone's got some pretty extensive documentation both in terms of the API (http://backbonejs.org/ http://backbonejs.org/ ), the annotated source itself (http://backbonejs.org/docs/backbone.html http://backbonejs.org/docs/backbone.html ) as well as a big pile of references as well as tutorials here: https://github.com/documentcloud/backbone/wiki/Tutorials%2C-blog-posts-and-example-sites https://github.com/documentcloud/backbone/wiki/Tutorials%2C-...
- jashkenas 15y ago
  There are a lot of not-so-great blog posts and tutorials out there for Backbone, so I'm not entirely surprised to hear that you found them "useless". It would be great to have a more step-by-step in-depth tutorial available on Backbonejs.org, and if I don't get a chance to built one out soon, I'd be glad to merge a branch that adds one. Tutorials aside, is there something more in the way of API documentation you'd like to see, that you aren't finding on Backbonejs.org? Finally, there is a long list of real-world apps available, many of which have viewable source code that you can examine and learn from: http://backbonejs.org/#examples http://backbonejs.org/#examples ... and DocumentCloud.org, the original application from which Backbone was extracted, has all of its JavaScript available on GitHub: https://github.com/documentcloud/documentcloud/tree/master/public/javascripts https://github.com/documentcloud/documentcloud/tree/master/p...
thomasdavis 15y ago
More documentation can be found at http://backbonetutorials.com http://backbonetutorials.com
ColdAsIce 15y ago
Wow this is great. Finally I understand what the whoile point of Backbone.js and client-side mvc frameworks is! Thanks!
wodow 15y ago
I also liked the tutorial http://arturadib.com/hello-backbonejs/ http://arturadib.com/hello-backbonejs/ - very quick to skim through.
micheljansen 15y ago
Some words of caution: it seems like not all the information in this guide is equally recent. For example, it references Controller.saveLocation(), which has been replaced by route.navigate() etc.
aymeric 15y ago
I think someone should make a website that takes the Knockout.js interactive tutorials and use Backbone.js instead. http://learn.knockoutjs.com/ http://learn.knockoutjs.com/
- drewda 15y ago
  Wow, that is a slick tutorial! I'm a complete user of Backbone and wouldn't switch, so I hope the Backbone community can "compete" with this.* * I of course don't mean compete in a negative way... just trying to get at the way open-source projects play off each other in creative ways.
- apsurd 15y ago
  I hope you are monitoring your post asymeric because I would honestly appreciate an answer to a question I have: It seems like jump into coding immediately interactive tutorials are all the rage. But I have always learned more effectively by reading a high-level, conceptual/philosophical overview of how and why something works the way it does. From there it's much easier for me to work through examples. "Oh I get why this is that way". "Oh yeah that makes sense ..." I'm left-handed so perhaps this is just a left vs. right brain discussion. Left handers are minorities but I really think its very important to understand how/why something works from a high-level. What are your thoughts?
  - eddmc 15y ago
    It's horses for courses. I like to get into the coding straight away. If what's happening is not immediately obvious to me, I'll start reading around the area I don't understand until I do understand it. Once I've tried a few set examples out, then I'll start putting my own code together. Inevitably, I'll hit a wall, and search around for an example that solves what I'm having a problem with. And at some point, I'll start reading the high-level, conceptual/philosophical overview. And because I've now got some experience about some of the areas within the code, how everything ties together starts to make some sense. If I had to read the high-level overview first, then I may never find the time to start coding in it!
  - aymeric 15y ago
deleted 15y ago
[deleted]
AbyCodes 15y ago
Getting started with Backbone - How to bring model-view-controller structure to Ajax web applications: http://www.ibm.com/developerworks/library/wa-backbonejs/index.html?cmp=dw&cpb=dwwdv&ct=dwnew&cr=dwnen&ccy=zz&csr=121511 http://www.ibm.com/developerworks/library/wa-backbonejs/inde...

287 points by bmaeser 15y ago

What is the difference between this documentation and http://documentcloud.github.com/backbone http://documentcloud.github.com/backbone ? At first sight they look the same.

bmaeser 15y ago
[quote]In this mini-book, I'll be covering a complete run-down of Backbone.js; including models, views, collections and routers. I'll also be taking you through advanced topics like modular development with Backbone.js and AMD (with RequireJS), how to solve the routing problems with Backbone and jQuery Mobile, tips about scaffolding tools that can save time setting up your initial application and more.[/quote]
- timc3 15y ago
  Excellent, really looking forward to hear how you deal with loading of backbone.js modules and how you organize your code. Would be interesting to know if you precompile your modules..
  - bmaeser 15y ago
    your could use stitch (https://github.com/sstephenson/stitch https://github.com/sstephenson/stitch) or brunch (http://brunch.io/ http://brunch.io/) which uses stitch internally
ramanujam 15y ago
This looks more like a quick start condensed guide for someone who has already has a good understanding of JS. The official documentation is more extensive and will take an hour or two to read.

deleted 15y ago

[deleted]

micheljansen 15y ago

This comes at the perfect time. I have just started a project where I am using Backbone for the first time and I have found the documentation to be lacking at best. I think one of the things that Backbone really needs is some opinions on how to organise projects. Coming from Ruby on Rails, I really appreciate how that framework recommends (or forces) you to structure your stuff in a certain way (they even structure how to use Backbone inside a Rails project). Backbone feels more like a loosely connected set of tools (View, Router and Models), without a clearly expressed vision of how to use them together.

sbarre 15y ago
You may want to look at EmberJS[1] if you want a more opinionated framework for single-page apps. It's still in development and I'm not sure if all of the components are production-ready but I've also heard (??) you can use it alongside Backbone.js [1] http://emberjs.com/ http://emberjs.com/
- knowtheory 15y ago
  I would be surprised and confused to see how one would use Ember alongside Backbone. Both Ember and Backbone have separate notions of how models should be handled as well as having separate routing systems. I'm not entirely clear what you'd be mixing and matching.
- micheljansen 15y ago
  I have been following Ember since it was still SproutCore 2 and I am looking forward to try it out on a hobby project. Looks like they took the good parts of other frameworks as inspiration and left the bad parts of SproutCore behind, but a little too cutting edge to use in a project with real deadlines for now :P
pdelgallego 15y ago
You should consider Spine as well. Backbone has concepts of Models, Views and Collections (groups of Models) vs Spine that has concepts of Models and Controllers. Both additionally have client side routes. Spine abstracts away prototypal inheritance a little more regarding "super". Spine has localStorage support natively.

overshard 15y ago

Now this is released... after I spend hours and hours figuring out undocumented stuff myself. Great stuff.

devmach 15y ago

What bugs me about backbone.js : * Lack of documentation. Every time, when i want to do something more than "todo app", i have to read the source code. Well, it's OK and a programmer has to read the source code to understand whats going on under the hood, but a little bit more good documentation can be really helpful. * Examples are so simple. In a read world app it's more complicated. I have model ( persons ) and this model has collections ( contact datas, invoices etc. ) to find a way to handle all the mess i spend a weekend and read useless tutorials. In the end i gave up, read source code and my builded app on events. A better example could save my time and if there was a "best practices" guide, i could be sure that i'm on the right track.

knowtheory 15y ago
Is "lack of documentation" what you really mean? Do you mean something more like, needs more howtos and sample apps? 'Cause backbone's got some pretty extensive documentation both in terms of the API (http://backbonejs.org/ http://backbonejs.org/ ), the annotated source itself (http://backbonejs.org/docs/backbone.html http://backbonejs.org/docs/backbone.html ) as well as a big pile of references as well as tutorials here: https://github.com/documentcloud/backbone/wiki/Tutorials%2C-blog-posts-and-example-sites https://github.com/documentcloud/backbone/wiki/Tutorials%2C-...
jashkenas 15y ago
There are a lot of not-so-great blog posts and tutorials out there for Backbone, so I'm not entirely surprised to hear that you found them "useless". It would be great to have a more step-by-step in-depth tutorial available on Backbonejs.org, and if I don't get a chance to built one out soon, I'd be glad to merge a branch that adds one. Tutorials aside, is there something more in the way of API documentation you'd like to see, that you aren't finding on Backbonejs.org? Finally, there is a long list of real-world apps available, many of which have viewable source code that you can examine and learn from: http://backbonejs.org/#examples http://backbonejs.org/#examples ... and DocumentCloud.org, the original application from which Backbone was extracted, has all of its JavaScript available on GitHub: https://github.com/documentcloud/documentcloud/tree/master/public/javascripts https://github.com/documentcloud/documentcloud/tree/master/p...

thomasdavis 15y ago

More documentation can be found at http://backbonetutorials.com http://backbonetutorials.com

ColdAsIce 15y ago

Wow this is great. Finally I understand what the whoile point of Backbone.js and client-side mvc frameworks is! Thanks!

wodow 15y ago

I also liked the tutorial http://arturadib.com/hello-backbonejs/ http://arturadib.com/hello-backbonejs/ - very quick to skim through.

micheljansen 15y ago

Some words of caution: it seems like not all the information in this guide is equally recent. For example, it references Controller.saveLocation(), which has been replaced by route.navigate() etc.

aymeric 15y ago

I think someone should make a website that takes the Knockout.js interactive tutorials and use Backbone.js instead. http://learn.knockoutjs.com/ http://learn.knockoutjs.com/

drewda 15y ago
Wow, that is a slick tutorial! I'm a complete user of Backbone and wouldn't switch, so I hope the Backbone community can "compete" with this.* * I of course don't mean compete in a negative way... just trying to get at the way open-source projects play off each other in creative ways.
apsurd 15y ago
I hope you are monitoring your post asymeric because I would honestly appreciate an answer to a question I have: It seems like jump into coding immediately interactive tutorials are all the rage. But I have always learned more effectively by reading a high-level, conceptual/philosophical overview of how and why something works the way it does. From there it's much easier for me to work through examples. "Oh I get why this is that way". "Oh yeah that makes sense ..." I'm left-handed so perhaps this is just a left vs. right brain discussion. Left handers are minorities but I really think its very important to understand how/why something works from a high-level. What are your thoughts?
- eddmc 15y ago
  It's horses for courses. I like to get into the coding straight away. If what's happening is not immediately obvious to me, I'll start reading around the area I don't understand until I do understand it. Once I've tried a few set examples out, then I'll start putting my own code together. Inevitably, I'll hit a wall, and search around for an example that solves what I'm having a problem with. And at some point, I'll start reading the high-level, conceptual/philosophical overview. And because I've now got some experience about some of the areas within the code, how everything ties together starts to make some sense. If I had to read the high-level overview first, then I may never find the time to start coding in it!
- aymeric 15y ago

deleted 15y ago

[deleted]

AbyCodes 15y ago

Getting started with Backbone - How to bring model-view-controller structure to Ajax web applications: http://www.ibm.com/developerworks/library/wa-backbonejs/index.html?cmp=dw&cpb=dwwdv&ct=dwnew&cr=dwnen&ccy=zz&csr=121511 http://www.ibm.com/developerworks/library/wa-backbonejs/inde...