5 ms·

To throw my hat in the ring (full disclosure, I work on Backbone.js): Unless you're a really fastidious coder, some sort of library to help structure large-sca

To throw my hat in the ring (full disclosure, I work on Backbone.js): Unless you're a really fastidious coder, some sort of library to help structure large-scale JavaScript applications is important -- it's far too easy to degenerate into nested piles of jQuery callbacks, all tied to concrete DOM elements. To that end, choosing any of these options can be a positive step, and I have massive respect for Charles and the Strobe team. If you want to build a desktop-like application, with Apple-esque UI elements, I'd recommend you go with SproutCore: it's got built-in widgets for all that sort of thing. For almost any other application, I'd recommend giving Backbone.js a try. Backbone doesn't assume anything about your UI. You can use the templating engine of your choice, and design your interface yourself. It doesn't tie you down (too much) to a particular data store. We use it with Postgres-backed models, but folks have built apps on MongoDB, CouchDB, and LocalStorage as well. If you're worried about client-side performance, Backbone is much, much lighter -- both in terms of the amount of JS you have to include on the page, as well as how fast you can make your UI. Following SproutCore's suggested KVO patterns is great for most cases, but can bog down performance terribly on pages with many thousands of items. With Backbone it's a bit easier to choose your optimizations: how granular your templates are, and how much of the page you want to re-render at a time. Claims are nothing without examples, and fortunately both SproutCore and Backbone have a "Todo List" for an example application. Loading both apps, and peeking in the Webkit inspector: SproutCore Todos: 2.675 MB Uncompressed, onLoad in 1470 milliseconds (loading from localhost). http://cl.ly/45gI http://cl.ly/45gI Backbone Todos: 265k Uncompressed (160 of which is jQuery), onLoad in 202 milliseconds (loading from github). http://cl.ly/4626 http://cl.ly/4626 ... I think that, along with the difference in design, speaks enough for itself.

liamk 16y ago
The documentation for Backbone looks good and includes examples. Much (all?) of the SproutCore documentation does not include examples, leaving you to rely on their IRC channel for help. At least for me, quality documentation is very important!
- ryankirkman 16y ago
  For good Sproutcore documentation, I found these links helpful: http://guides.sproutcore.com/ http://guides.sproutcore.com/ http://devmt.hku.nl/~sproutcore/doku.php http://devmt.hku.nl/~sproutcore/doku.php
mhd 16y ago
How dependent is backbone on jQuery? I see that the docs mention zepto as an alternative to jQuery for backbone.view, how hard would it be to extend that to other libraries? jQuery sits pretty much at one end of the libraries spectrum, being mostly a DSL about dom manipulation. So if you want a bit more structure by using e.g. YUI or MooTools, would there be any big issues?
- gregwebs 16y ago
  someone forked a MooTools version, so it is doable. Zepto is a lighter-weight jQuery compatible library- so you shouldn't feel as bad about having it as a dependency. It might also be possible to have a stripped build of jQuery.
  - ryankirkman 16y ago
    That would be here: https://github.com/jeromegn/backbone-mootools https://github.com/jeromegn/backbone-mootools
- nzjames 16y ago
  I've got to +1 for YUI3. I started researching the space for building real Javascript applications fully biased on doing it with x and JQuery. But after a bit of research and prototyping I was sold on the quality and coverage of YUI. - It has simplified DOM selectors like JQuery - A solid Base class to extend for everything - A fully extensible widget class/lifecycle - Datatable has just hit beta http://developer.yahoo.com/yui/3/datatable/ http://developer.yahoo.com/yui/3/datatable/
msy 16y ago
The more I've played with Backbone the more I've appreciated it. It makes it incredibly easy to structure application in a really, really easy to read and maintain way. It's easy to dramatically cut down on duplicate code and eliminate callback spagetti in favour of clean event driven structures. Having underscore.js in there as well also allows for much more expressive code than javascript usually allows and takes care of nasties like having to always check whether a property belongs to an object or its prototype when iterating over object literals. Integration with jQuery is seamless and the scoped $ in views cuts down on selector redundancy nicely. Thanks for the awesome library!
gregwebs 16y ago
I would really like to see a comparison between backbone.js and knockout.js I just switched a page over to backbone- it is a lot more sane now- thanks! The page had a table view (dataTables as mentioned in the article), but I didn't want to learn the dataTables API, I just wanted to access my data. I added the tableSorter plugin and uiTableFilter search plugin and I had all the dataTables featues I needed. People are interested in plugins for good reason. I think backbone.js would have a much greater draw if there were re-usable widgets (views/apps/collections). They would probably still be more work to invoke than most frameworks, but would be extremely easy to customize.
- badmash69 16y ago
  I think backbone.js would have a much greater draw if there were re-usable widgets (views/apps/collections). I would beg to differ. The power of backbone.js comes from being agnostic towards widget implementations. People are adapting it to work with all sorts of widgets. There are scores of widgets in jquery ecosystem. Why limit the backbone MVC goodness to only a few widgets ?
  - malandrew 16y ago
    From speaking with jashkenas on IRC, I found out that while it's not immediately obvious, backbone is quite extendable/pluggable by using Backbone.model.extend. I reckon that as Backbone matures and gets closer to 1.0 status, we'll start seeing more people start creating plugins. I'm still just an intermediate javascript developer, but once I get a better handle on backbone.js and javascript, I'm planning on writing an undo/redo plugin based on Backbone.model.extend and the included .previousAttributes() function (unless someone beats me too it, of course). Backbone is quite a bit more abstracted and that is where it gets its power from, but it is also why probably a bit harder to grok when it comes to extending it. I reckon with time and tutorials, we'll see a robust ecosystem develop extending Backbone.js.
pyronicide 16y ago
I've done some interesting applications with Backbone.js over the last 2 months or so (for anyone that uses uTorrent, here's one: http://apps.bittorrent.com/ucast/ucast.btapp http://apps.bittorrent.com/ucast/ucast.btapp all in about 800 lines of code, just unzip the btapp file if you'd like to see the source). After trying other things like SproutCore, Cappuccino or Evently, I'll never go back. I actually ended up being surprised by how backbone changed what I do with javascript. With backbone, you can create views that are really just widgets. For example, if you have a list item, you can create a view specific to that list item. Then, all the events and state for that list item are encapsulated right there. No need to store state in the DOM, you can just fetch it from the model when it happens. This then allows you to bubble events up through the parent views to change the entire page's state. Because of the separation, you really end up having little pieces of javascript that only know about themselves and the whole picture ends up being considerably less fragile and easier to debug. I'm also a big CouchDB fan. Since backbone models are just documents, the integration with CouchDB is very minimal and you get instant serialization of user state (it really is that easy, to pimp one of my projects: https://github.com/pyronicide/backbone.couchdb.js https://github.com/pyronicide/backbone.couchdb.js). There are no server handlers you need to write (hell, don't forget you don't even need to run a web server, Couch'll do that for you!) and you end up with less complexity overall.
- badmash69 16y ago
  Could you share how you implemented unit testing your backbone controllers' javascript code?
  - pyronicide 16y ago
    Right now, I'm just using qunit + sinon.js. I'm not super happy with it (I'd really like to get to the point where all my development is done via. writing unit tests), but so far it works. Honestly, one of the big advantages of backbone is that because of the structure it forces on your code, unit testing is easier. Everything ends up being in a small testable chunk that you can stub out the interfaces for and test (see sinon.js, can't say enough good stuff about that). I've also got a small Backbone.sync implementation that just loads test fixtures and returns data from that, allowing me to have a db to test against that's fake and synchronous. With couchdb, all I have to do is take a DB dump of what I want to test, put it into a file in my test directory and I've got instant fixtures.
d0m 16y ago
I've been using backbone exclusively for my project and I'm not sure anymore if I made the right choice. The "best" thing about backbone is that it forces you to smartly separate your code logic. However, I don't agree with everyone about how lightweight it is. I find myself more and more simply writing the logic/view in different files without using backbone at all. (I do use a lot of underscore thought). The problem is that, for really simple models/view, backbone is way too verbose. And for complicated use, you need to hack backbone hard to make it do what you want. So, in my opinion (and experience with backbone), it really shines for medium use. I wish there was a little library built on top of backbone that make it easier for small/complicated use. I'll give you an example of what I mean: If you have a models that contains other models. At first, I thought that would be builtin, but it is not. So, if you want to do that the backbone way, you really need to hack it so change in inner models propagate to outside models. This behaviour is the kind of thing that a little library could do "for free" on top of backbone. On a last note, I need to say that I don't like that much the backbone documentation. Don't get me wrong, each function is well explained and after reading all of it you get a good grasp of what backbone can do for you. The problem is that you need to read all of it. I much prefere a small tutorial to get you started and help you understand the philosophy of backbone with a high level of models, collections and controllers. And only then, after I started using it, I would read in depth the function I need. It's a little bit like if you wanted to learn python by reading all function in the standard. It takes a lot of time and you might not totally get what python is. It's better to follow a simple tutorial which explain the big lines of python, and then, dig deeper in the function you really want. So, I'm not saying backbone is bad.. in fact, it's probably the best library out there for simple MVC use. I have huge respect for jashkenas and the job is has done.
- raganwald 16y ago
  If you have a models that contains other models. At first, I thought that would be builtin, but it is not. So, if you want to do that the backbone way, you really need to hack it so change in inner models propagate to outside models. Can you expound on this requirement, perhaps give an example? I'm very interested in what you want to accomplish.
  - 16y ago
joegaudet 16y ago
SproutCore Todos: 2.675 MB Uncompressed, onLoad in 1470 milliseconds (loading from localhost). This is not an exactly fair comparison, a lot changes between the developer mode and actual build for deploy mode. Both in terms of performance, and size. Our app (which is much much bigger than the todo app) has a very respectable load time when it production mode while running off localhost.
- dguaraglia 16y ago
  That was the killer for me. I was quite excited about SproutCore, specially after reading in one of the docs (which, apparently, are severely outdated) that "you could bring it down to something around 300kb uncompressed". Heck, even iPhone users can load 100kb compressed data. But then the generated application was always megabytes big, even when compressed. It's still manageable if you have a heavy application, but kind of overkill for what I need.
azrealus 16y ago
We've been using backbone for few of our projects. Here is a prototype we are working on right now: http://whiteboard.couchone.com/whiteboard/_design/whiteboard/index.html http://whiteboard.couchone.com/whiteboard/_design/whiteboard... it sits on top of the couchdb/couchapp. We did spend some time evaluating different options before we started (including SproutCore and JavascriptMVC). The main reason we decided to go with Backbone is that it's so much lighter. You can actually open the source and understand what is going on. You can plug in your own UI and templating engine easily. Backbone basically allows you to glue different elements together via Backbone's model/collection architecture (it's almost like a real backbone connecting different body pieces together :)).

liamk 16y ago

The documentation for Backbone looks good and includes examples. Much (all?) of the SproutCore documentation does not include examples, leaving you to rely on their IRC channel for help. At least for me, quality documentation is very important!

ryankirkman 16y ago
For good Sproutcore documentation, I found these links helpful: http://guides.sproutcore.com/ http://guides.sproutcore.com/ http://devmt.hku.nl/~sproutcore/doku.php http://devmt.hku.nl/~sproutcore/doku.php

mhd 16y ago

How dependent is backbone on jQuery? I see that the docs mention zepto as an alternative to jQuery for backbone.view, how hard would it be to extend that to other libraries? jQuery sits pretty much at one end of the libraries spectrum, being mostly a DSL about dom manipulation. So if you want a bit more structure by using e.g. YUI or MooTools, would there be any big issues?

gregwebs 16y ago
someone forked a MooTools version, so it is doable. Zepto is a lighter-weight jQuery compatible library- so you shouldn't feel as bad about having it as a dependency. It might also be possible to have a stripped build of jQuery.
- ryankirkman 16y ago
  That would be here: https://github.com/jeromegn/backbone-mootools https://github.com/jeromegn/backbone-mootools
nzjames 16y ago
I've got to +1 for YUI3. I started researching the space for building real Javascript applications fully biased on doing it with x and JQuery. But after a bit of research and prototyping I was sold on the quality and coverage of YUI. - It has simplified DOM selectors like JQuery - A solid Base class to extend for everything - A fully extensible widget class/lifecycle - Datatable has just hit beta http://developer.yahoo.com/yui/3/datatable/ http://developer.yahoo.com/yui/3/datatable/

msy 16y ago

The more I've played with Backbone the more I've appreciated it. It makes it incredibly easy to structure application in a really, really easy to read and maintain way. It's easy to dramatically cut down on duplicate code and eliminate callback spagetti in favour of clean event driven structures. Having underscore.js in there as well also allows for much more expressive code than javascript usually allows and takes care of nasties like having to always check whether a property belongs to an object or its prototype when iterating over object literals. Integration with jQuery is seamless and the scoped $ in views cuts down on selector redundancy nicely. Thanks for the awesome library!

gregwebs 16y ago

I would really like to see a comparison between backbone.js and knockout.js I just switched a page over to backbone- it is a lot more sane now- thanks! The page had a table view (dataTables as mentioned in the article), but I didn't want to learn the dataTables API, I just wanted to access my data. I added the tableSorter plugin and uiTableFilter search plugin and I had all the dataTables featues I needed. People are interested in plugins for good reason. I think backbone.js would have a much greater draw if there were re-usable widgets (views/apps/collections). They would probably still be more work to invoke than most frameworks, but would be extremely easy to customize.

badmash69 16y ago
I think backbone.js would have a much greater draw if there were re-usable widgets (views/apps/collections). I would beg to differ. The power of backbone.js comes from being agnostic towards widget implementations. People are adapting it to work with all sorts of widgets. There are scores of widgets in jquery ecosystem. Why limit the backbone MVC goodness to only a few widgets ?
- malandrew 16y ago
  From speaking with jashkenas on IRC, I found out that while it's not immediately obvious, backbone is quite extendable/pluggable by using Backbone.model.extend. I reckon that as Backbone matures and gets closer to 1.0 status, we'll start seeing more people start creating plugins. I'm still just an intermediate javascript developer, but once I get a better handle on backbone.js and javascript, I'm planning on writing an undo/redo plugin based on Backbone.model.extend and the included .previousAttributes() function (unless someone beats me too it, of course). Backbone is quite a bit more abstracted and that is where it gets its power from, but it is also why probably a bit harder to grok when it comes to extending it. I reckon with time and tutorials, we'll see a robust ecosystem develop extending Backbone.js.

pyronicide 16y ago

I've done some interesting applications with Backbone.js over the last 2 months or so (for anyone that uses uTorrent, here's one: http://apps.bittorrent.com/ucast/ucast.btapp http://apps.bittorrent.com/ucast/ucast.btapp all in about 800 lines of code, just unzip the btapp file if you'd like to see the source). After trying other things like SproutCore, Cappuccino or Evently, I'll never go back. I actually ended up being surprised by how backbone changed what I do with javascript. With backbone, you can create views that are really just widgets. For example, if you have a list item, you can create a view specific to that list item. Then, all the events and state for that list item are encapsulated right there. No need to store state in the DOM, you can just fetch it from the model when it happens. This then allows you to bubble events up through the parent views to change the entire page's state. Because of the separation, you really end up having little pieces of javascript that only know about themselves and the whole picture ends up being considerably less fragile and easier to debug. I'm also a big CouchDB fan. Since backbone models are just documents, the integration with CouchDB is very minimal and you get instant serialization of user state (it really is that easy, to pimp one of my projects: https://github.com/pyronicide/backbone.couchdb.js https://github.com/pyronicide/backbone.couchdb.js). There are no server handlers you need to write (hell, don't forget you don't even need to run a web server, Couch'll do that for you!) and you end up with less complexity overall.

badmash69 16y ago
Could you share how you implemented unit testing your backbone controllers' javascript code?
- pyronicide 16y ago
  Right now, I'm just using qunit + sinon.js. I'm not super happy with it (I'd really like to get to the point where all my development is done via. writing unit tests), but so far it works. Honestly, one of the big advantages of backbone is that because of the structure it forces on your code, unit testing is easier. Everything ends up being in a small testable chunk that you can stub out the interfaces for and test (see sinon.js, can't say enough good stuff about that). I've also got a small Backbone.sync implementation that just loads test fixtures and returns data from that, allowing me to have a db to test against that's fake and synchronous. With couchdb, all I have to do is take a DB dump of what I want to test, put it into a file in my test directory and I've got instant fixtures.

d0m 16y ago

I've been using backbone exclusively for my project and I'm not sure anymore if I made the right choice. The "best" thing about backbone is that it forces you to smartly separate your code logic. However, I don't agree with everyone about how lightweight it is. I find myself more and more simply writing the logic/view in different files without using backbone at all. (I do use a lot of underscore thought). The problem is that, for really simple models/view, backbone is way too verbose. And for complicated use, you need to hack backbone hard to make it do what you want. So, in my opinion (and experience with backbone), it really shines for medium use. I wish there was a little library built on top of backbone that make it easier for small/complicated use. I'll give you an example of what I mean: If you have a models that contains other models. At first, I thought that would be builtin, but it is not. So, if you want to do that the backbone way, you really need to hack it so change in inner models propagate to outside models. This behaviour is the kind of thing that a little library could do "for free" on top of backbone. On a last note, I need to say that I don't like that much the backbone documentation. Don't get me wrong, each function is well explained and after reading all of it you get a good grasp of what backbone can do for you. The problem is that you need to read all of it. I much prefere a small tutorial to get you started and help you understand the philosophy of backbone with a high level of models, collections and controllers. And only then, after I started using it, I would read in depth the function I need. It's a little bit like if you wanted to learn python by reading all function in the standard. It takes a lot of time and you might not totally get what python is. It's better to follow a simple tutorial which explain the big lines of python, and then, dig deeper in the function you really want. So, I'm not saying backbone is bad.. in fact, it's probably the best library out there for simple MVC use. I have huge respect for jashkenas and the job is has done.

raganwald 16y ago
If you have a models that contains other models. At first, I thought that would be builtin, but it is not. So, if you want to do that the backbone way, you really need to hack it so change in inner models propagate to outside models. Can you expound on this requirement, perhaps give an example? I'm very interested in what you want to accomplish.
- 16y ago

joegaudet 16y ago

SproutCore Todos: 2.675 MB Uncompressed, onLoad in 1470 milliseconds (loading from localhost). This is not an exactly fair comparison, a lot changes between the developer mode and actual build for deploy mode. Both in terms of performance, and size. Our app (which is much much bigger than the todo app) has a very respectable load time when it production mode while running off localhost.

dguaraglia 16y ago
That was the killer for me. I was quite excited about SproutCore, specially after reading in one of the docs (which, apparently, are severely outdated) that "you could bring it down to something around 300kb uncompressed". Heck, even iPhone users can load 100kb compressed data. But then the generated application was always megabytes big, even when compressed. It's still manageable if you have a heavy application, but kind of overkill for what I need.

azrealus 16y ago

We've been using backbone for few of our projects. Here is a prototype we are working on right now: http://whiteboard.couchone.com/whiteboard/_design/whiteboard/index.html http://whiteboard.couchone.com/whiteboard/_design/whiteboard... it sits on top of the couchdb/couchapp. We did spend some time evaluating different options before we started (including SproutCore and JavascriptMVC). The main reason we decided to go with Backbone is that it's so much lighter. You can actually open the source and understand what is going on. You can plug in your own UI and templating engine easily. Backbone basically allows you to glue different elements together via Backbone's model/collection architecture (it's almost like a real backbone connecting different body pieces together :)).