Sproutcore vs jQuery +backbone.js

To throw my hat in the ring (full disclosure, I work on Backbone.js):<p>Unless you're a really fastidious coder, <i>some</i> 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.<p>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.<p>For almost any other application, I'd recommend giving Backbone.js a try.<p>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.<p>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.<p>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:<p>SproutCore Todos: 2.675 MB Uncompressed, onLoad in 1470 milliseconds (loading from localhost). <a href="http://cl.ly/45gI" rel="nofollow">http://cl.ly/45gI</a><p>Backbone Todos: 265k Uncompressed (160 of which is jQuery), onLoad in 202 milliseconds (loading from github). <a href="http://cl.ly/4626" rel="nofollow">http://cl.ly/4626</a><p>... I think that, along with the difference in design, speaks enough for itself.

I'm currently using Backbone.js + JQuery in my startup and my decision came down to the following conclusions:<p>Use Sproutcore or Cappucino if you are trying to emulate a native desktop app and where long load times are acceptable (i.e. the user sacrifices time to load everything to not have to wait much if at all after the initial loading). Also use these two environments when your users are Apple Users.<p>Use Backbone.js + JQuery in a small startup environment with a lean team where the front-end devs are multitalented (i.e. they can easily move between html/css and javascript)<p>Use a MVVM framework with bigger teams () and with teams where your front-end guys may be good with html/css and graphic design but have limited or non-existent stills when it comes to programming intermediate to advanced javascript and handling mildly to very complex programming concepts.<p>MVVM has value and I believe it was invented to solve a common communication/coordination problem in corporate-style environments and especially with "silo"-ed teams and matrix management. However, the way I see it will slow down a good front-end developer. MVC is much more powerful and flexible in the hands of a good dev. MVVM just adds another layer of abstraction so the pure HTML/CSS and graphic design guys don't have to get their hands dirty with real programming.<p>If you are going the Sproutcore/Cappucino route, you really are commiting yourself to a platform and certain ways of doing things from a user interaction perspective. You will gain a lot in not having to build some basic, common interfaces, but you will lose when you need to invent and create your own custom interfaces.<p>Summary:<p>Backbone.js + JQuery = Flexible, powerful, lean - Good for experienced devs<p>Knockout.js = Less powerful, simple = Overcomes coordination and cooperation issues in teams where "the left hand doesn't know what the right hand is doing"<p>Cappucino/Sproutcore = Complex apps built fast, inflexibility in interface design patterns. Good for "native-style" apps.<p>Anyways, those are my opinions. I encourage you to challenge me on anything you don't agree with as my experience with Sproutcore/Cappucino is limited to just research and I only built one small app with Knockout.js.

Backbone.js is easily one of the finest products I have had the pleasure of using. There is a small learning curve but after that, it's butter. The best part, imo, is that more than teaching you to use some foreign dsl, using backbone.js makes you just better as pojs because it teaches modularity, sane callbacks, and a whole mess of other stuff. jashkenas and the other guys behind backbone did a really good job at making a tool that felt like native javascript.

I obviously* like Backbone.js+jQuery, although colleagues are using Sproutcore on a "Rich Internet Application." I'm a big fan of applications that use the web model, so now that Backbone.js has added Controllers and History for route support, I give it five out of five stars.<p>* <a href="http://github.com/unspace/faux" rel="nofollow">http://github.com/unspace/faux</a>

Sproutcore is like a full UI widget toolkit -- analogous to extJS or GWT or java swing in the java desktop world. I am sure you could accomplish a lot very fast with Sproutcore.<p>However, I chose jQuery +backbone.js because I am comfortable with the MVC paradigm and I have a lot of experience with Struts.<p>For my current project, I am using java Wicket framework for pages crawlable by search engine while using jQuery +backbone.js for pages that require authentication and have a rich user interface.Even though GWT or SprountCore come with a lot of ready made widgets , the JQuery ecosystem is simply unmatched in terms of widgets available -- with the caveat that you would need to spend some time to get to learn them.<p>What I miss most in Jquery + backbone.js combo is unit tests and test runners integrated into my build system. If anyone knows how to integrate unit testing of backbone.js based mvc code into ant or maven or any other build system, please post here.

The question is are you trying to build a desktop class application or not. If not jquery/backbone is the obvious solution.<p>If a tablview is particularly interesting to you Cappuccino (<a href="http://cappuccino.org" rel="nofollow">http://cappuccino.org</a>) has simply the best tableview out there.<p>This is what it was like several months ago, and it has only gotten better. <a href="http://timetableapp.com/TestingEnviro/imdbdemo/" rel="nofollow">http://timetableapp.com/TestingEnviro/imdbdemo/</a><p>It's fully customizable too, supporting any kind view you want to put in it, and will remain very snappy.<p><a href="http://githubissues.heroku.com" rel="nofollow">http://githubissues.heroku.com</a> for example shows of some of this flexibility and performance in a real world app.

The main issue I have with sproutcore is that you build the UI in javascript, completely ignoring markup, which feels like a huge regression in layout managment. While this does have performance advantages and Yehuda Katz has promised that they are working on a way for developers to manipulate markup directly thats not how its built to be used currently.

Wouldn't you think that <a href="http://dojotoolkit.org/" rel="nofollow">http://dojotoolkit.org/</a> might be a good alternative?