1

I want to build a contact list in js, but there are so many js technologies like backbone.js, spine.js, knockout.js, etc. that I dont really know which one is best for me.

My contacts have a few overarching types: FacebookUser, User, and UserList. The catch with userlist is that it is a collection of users or UserLists. Furthermore, it itself may or may not have its own contact information (like a company or a team).

I want to display this list in a tree-view where you can drill down into UserList (and have the group members lazy loaded).

Lastly, the entire contact list is an instance. What I mean is that you have have 0-n number of contact lists open in the same window at a time.

What framework should I use for this situation?

chacham15
  • 13,719
  • 26
  • 104
  • 207

2 Answers2

4

All three of the libraries that you mention (backbone.js, spine.js, knockout.js) are aimed at single-page browser apps.

But your description of your problem sounds more like a formatting issue, not data management. Ie, you want your page to show the data. You don't need to save changes from your page back to the server; your users will refresh to the page to show new or different information.

If my understanding of your goal is correct, I'd go with jQuery or YUI. The libs you mention would be overkill.

Added YUI has a nice treeview widget that supports lazy-loading of branches. I use it for that.

If you do decide to use a model layer, YUI 3 includes Model and ModelList. They're based on Backbone api.

Re: MVC comment In a comment, the OP mentions "multiple views on the same data, change propagation, and edit detection (if a user changes a number) and updates from the server"

For those cases, yes, these days many cool kids are using a complete MVC framework on browser itself. If you wish to go in that direction, then you could use any of the three you mentioned. Notes:

  • Backbone, and probably the other two, do not provide complete MVC. Rather, Backbone supplies the Model & Controller portions, especially the Model. It is common to use Mustache for the View. In addition, it is common to use underscore or jQuery to supply basic facilities. If you Google for backbone examples, many of them include jQuery.

  • Checkout YUI new y.App. It includes all of the MVC parts in one well documented lib. y.App is in hot development and is based on the Backbone api. A video-cast

  • MVC Frameworks on the browser are brand new. Don't be surprised by quickly changing library code, inconsistent docs, few examples, etc. You should also consider documenting and posting your investigations. For extra credit, get it working well on mobile browsers.

  • 49 Signals was rumored to be working on a browser-side MVC framework, but we haven't seen anything yet.

  • I believe that backbone is the most senior of the Model libraries. But it has proven to be confusing to many new users, hence some of the other libs based on its concepts.

  • Based on my experience with YUI, their Y.app will have the most consistent and complete api set and the best docs.

Larry K
  • 47,808
  • 15
  • 87
  • 140
  • Its just that my general programming sense tells me that a good gui has model, view, controller. This allows me to seperate the data from the view. Which allows multiple views on the same data, change propagation, and edit detection (if a user changes a number) and updates from the server – chacham15 Nov 20 '11 at 08:17
  • @chacham15 MVC is just one approach, and though I also tend to prefer an MVC approach, it's not the only one. Be that as it may, JavaScript with or without jQuery or the other libraries you mentioned can still be a part of an MVC application. – Greg Pettit Nov 20 '11 at 08:51
  • If I go down the jquery road, would it be difficult to then adapt it to backbone if necessary? – chacham15 Nov 20 '11 at 09:15
  • Aha! y.App is new to me. I have also checked out [Sproutcore](http://www.sproutcore.com) and [spine.js](http://spinejs.com) as possible alternatives to backbone. – nathanvda Nov 21 '11 at 11:33
0

If we take your specific case, I would strongly go for Knockout.js

Knockout is built for UI i.e. that your data model can be binded to HTML elements and then any changes in the model manipulate the UI accordingly.

In your case the additions/deletions to the contact list will be automatically tackled by Knockout. All you need would be to define the how the changes in the tree view are to be tackled (either by code or by HTML templates) and Knockout will take care of that.

Saying that, defining the treeview of your contact list is still different task altogether and you may need to you use some CSS/JS library for that.

neebz
  • 11,465
  • 7
  • 47
  • 64