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.

Script1 loads the first JavaScript file

https://mail.google.com/mail?view=page&name=browser&ver=1k96igf4806cy

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:

function GetRoundtripTimeFunction(start){return function(){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.

[img_assist|nid=3476|title=|desc=|link=none|align=none|width=335|height=213]

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:

https://www.google.com/accounts/ServiceLoginAuth?service=mail

This is the general url fora Google account login. Here the service=mail parameter indicates that this is a Gmail log in. When verification completes, the page is redirected to the corresponding service via javascript:

location.replace(”http://www.google.co.in/accounts/SetSID?……etc etc”);

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:

• HIST_IFRAME
• SOUND_IFRAME
• CANVAS_IFRAME
• JS_IFRAME

The SOUND_IFRAME session loads a flash object for playing the sounds while using the chat service from within Gmail. (Google chat indicator)

[img_assist|nid=3508|title=|desc=|link=none|align=none|width=230|height=221]

<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:

http://mail.google.com/mail/?ui=2&ik=42e598c952&view=tl&start=50&num=70&auto=1&ari=120&rt=j&search=inbox

The above url pics all the data as a javascript array. Have a look at this URL the next time you log into Gmail. You can see your labels, your received emails, your settings, your last 70 received email subjects etc. al encoded in Javascript array format. This is the URL which is to be called when you click older and newer mail, i.e. pagination. Gmail always call this url:

http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=93079&SID=584B451AB93DBDC&RID=16351&zx=lniy7w-6psisw&t=1

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:

http://mail.google.com/mail/?ui=2&ik=42e598c952&view=tl&start=0&num=70&auto=1&ari=120&rt=j&search=inbox

If there are any results, the new data is loaded as a javascript array. The rest of the work is handled by the script on the client side. Whenever you open a mail from your inbox, the browser sends another request to load the sponsored links (advtisement) though this RPC:

http://mail.google.com/mail/?ui=2&ik=42e598c952&view=ad&th=118e57dc03d67f16&search=inbox

The CANVAS_IFRAME is the main iframe and contains all the layout items that make up the Gmail interface. It contains the left side chat, main inbox or opened mail, the ads on the right, and all the controls. The left side chat area is created using a HTML table. The JS_IFRAME contains all the javascripts files for the entire Gmail  implementation. There are around 89 js files loaded into the iframe.

[img_assist|nid=3509|title=|desc=|link=none|align=none|width=158|height=415]

When you are chatting with someone, the calling URL is as follows:

http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=891&SID=7D4E9A779225DC1&RID=50595&zx=hrsqkf-nwummu&t=1

This is done via a POST method with the following parameters:

req2_text <your chat>req2_to <sender’s email address>req0_type cfreq1_cmd areq0_focused 1http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=531&RID=rpc&SID=48DD6BA8E1D3A326&CI=1&AID=176&TYPE=xmlhttp&zx=m0iiwn-ok5jqr&t=1

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”,”kenney.jacob@gmail.com”,”730DFDF6F013F640_161″,”active”,”hi da”,”hi da”,1206444193169, ,,0,0,0,0,[],”square”]

[img_assist|nid=3513|title=|desc=|link=none|align=none|width=255|height=32]

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:

http://mail.google.com/mail/channel/test?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=24343&MODE=init&zx=1vyx51-ze670&t=1

And this will return an array such as this:

[”b”,”chatenabled”]

I hope you enjoyed the first part on Gmail architecture. I will be posting more about the other aspects of Gmail soon.

Original Author

Original article written by Sajith.M.R