For the past eight(8) years Schalk Neethling has been working as a freelance developer under the pseudo of Volume4 and is now the president of Overt Strategy Consulting. During this period he has completed over 300 projects ranging from full web application development to complete branding. As president and lead developer of Overt Strategy Consulting, Schalk Neethling and his team has released a 100% Java standards based content management system called AlliedBridge and business document exchange and review system, called Doc-Central. Schalk Neethling is also actively involved on a daily basis in the open source, web standards and accessibility areas and is a current active member of the Web Standards Group. Schalk is also the co-founder and president of the non-profit The South Web Standards and Accessibility Group, which aims to actively educate and raise awareness of web standards and accessibility to both the developer society as well as business large and small. Schalk also has a long relationship with DZone and is currently zone leader for both the web builder, css.dzone.com, as well as the .NET zone, dotnet.dzone.com, and you can find a lot of his writing there as well as on his blog located at schalkneethling.alliedbridge.com. Schalk is constantly expanding on his knowledge of various aspects of technology and loves to stay in touch with the latest happenings. For Schalk web development and the internet is not just a job, it is a love, a passion and a life style. Schalk has posted 173 posts at DZone. View Full User Profile

Gmail Client Side Architecture Part 1

06.13.2008
| 73809 views |
  • submit to reddit

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.

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)

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

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 cf
req1_cmd a
req0_focused 1

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

References
Published at DZone with permission of its author, Schalk Neethling. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Schalk Neethling replied on Sat, 2008/06/14 - 5:34am in response to: Cherian Thomas

I agree, will rename this one and will post the rest of the series under this heading. Thanks for the suggestion.

Carla Brian replied on Sun, 2012/05/06 - 7:28am

I love Gmail. It is really a reliable application. Aside from that, it easy to use as well. - Paul Perito

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.