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 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.)

Acro

You can try angularJS or backboneJS – Inculpable

Can you provide your own insights for this question? It's been a while since you asked this question and I'm interested to know what are the most important aspects you learned from your own experience with Javascript SPAs. – Cissy

Answer 1

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.

Annmaria

Answer 2

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.

Quezada

It has changed to github.com/99x/boilerplatejs. But it has been updated for 9 years so I doubt it is still valid. – Abidjan

Answer 3

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.

Fancy

Answer 4

Question - What makes an application complex ? 

Answer - The use of word 'complex' in the question itself. Hence, a common tendency will be to look out for a complex solution right from the beginning.

Question - What does the word complex means ?

Answer - Anything that is unknown or partially understood. Example : The theory of Gravity even today is COMPLEX to me but not to Sir Isaac Newton who discovered it in 1655.

Question - What tools can I use to deal with complexity ?

Answer - Understanding and simplicity.

Question - But I understand my application . Its still complex ?

Answer - Think twice, because understanding and complexity does not co-exist. If you understand a huge huge application, I am sure you will agree that it is nothing but an integration of small and simple units.

Question - Why all of the above philosophical discussion for a question on 
           Single Page Application (SAP)?

Answer - Because,

-> SPA is not some kind of core technology that is newly invented for which we need to reinvent the wheel for a lot of things that we are doing in application development.

-> Its a concept driven by the need for better performance, availability, scalability and maintainability of web applications.

-> Its a fairly newly identified design pattern, so an understanding of SPA as a design pattern goes long way in making informed decisions about the architecture of a SPA.

-> At the root level no SPA is complex, because after understanding the needs of an application and the SPA pattern, you will realize that you are still creating an application, pretty much the same way you did before with some modifications and re-arrangements in the development approach.

Question - What about the use of Frameworks ?

Answer - Frameworks are boiler plate code / solution for some commonly identified and generic patterns, hence they can take off x% (variable, based on the application) load from application development but then not a lot should be expected out of them specially for heavy and growing applications. Its always a good case to be in complete control of your application structure and flow but most importantly the code for it. There should be no grey or black areas in the application code.

Question - Can you suggest one of the many approaches to SPA architecture ?

Answer - Think of your own framework based on the nature of your application. Categorize application components. Look for an existing framework that is close to your derived framework, if you find it then use it, if you do not find it then I suggest going ahead with your own. Creating framework is quite an effort upfront but produces better results in long run. Some basic components in my SPA framework will be:

• Data Source : Models / Collections of Models

• Mark Up for presenting data : Templates

• Interaction with the application : Events

• State capturing and navigation : Routing

• Utilities , widgets and plug-ins : libraries

Let me know if this helped in any way and good luck with your SPA architecture !!

Brannan

This adds some great perspective (that's usually rare). Thx! – Carat

Answer 5

The best thing to do is to look at example uses of other frameworks:

TodoMVC showcases many many SPA frameworks.

Binnie

Answer 6

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

Integumentary

Answer 7

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.

Minervamines

jQuery can be written (like any JS) in a namespaced way using prototypes. I'm not sure it's a large or obscure enough feature to warrant abstracting behind a framework--I prefer to learn what JS is actually doing. #882015 – Rival

JQuery is not intended as a client side application framework. It is targeted at a "lower-level" than that. JQuery is design to simplify HTML document traversing, event handling, animating, and Ajax operations and to abstract away differences between the browsers. For larger apps you should use a client side application framework such as knockout or backbone IN CONJUNCTION WITH JQuery. – Duodecillion

So my point still stands if knockout or backbone don't include, document traversing, event handling, etc then there not worth much. The YUI3 App Framework does and there is no need for JQuery if you use it. – Minervamines

jquery keeps all its methods stored in the jQuery variable and the $ variable. If you use the no conflict option only the name jQuery is created in the global namespace. jQuery is not a framework, just a library, it doesn't tell you how to do things, just give some shortcuts to do some common stuff. Comparing jQuery to Dojo/ YUI etc is wrong. – Rhodium

@Minervamines Your if statement evaluates false. – Permanency

I have no doubt jQuery has once changed the web for good, but I agree with @eaglestorm. jQuery has everything in since namespace $ or jQuery, including DOM manipulation, networking, string trimming, and 3rd party extension, which is a poor design. API is messy. But what's really important for an OO application is context management. jQuery event handler's this is the event target, not object itself. There's no 3rd argument, like in Array.prototype.map to specify context. So every event handler ends up with Function.prototype.bind or $.proxy. Thus it's limited for ad hoc scripts. – Peradventure

Answer 8

I'm using Samm.js in several one page applications with great success

Joscelin

Answer 9

I would go with jQuery MVC

Zavras

Answer 10

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.

Apocalypse

Answer 11

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.

Shaniqua

Answer 12

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

Afroasian

Answer 13

NikaFramework allows you to create single-page application. Also allows you to write HTML, CSS (SASS), JavaScript into separate files and bundle them into only one output file in the end.

Vinna

Answer 14

I would recommend to explore Yeoman. It allow you to use existing "best practice" for your new project.

For example:

if you decide to use Angular.js, there is a Yeoman generator, that give you a structure for routing, views, services, etc. Also allow you to Test, minify your code, etc.

If you decide to use Backbone, checkout this generator

Melodramatic