Modularizing web applications

Question

I was wondering how big companies tend to modularize components on their page. Facebook is a good example:

There\'s a team working on Search that has it

Answer 1

From my experience, no matter how well you try to standardize everything, for big teams complete coherence, with everyone doing the same things the same way is almost impossible.

Don't try to solve the problem at the "standards level" or the "how to" level... solve it at the human level, at the management level.

We use a couple of techniques to maintain coherence at the management level:

• Maintain the tools for the developer to inform the rest. That includes Wikis, internal discussion forums and so on.
• Have enough middle management available. No body can be aware of everything but it makes sense for a person to be aware of everything that is at his level. That way the User Management group can sync with the Security group and the Security Group can be in sync with the Content Management group. The mission of this middle management is to know enough about everything, the do not need to know every detail, just enough to pass it the knowledge where it should be.
• Add levels as you see fit, but in every level there should be one person looking up everyone is doing more or less the same things. He will be in charge to raise alarms if two groups are doing things in completely different ways.
• Maintain a good information flow. Having standards is important but allowing people to actually KNOW they exits is even better and ensuring they use them, through code revision and weekly meeting is completely needed if you want to keep doing things rigth.

I know a lot of people do not like "management". They think is an extra layer that does nothing. Well, that ain't true. Management helps to solve problems like exactly this. Help to communicate big teams and have a general view of what's happening... there are a lot of "techniques" to define a standard on how to do things... all that techniques fail when there isn't a human being making sure people follow know and follow those standards.

Answer 2

If you really want to know, just open up firebug and go spelunking through the facebook site.

30 seconds later you'll find out they rarely apply css to divs through IDs; and instead use a lot of the dot class notation.

Once you go down this path, separating dev groups into functionality is a whole lot easier. You can have one core group that is responsible for the main "shell" using ID's. Everyone else you force to use dot classes.

You can further restrict this by giving each group a prefix to work in.

Answer 3

There is a lot to be said for CSS Frameworks like Shaun Inman's CSScaffold. It lets you subdivide stylesheets, define constants, easily handle local contexts, etc. It doesn't solve your problem, but it can be a big help.

On the Javascript side, it is possible to work with local contexts, although I've rarely if ever run into problems.

Naming of HTML elements is definitely tricky, but HTML 5 should help (fewer id's and classes are necessary) and precompilation as you mention can be another option.

Answer 4

i worked with several one-page-web-app projects, from my experience

your diff teams should sit down once to setup some simple css convention

for example

mod-search.css

.mod-search .title { }
.mod-search .text { }

mod-news.css

.mod-news .title { }
.mod-news .text { }

in production use your fav front end do lump all the resources into one

also do the same to js, actually js is easier to manager than css

make sure each module is wrapped in its own closure

i am using YUI as an example

mod-search.js

(function(){
   var node = Y.Node.create('<div/>').addClass('mod-search'); 
   // hook your event to this module node only
   node.delegate('click', handleSearch, 'button.search');
}());

mod-news.js

(function(){
   var node = Y.Node.create('<div/>').addClass('mod-news'); 
   // hook your event to this module node only
   node.delegate('click', handleViewNews, 'a.view-news'); 
}());

all-in-one.js.php

//
// php set content type text/javascript
//
YUI().use('node', 'event', function(Y){
   // php include mod-new.js
   // php include mod-search.js
}); 

the HTML

<html>
    <head>
        <link href='all-in-one.css.php' rel='stylesheet' />
    </head>
    <body>
        <script src='all-in-one.js.php' ></script>
    </body>
</html>

Answer 5

Some applications use a portal server which is used as a proxy. It sits in front of all these web/application servers. The portal server gets the data/feeds of HTML these servers and then adds a prefix/suffix to the tags making them unique.

In a way you are correct, there is a component which handles such things.

Answer 6

My company does Business Web Applications.

Most of the times we use a SOA Architectre with ADF or PHP frontend, so it does not matter how things are named, because most of the HTML is rendered from components (It reduces the freedom you have in free HTML, but makes it faster to develop).

Also our Teams are not organized by Topics, they are put in different technical areas, like Database, GUI or Performance.

The big advantage is, that you can reuse some of the Web-services in different Applications, without having to contact to original developer.