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

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

Hellenize

This question, although it's very popular and interests me, can't be answered well because it depends on the application (which isn't specified) and the frameworks are changing every week, and it's asking for "better" which is a red flag for opinion-based IMO. Now, if one tries to vote to close it because of this, one is told "This question has an open bounty and can't be closed." – Leopoldoleor

Answer 1

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

Fewell

@Paul You'r right. jQuery is a library (I use it heavily in my application). I don't feel comfortable with YUI. yeah,maybe extending jQuery is a better solution. – Hellenize

Yeah if you’re using jQuery anyway, I reckon doing your own functionality as jQuery plugins is as decent a system as any. – Geranial

Answer 2

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.

Randi

That's a nice answer, but unfortunatly, not the answer to my question. If I ask you for a back-end framework, you'll answer MVC, Laravel, CodeIgniter. Not PHP neother node.js. If my understanding is right, React, TypeScript, jQuery ... are layers on top of JS, not a way of organizing your not, not a framework, neither an architecture. – Dorie

@fifi I would argue that React is as much an Architectural patten as it is a library and you need to understand both to be good at it. Check out code-cartoons.com for the best introduction to this. – Randi

Likewise GraphQL is a fundamental rethinking of the architecture for client server communication which has a number of implementations. So I think with both are building blocks to what your after, rather than a layer on top of JS. – Randi

A third pillar that I forgot to mention is the move CSS-in-JS. Their are a few different implementations of this, the one you should checkout is called Styled-Components. – Randi

So in summary their is no single answer to your question, like MVC. But these are the key building blocks for what I think your after. – Randi

Thank you David. I didn't find any ressource related to React on code-cartoon. About React, since your answer, I studied it, but I don't like it. I love to keep things simple and fast. This is not really the case with React (my favorite PHP framework is CodeIgniter and I love it ! it gives you an idea of my philosophy. – Dorie

My current conclusion is that there is no accepted organization or architecture for front-end JS. Each developer or team has its own recipe. Maybe the problem comes from the fact that JS is ephemeral? – Dorie

For React read the code cartoon on Flux. It is the original architecture patten for React. In part it was superseded by redux, but you still need to understand it. Redux is now being superseded by GraphQL for usés cases where your just dealing with server data – Randi

Thinking a bit more, maybe what you after is Next.js or GatsbyJS, which are Frameworks built on top of React and will give you more of a complete experience. I will add more to my answer as we’re adding a lot more detail here. – Randi

Answer 3

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!

Lubricator

Finally someone who understand the question... For sure, the bounty is for you. Thank you. – Dorie

Answer 4

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.

Ariose

The link is dead. – Dorie

@Dorie Perhaps you could add some detail to the question. A lot of the momentum of the global JavaScript community has been devoted to this topic in the ten years since it was asked. Since you've opened a bounty, maybe provide a little clarity on exactly what you need solved. Cheers. – Vadnais

Answer 5

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.

Heintz

Answer 6

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.

Palliate

Million viewers per day, month, years ? – Dorie

There are no exact metrics - some of the content had a million views in a month and some took 2,3,4 months. – Palliate

Answer 7

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.

Longsufferance

I do this because debugging and developing is much easier. in this structure I know where everything goes. but if I used function everywhere needed then maybe I reinvented the wheel in every page!! – Hellenize