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 way I build apps:

• ExtJS framework, single page app, every component defined in a separate JS file, loaded on-demand
• Every component contacts its own dedicated web service (sometimes more than one), fetching data into ExtJS stores or special-purpose data structures
• The rendering uses standard ExtJS components, so I can bind stores to grids, load forms from records, ...

Just choose a javascript framework, and follow its best practices. My favorites are ExtJS and GWT, but YMMV.

Do NOT roll your own solution for this. The effort required to duplicate what modern javascript frameworks do is too big. It is always faster to adapt something existing than to build it all from scratch.

Answer 2

Or have a look at https://github.com/flosse/scaleApp