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

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

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

Answer 2

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.