Architecture of a single-page JavaScript web appli

Question

How should a complex single-page JS web application be structured on the client-side? Specifically I'm curious about how to cleanly structure the application in terms of its model objects, UI components, any controllers, and objects handling server persistence.

MVC seemed like a fit at first. But with UI components nested at various depths (each with their own way of acting on/reacting to model data, and each generating events which they themselves may or may not handle directly), it doesn't seem like MVC can be cleanly applied. (But please correct me if that's not the case.)

--

(This question resulted in two suggestions of using ajax, which is obviously needed for anything other than the most trivial one-page app.)

Answer 1

The web application that I am currently working on uses JQuery and I would not recommend it for any large single page web application. Most frameworks i.e. Dojo, yahoo, google and others use namespaces in their libraries but JQuery does not and this is a significant drawback.

If your web site is intended to be small then JQuery would be ok but if you intended to build a large site then I would recommend looking at all the Javascript frameworks available and deciding which one most meets your needs.

And I would recommend applying the MVC pattern to your javascript/html and probably most of your object model for the javascript could be done as the json that you actually return from the server through ajax and the javascirpt uses the json to render html.

I would recommend reading the book Ajax in action as it covers most of the stuff you will need to know.

Answer 2

I would go with jQuery MVC

Answer 3

You can use javascript MVC framework http://javascriptmvc.com/

Answer 4

Check out http://bennadel.com/projects/cormvc-jquery-framework.htm Ben is pretty sharp and if you dig around on his blog he has some nice posts about how CorMVC is put together and why.

Answer 5

Alternative: take a look to ItsNat

Think in JavaScript but code the same in Java in server with the same DOM APIs, in server is way easier to manage your application without custom client/bridges because UI and data are together.

Answer 6

MVC architecture of PureMVC/JS is the most elegant IMO. I learned a lot from it. I also found Scalable JavaScript Application Architecture by Nicholas Zakas helpful in researching client side architecture options.

Two other tips

1. I've found view, focus, and input management are areas that need special attention in single page web apps
2. I also found it helpful to abstract away the JS library, leaving door open to change mind on what you use, or mix & match should the need arise.