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

Closed. This question is opinion-based. It is not currently accepting answers.

---

Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.

Closed 3 years ago.

Improve this question

I'm building a large scale web application. It will grow in the future so I need a good back-end and front-end architecture for my application. at开发者_如何学Python the back of the site, I use Zend Framework so the architecture is OK for me. But at the front, working with javascript and ajax without having a good architecture makes later changes hard and confusing.

For now, I'm using my own architecture. I have a big object for the whole application say BigObject. I extend it when modules are added to the site. say I have an upload module. I use this:

BigObject.upload={
    //initialization
    init:function(){
    },
    //I tried to use what I named semi-MVC architecture!!!
    controllers:{
        //index is a controller
        someController:{
            init:function(){
                //initialization
            },
            someAction:function(){
                //Code goes here
                //call a model if necessary
                //call view script
                BigObject.upload.views.someController.someAction();
            }
        }
    },
    models:{
        //models required for this module like loading contents with ajax.
        loadContent:function(part,callback){
        }
    }
    views:{
        init:function(){
            //initialize view
        },
        someController:{
            someAction:function(){
            }
        }
    }
}

What do you think? Is there any better solution to this problem? anyone thought about a good structure for front-end part of web applications ( like what we have at back-end,good file structure and object-oriented methods )?

---

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

---

I was actually struggling with the same question for sometime.. after doing few large-scale projects, I thought of sharing my learnings as a reference architecture incase someone else finds it useful.

Have a look at http://boilerplatejs.org. It is not a library, but a framework that integrates some industry leading libraries with architectural patterns for large scale javascript development.

---

According to my understanding on the frontend i will ask you to use web-components that uses only HTML,CSS and JS. No need to spend much time on understanding the other languages. If you take the latest UI frameworks or libraries like Angular, React they have built on web components.

You can customize your own components and use cases which you want to use in your project.When you are using frameworks it will take some time to load and follow up for few libs that are using.

JS you can use it any way you want. You can re-use these components in any number of projects once you have created.

Just look into webcomponents https://www.webcomponents.org/introduction you will get a clear idea. I hope this helps.

---

With the experience of scaling some of my content for million viewers in my application. But then I had to close the application for less profit and more stress in managing it (not the cost though, but the profit was not high enough to keep up motivation)

My architecture was:

1. Mithril.js.org library - Checkout mithril here for front-end
2. Twitter bootstrap front-end framework
3. Backend with "Laravel and started migrating some of the heavy write data to nodejs"
4. Redis as in-memory storage.
5. I was almost in a situation to move my storage to s3 before I shut down the app.

No jQuery - I kept my app jQuery-free ( I heard and read somewhere big app avoid jQuery, so without further investigation myself, I planned to remain jQuery-free as well, though I have no solid or bullet proof reason to avoid jquery)

I found mithril more interesting then react or angular, it was so easy to start and I was building while I was learning, it was damn easy and they claim, they are better than react, vue and angular in terms of size and performance.

---

My response would be to ask why you need this? I've worked on plenty of applications which make use of javascript, but one thing that I've learnt is that the best thing to do is to minimise javascript and most especially object orientated javascript to an absolute minimum. Web pages with large and complicated javascript tend to be slow, memory hungry and a pain to debug with all the browser variations.