Gmail Client Side Architecture Part 1
Gmail is the best web application I have ever seen. Simple implementation, Ajax, Chat, Status Messages, Fast Mail retrieval, live updating and its features are endless. When you type: www.gmail.com, the following actions will happen.
The first script's job is to check the browser type, os etc. The function navigator.userAgent.toLowerCase() checks whether it is opera, msie,mac,gecko,safari,palmsource,regking,windows ce,avantgo,stb,pda; sony/com2 etc. Script 2 calculates the round trip time for a 1 pixel image. This is for detremining the internet speed of the user:
var end = (new Date()).getTime();
SetGmailCookie(”GMAIL_RTT”, (end - start));
Since gmail uses iframes, this script also makes sure to load the actual home page:
top.location = self.location.href
At the same time it also sets the cookie to show which of the google services it is using. It then loads the login form and sets focus on password field.
Script 3 handles the https connection and cookie settings for secured login. With the login screen Google still chose to go with the, not so Web 2.0 table layout but, with that aside, the login scripts will next point to:
After registering the session and setting the cookies for login, the non secured site http://mail.google.com/mail page automatically get's refreshed by this meta tag:
<meta content=”0;URL=http://mail.google.com/mail/” http-equiv=”Refresh”/>
While loading the mail page, after setting the proper login sessions, around 28 ajax requests starts executing to load all mail messages, labels, channels etc. The first DIV tag inside the body tag is that for displaying the "loading..." message.
While the Ajax request executes there is also a timer at work to check the loading time of ajax requests. If it takes more time than expected (or calculated), it shows this message: "This seems to be taking longer than usual" At the same time it provides a link to access the basic html version.
The Gmail interface is built up from a series ofthe following iFrames:
The SOUND_IFRAME session loads a flash object for playing the sounds while using the chat service from within Gmail. (Google chat indicator)
<embed id=”flash_object” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” quality=”high” style=”position: absolute; top: 0px; left: 0px; height: 100px; width: 100px;” src=”im/sound.swf”/>
Gmail saves each section, labels, inbox, mails etc in array with a unique id. This unique id is for checking for updates on the fly using ajax. For example:
If there are any updates a new RPC call via the post method is automatically called to get new data. The calling url is the same as the one above:
When you are chatting with someone, the calling URL is as follows:
This is done via a POST method with the following parameters:
req2_text <your chat>
req2_to <sender’s email address>
Now, the above url returns your chat friends and theire status messages. This is the same url used for getting the chat messages. For example when kenney.jacob@gmail chats with me, the message comes as an array like this:
[184,[”m”,”firstname.lastname@example.org”,”730DFDF6F013F640_161″,”active”,”hi da”,”hi da”,1206444193169,
Here active indicates whether chat is active or not (the window with orange color) and with a chat alert if the window is not active. To close of part one of this series on the architecture of Gmailwe see how Gmail checks whether or not chat is enabled inside Gmail. It does this via the following URL:
And this will return an array such as this:
I hope you enjoyed the first part on Gmail architecture. I will be posting more about the other aspects of Gmail soon.
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)