Can anyone suggest a good client-side architecture and structure for large scale web applications?

The most up to date answer to this question in 2020, would be to use React + GraphQL + Styled-Components. The best place to start with React is the official Create React App tool. Their are a few different implementations of GraphQL; on the client side the clear leader is Apollo. On the server you have a lot more choice and it is reasonably easy to even roll your own server implementation, so go with what work best with your current backend. Styled-Components gives you CSS in JS, in the same way that React gives you HTML in JS.

For a more complete and opinionated experience, take a look at Gatsby, which brings all of the above into a single framework.

Over the last couple of years a more functional style to writing JavaScript has become popular. If your not used to functional programming then it can be a bit of a steep learning curve to start with, but start by leaning about a library called Ramda.

Here are few links to get you started on functional JS

• An introduction to functional programming in JavaScript
• Thinking in Ramda
• Indentation is the enemy: Writing less complex JavaScript
• Mostly Adéquate guide to functional programming

When it comes to testing, then Jest combined with Enzyme is by far the best current option.

Finally for a much deeper answer, checkout this talk from Cheng Lou on the Spectrum of Abstraction.

Most of the answers are proposing stuff like jQuery, React, Angular, Vue.js... which are not frameworks, neither architectures. All of these libraries are layers on top of JavaScript. I just remind you that JavaScript is already a high level language!

Since the question is about a good client-side architecture and structure for large scale web applications, I would say that none of the previous answer solve the problem, and there is a reason for that :

There is currently no emerging or commonly accepted architecture for front-end JavaScript source code organization.

I already read dozen of blog posts, Stackoverflow questions, Youtube videos... I never found someone who detailed a generic, general and scalable architecture. The main reasons are:

• front-end JS code is quite small regarding back-end source code, most of the developers do not need a scalable architecture.
• execution is ephemeral, lifetime of JS is the same as web pages lifetime.
• the problem for many developers is more about manipulating the DOM than structuring large JS code. This is why people answers are about libraries rather than frameworks.

I really expect that some day, someone will propose the first real JS architecture (like MVC for example). But in my opinion, this architecture will be more about event-callback than MVC. Before concluding, I'll suggest you the following ressources:

• Imperative or procedural programming.
• Functionnal programming (probably the best lead with modules)
• Awesome videos of Fun Fun Function
• JavaScript modules

To conclude, I'll strongly recommend to consider JS modules that have a great underestimated potential. This is not exactly an architecture, but:

• JS modules organise your code
• JS modules are scalable
• maintanability is easy
• JS module are reusable

Previous list isn't the main reasons why you need to organize your code?

Word to the wise!

A lot of people push for either Dojo or YUI for large applications. They are honest frameworks where most everything else you'll find is a library.

Personally, I tend to stick with jQuery. I create jQuery plugins or jQueryUI Widgets as needed. I've managed to push jQueryUI pretty far.

Everything falls in either $.fn.myPlugin or $.ui.myWidget. To me, this has the added benefit of pushing you to keep code very modular and portable (assuming you abide by jQuery/jQueryUI conventions).

$(element).myWidget({
    color:'eggplant',
    someValue:42
});

$.upload(args);