Architecture of a single-page JavaScript web application?

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 it

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

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.

Answer 3

Nicholas Zakas's presentation as shared by Dean is a very good place to start with. I was also struggling to answer the same question for a while. After doing couple of large scale Javascript products, thought of sharing the learnings as a reference architecture in case someone needs it. Have a look at:

http://boilerplatejs.org/

It addresses common Javascript development concerns such as:

• Solution structuring
• Creating complex module hierarchy
• Self contained UI components
• Event based inter module communication
• Routing, History, Bookmarking
• Unit Testing
• Localization
• Document Generation

etc.

Answer 4

I would go with jQuery MVC

Answer 5

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

Answer 6

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.