Best solution for Javascript web app

Question

I'm currently working on a web application that's sort of similar to Google Reader (at least in terms of what kind of information is handled). I've built a rudimentary prototype using just plain Javascript and jQuery, but I've quite quickly found out that it becomes very messy, very quickly.

So today I've been looking at what MVC frameworks are out there for Javascript apps. It's a development architecture that I'm familiar with, and it fits very well with what I'm trying to do. A few of the alternatives that I've found are SprouteCore, Backbone.js and Knockout.js (not MVC, but close enough). They all have their pros and cons, but I'm not sure which one would be right for me.

What I need is a framework that allows me to automatically update the view when the model changes (so if I in my view display all items from an array, and I then add another item to the array, the list in the view should update itself), and that allows me to cleanly separate my Javascript from my HTML (at least as much as possible). Extra points would be awarded if it already had a nice interface for fetching information for the models from a RESTful API via AJAX calls - but that's not strictly required.

Any thoughts on how I should go about this? I'm not terribly experienced with Javascript, but I'm not completely wet behind the ears either. I've looked at combining Backbone.js with ICanHaz.js+Moustache.js, but I'm not entirely sure if that solves my problem with wanting the view to "update itself" whenever a change is made to the model.

Rickard · Accepted Answer · 2011-09-21 08:43:35Z

1

you're describing the very properties of the MVVM pattern. I've successfully used Knockout.js in several solutions for what resembles what you want to do. In addition, Knockout has some convenience functions for Ajax calls but you can allways use jQuery or both if you need total control.

edited Sep 21, 2011 at 8:43

answered Sep 20, 2011 at 21:08

Rickard

2,33513 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tommy Brunn Over a year ago

I guess I should take a closer look at Knockout.js, then. The thing that threw me off the first time was that the templating system seemed to require you to put a whole bunch of Javascript in your markup.

Rickard Over a year ago

I know there are some examples where they put more JavaScript in the markup than what is probably healthy. Most of the time you can move it into the view model instead.

Matt Rogish · Accepted Answer · 2011-12-01 00:51:22Z

1

http://batmanjs.org/ is quite new and I think it has exactly what you need in terms of updating the view. It's done via the Observer pattern. They've got some really excellent concepts in there, separation of the html and javascript, removing a lot of the usual event binding that needs to be done. Well worth a look.

Mulberry is another framework that's being released soon as well, it looks very promising http://mulberry.toura.com

edited Dec 1, 2011 at 0:51

Matt Rogish

25k11 gold badges79 silver badges93 bronze badges

answered Sep 20, 2011 at 22:33

sciritai

3,7481 gold badge19 silver badges22 bronze badges

1 Comment

Matt Rogish Over a year ago

FYI mulberry is released etc.

Ruan Mendes · Accepted Answer · 2011-09-20 22:47:25Z

0

Ext-JS, http://docs.sencha.com/ext-js/4-0/, has lots of data driven widgets, like trees, grids and dataviews

For example a grid's http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel data comes from a store http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store and as you add records to the store, the grid automatically updates its view

Ext.define('ImageModel', {
    extend: 'Ext.data.Model',
    fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]
});

var store = Ext.create('Ext.data.JsonStore', {
    model: 'ImageModel',
    proxy: {
        type: 'ajax',
        url: 'get-images.php',
        reader: {
            type: 'json',
            root: 'images'
        }
    }
});
// This will fetch JSON from the URL above and the grid updates once the load is completed
store.load();

// This is loading data inline if you don't want to automatically hook up to a URL
// Again, the view updates automatically when you update the underlying store
store.loadRecords({
   images: [
       {name: 'Anything', url: 'http://www.img.com/idkdk', size: 54545, lastmod: '2011-08-01T02:12:36'}          
   ]    
});

Beyond all this Ext also has an implementation of MVC on the client side. http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture

Ext stores can also use CRUD and automatically send request CREATE, READ, EDIT, DELETE commands as you add and remove records from the store.

answered Sep 20, 2011 at 22:47

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

3 Comments

Ruan Mendes Over a year ago

@Raynos: at least explain why you think Ext-JS is overkill. Just mentioning your own preferences is not very helpful. I mentioned many features that most UI libs don't have but ExtJS excels at

Tommy Brunn Over a year ago

That's an excellent answer, but I do think Ext-JS would be a bit overkill. I don't need nor want any widgets, so on the whole, it seems a bit too robust.

Raynos Over a year ago

@JuanMendes because backbone and extjs are at completely different ends of the spectrum. If he's considering backbone, extjs is probably overkill. ExtJS is suited for large teams and large applications.

Collectives™ on Stack Overflow

Best solution for Javascript web app

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related