7 ms·

Sproutcore vs jQuery +backbone.js

108 points by thomasdavis 16y ago

Me1000 16y ago
The question is are you trying to build a desktop class application or not. If not jquery/backbone is the obvious solution. If a tablview is particularly interesting to you Cappuccino (http://cappuccino.org http://cappuccino.org) has simply the best tableview out there. This is what it was like several months ago, and it has only gotten better. http://timetableapp.com/TestingEnviro/imdbdemo/ http://timetableapp.com/TestingEnviro/imdbdemo/ It's fully customizable too, supporting any kind view you want to put in it, and will remain very snappy. http://githubissues.heroku.com http://githubissues.heroku.com for example shows of some of this flexibility and performance in a real world app.
- clyfe 16y ago
  In terms of tableview, I find slickgrid a powertool. https://github.com/mleibman/SlickGrid https://github.com/mleibman/SlickGrid
  - kaylarose 16y ago
    SlickGrid is excellent. I didn't like how coupled everything seemed (model, Pagination, etc) [as of 6 months ago, so it may have changed]. I ended up rolling my own remote model, editors, and pagination stuff, but it ended working like a dream. By far the best tableview I've used in a project. Cappuccino's widgets UI is gorgeous though.
  - Me1000 16y ago
    This best thing about cappuccino's tableview is that it can be use everywhere... For example reimplementing tweetie's tweet list (more on that in a week or so). It doesn't traditionally look like a table, but it is. It's incredibly flexibly and is used ALL OVER apps in Cocoa. Cappuccino has an amazing tableview, I don't think that can be said for other desktop class browser app frameworks.
badmash69 16y ago
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. However, I chose jQuery +backbone.js because I am comfortable with the MVC paradigm and I have a lot of experience with Struts. 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. 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.
- clyfe 16y ago
  javascriptmvc has a command-line-able testing: http://www.javascriptmvc.com/docs.html#&who=FuncUnit http://www.javascriptmvc.com/docs.html#&who=FuncUnit This video explains it in the second half: http://cdn.javascriptmvc.com/videos/2_0/2_0_demo.htm http://cdn.javascriptmvc.com/videos/2_0/2_0_demo.htm
  - badmash69 16y ago
    JavascriptMVC's unit testing is definitely a big advantage over backbone. But backbone.js integrates well with my project structure ; I am under the impression ( and I could be very well wrong about this) is that JavascriptMVC requires its own project structure and it has its own code generator of some sort. It seems that javascriptmvc is geared for huge applications whereas backbone.js is suited for single page apps. If I am wrong, do please let me know.
jashkenas 16y ago
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
johnbender 16y ago
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.
- amadiver 16y ago
  Could you expand on why you feel like building a UI in JS is a regression? Is this a popular sentiment? I really prefer working on layouts without manipulating markup, so I'm curious to why others feel different. Thanks!
  - johnbender 16y ago
    HTML was designed with presentation semantics in mind (eg layout) and using Javascript to do the job HTML was designed seems like a waste. Hope that answers your question.
    - malandrew 16y ago
      I completely agree with this sentiment, however I think that templating systems such as JResign's microtemplates or Mustache.js go a long way to helping us avoid the problems associated with using JS to construct views. All my views are saved as HTML templates with ERB-like syntax for populating the views with dynamic data received via JSON.
    - amadiver 16y ago
      Thank you -- it does. If it's not too much trouble, do you have any examples or anecdotes for when HTML made layout really easy, or scripting made layout really hard? In my experience, there's a sweet spot for HTML/CSS. If I keep things really simple, it makes layouts a breeze. The moment I introduce complexity into the design, I usually wish I had the control of a scripted layout.
- deleted 16y ago
  [deleted]
esmooov 16y ago
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.
- jashkenas 16y ago
  A lot of the credit for the ideas behind backbone should properly go to Robert Kieffer (https://github.com/broofa https://github.com/broofa), an old hand at building JS apps.
ak1394 16y ago
Wouldn't you think that http://dojotoolkit.org/ http://dojotoolkit.org/ might be a good alternative?
malandrew 16y ago
I'm currently using Backbone.js + JQuery in my startup and my decision came down to the following conclusions: 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. 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) 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. 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. 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. Summary: Backbone.js + JQuery = Flexible, powerful, lean - Good for experienced devs 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" Cappucino/Sproutcore = Complex apps built fast, inflexibility in interface design patterns. Good for "native-style" apps. 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.
- aaronblohowiak 16y ago
  I think your analysis of Knockout.js is incomplete. You can customize any of the interactions and bindings, and it supports an entire reactive programming model (automatic re-execution of functions) that Backbone does not. Especially with the newer Knockout extensions that turn fromJSON into a full-fledged updateable model, Knockout competes well feature-wise with Backbone, it just has a very different flow-of-control paradigm.
raganwald 16y ago
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. * http://github.com/unspace/faux http://github.com/unspace/faux

108 points by thomasdavis 16y ago

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

clyfe 16y ago
In terms of tableview, I find slickgrid a powertool. https://github.com/mleibman/SlickGrid https://github.com/mleibman/SlickGrid
- kaylarose 16y ago
  SlickGrid is excellent. I didn't like how coupled everything seemed (model, Pagination, etc) [as of 6 months ago, so it may have changed]. I ended up rolling my own remote model, editors, and pagination stuff, but it ended working like a dream. By far the best tableview I've used in a project. Cappuccino's widgets UI is gorgeous though.
- Me1000 16y ago
  This best thing about cappuccino's tableview is that it can be use everywhere... For example reimplementing tweetie's tweet list (more on that in a week or so). It doesn't traditionally look like a table, but it is. It's incredibly flexibly and is used ALL OVER apps in Cocoa. Cappuccino has an amazing tableview, I don't think that can be said for other desktop class browser app frameworks.

badmash69 16y ago

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. However, I chose jQuery +backbone.js because I am comfortable with the MVC paradigm and I have a lot of experience with Struts. 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. 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.

clyfe 16y ago
javascriptmvc has a command-line-able testing: http://www.javascriptmvc.com/docs.html#&who=FuncUnit http://www.javascriptmvc.com/docs.html#&who=FuncUnit This video explains it in the second half: http://cdn.javascriptmvc.com/videos/2_0/2_0_demo.htm http://cdn.javascriptmvc.com/videos/2_0/2_0_demo.htm
- badmash69 16y ago
  JavascriptMVC's unit testing is definitely a big advantage over backbone. But backbone.js integrates well with my project structure ; I am under the impression ( and I could be very well wrong about this) is that JavascriptMVC requires its own project structure and it has its own code generator of some sort. It seems that javascriptmvc is geared for huge applications whereas backbone.js is suited for single page apps. If I am wrong, do please let me know.

jashkenas 16y ago

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

johnbender 16y ago

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.

amadiver 16y ago
Could you expand on why you feel like building a UI in JS is a regression? Is this a popular sentiment? I really prefer working on layouts without manipulating markup, so I'm curious to why others feel different. Thanks!
- johnbender 16y ago
  HTML was designed with presentation semantics in mind (eg layout) and using Javascript to do the job HTML was designed seems like a waste. Hope that answers your question.
  - malandrew 16y ago
    I completely agree with this sentiment, however I think that templating systems such as JResign's microtemplates or Mustache.js go a long way to helping us avoid the problems associated with using JS to construct views. All my views are saved as HTML templates with ERB-like syntax for populating the views with dynamic data received via JSON.
  - amadiver 16y ago
    Thank you -- it does. If it's not too much trouble, do you have any examples or anecdotes for when HTML made layout really easy, or scripting made layout really hard? In my experience, there's a sweet spot for HTML/CSS. If I keep things really simple, it makes layouts a breeze. The moment I introduce complexity into the design, I usually wish I had the control of a scripted layout.
deleted 16y ago
[deleted]

esmooov 16y ago

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.

jashkenas 16y ago
A lot of the credit for the ideas behind backbone should properly go to Robert Kieffer (https://github.com/broofa https://github.com/broofa), an old hand at building JS apps.

ak1394 16y ago

Wouldn't you think that http://dojotoolkit.org/ http://dojotoolkit.org/ might be a good alternative?

malandrew 16y ago

I'm currently using Backbone.js + JQuery in my startup and my decision came down to the following conclusions: 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. 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) 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. 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. 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. Summary: Backbone.js + JQuery = Flexible, powerful, lean - Good for experienced devs 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" Cappucino/Sproutcore = Complex apps built fast, inflexibility in interface design patterns. Good for "native-style" apps. 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.

aaronblohowiak 16y ago
I think your analysis of Knockout.js is incomplete. You can customize any of the interactions and bindings, and it supports an entire reactive programming model (automatic re-execution of functions) that Backbone does not. Especially with the newer Knockout extensions that turn fromJSON into a full-fledged updateable model, Knockout competes well feature-wise with Backbone, it just has a very different flow-of-control paradigm.

raganwald 16y ago

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. * http://github.com/unspace/faux http://github.com/unspace/faux