Gmail Architecture
Posted on 26. Mar, 2008 by Sajith M.R in html, webworld
Gmail is the best application website i ever seen. Simple implementation, Super Ajax, Cute Chatting, Status Messages, Fast Mail Checking, Live updating and its features are endless as my wordpress database wont withstand
when you type: www.gmail.com, the following action will happen. See it is very interesting.
Script1
It first load the javascript file : https://mail.google.com/mail?view=page&name=browser&ver=1k96igf4806cy
It checks the browser type, os etc
the function navigator.userAgent.toLowerCase() checks with opera, msie,mac,gecko,safari,palmsource,regking,windows ce,avantgo,stb,pda; sony/com2 etc browsers
that is script 1’s job.
Script 2 calculate the round trip time for a 1 pixel image. This is for finding 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 make sure to load the actual home
top.location = self.location.href
It also set cookie to show which of the google service is using.
Then loads the login form and set focus on password field.
Script 3 handles the https connection and cookie settings for secured login
Yet the web 2.0 concept is on the peak, gmail uses table layout design instad of div style designs 
Gmail’s login form ’s action is pointing to “https://www.google.com/accounts/ServiceLoginAuth?service=mail”
This is the general url for google account login. Here service=mail parameter indicates , this is gmail logging
When the logging verification done, the page is redirected into corresponding service by javascript:
location.replace(”http://www.google.co.in/accounts/SetSID?……etc etc”);
After setting proper session and cookies for login, the non secured site http://mail.google.com/mail page automatically get refresh by this meta tag:
<meta content=”0;URL=http://mail.google.com/mail/” http-equiv=”Refresh”/>
When loading the mail page after setting proper login sessions, around 28 ajax web request begin to start, and load all the mails, labels, channels etc
The above mentioned all javascript is also here in this mail loading page
The first division (div) inside the body tag is that for loading. A while text “loading…” with red backgroud.
<div class=”msg”> Loading… </div>
This is the waiting symbol for all the ajax call to load
There is also a timer is working to check the loading time of ajax requests. If it takes more time than expected (or calculated), it show this error “This seems to be taking longer than usual”
Automatically they provide navigation links for basic html version.
The total page of gmail is created by a set of iframes
viz
HIST_IFRAME
SOUND_IFRAME
CANVAS_IFRAME
JS_IFRAME
The Sound_Iframe session loads a flash object (shock wave file) for playing the sound , when chat works. (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 sections- labels, inbox, mails etc in array with a unique id. This unique id is for checking the updations 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 javascript array format. Check this link after logging in gmail. You can see your labels, your from email accounts, your settings,
your last arrived 70 emails subject and from etc information in javascript array format.
This is the url which is to be called when you click older and newer mail (pagination below)
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
(leave the parameters value) for checking updatations. This is gmails rpc checking for new updations .
If there is any updation new rpc with post method automatically called to get new data. The calling url is same , 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
It results new data as javascript array format. The rest of the arrangements are handled by the script from client side.
Whenever you open a mail from inbox, the browser send another request for loading the sponsered 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 contains all the layout of gmail
It contains the left side chat, main inbox or mails right side ads, and all the controls
The left side chat is created using table.
JS_IFRAME contains all the javascripts files for gmail full implementation. There are around 89 js files.
When you chat with somebody, the url calling is : http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=891&SID=7D4E9A779225DC1&RID=50595&zx=hrsqkf-nwummu&t=1
as POST method with parameters:
req2_text <your chat>
req2_to <sender’s email address>
req0_type cf
req1_cmd a
req0_focused 1
Now,
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
the above url return the chat friends and theire status messages
==========================================================
Same url is using for getting the chat messages.
For example when kenney.jacob@gmail chat 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”]
Here active implies the chat is active or not (the window with orange color) and with a chat alert if the window is not active.
http://mail.google.com/mail/channel/test?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=24343&MODE=init&zx=1vyx51-ze670&t=1
The above url checks whether the chat is enable or not. which returns an array:
["b","chatenabled"]
Gmails file uploading is another interesting thing. I already posted ajax file uploading : http://www.sajithmr.com/upload-files-like-gmail/
I will post more about gmail architecture soon .
Binny V A
Mar 26th, 2008
Are you using Firebug to reverse engineer the app?
Sajith M.R
Mar 27th, 2008
Yes…I used firebug
shoban
Mar 27th, 2008
informative post.. thanx
rakesh
Apr 7th, 2008
a really gud one…actually was refere by my frend ashish…Thanx ashish…tooo gud!
Wind Chimez
Apr 16th, 2008
Good work friend. Good set of information you had shared regarding google’s way of coding. expect more of this kind of posting form you
Vivek Yadav
Apr 25th, 2008
Nice Information buddy , with informative blogs like yours it’s easy to understand the technology behind everyday stuff ..
Raja
Jun 10th, 2008
Really excellent architecture and the the work done by you.
J.Naveen
Jul 11th, 2008
Hi,
I want gmail’s post url for login to my Gmail account, So please tell me the procedure to login from javascript
Jaini Naveen’s » I found these intresting things on Gmail account(uploaded files have param links)
Sep 28th, 2008
[...] about Gmail architecture [...]
J.Naveen
Sep 28th, 2008
wow very nice article for me, because I am surfing for this. I to wrote an article about Gmail but that is different topic. that is about uploaded files
http://www.jaininaveen.com/?p=77
thx….
abhishek namdeo
Dec 4th, 2008
Very nice article. Was searching for these type of article from a long time.
ddz786
Dec 9th, 2008
chek mail
srinivasan
Dec 13th, 2008
Great it was nice and very informative. By the way wer r u frm?
laxman
Mar 25th, 2009
hai sujit mr i want integrate chat application for my website,do you have source codes?mail to me friend
Shiras
Mar 25th, 2009
Hi Sajith
Your site was really impressing and thanks for a good article. Now I am currently working on ASP.NET. I have an ASP Upload control where I want to restrict the files of a certain limit on the client side (as soon as the user selects the file). Could you please help me out.
Thanks
Shiras
Dipesh
May 20th, 2009
Hi Sajith,
Can you please also let us know the login and logout approach used by gmail. As i was working on a code and facing problem with back button.
Thanks & regards,
Dipesh
Emrah
Jul 7th, 2009
Hi Sajith!
It is a very nice and informative article…Thanks for your efforts.
Jaya
Jul 8th, 2009
Can u tell me how we can implement logout functionality. I am facing problem when back button clicked too fast and javascript can not execute. and we go back I have seen on gmail tha even if we get the previous page but we cant work on it how????
vijay
Jul 12th, 2009
how can i send more mails at time from my mail
Just a second with Iframe | Programming Ideas, Logics, Tips and Tricks
Nov 12th, 2009
[...] There is a saying that using iframe is a bad practise. I don’t know the fact, anyway gmail uses more than 5 iframes to implement all the features and works well. (See Gmail Architecture) [...]
Robin
Nov 26th, 2009
Excellent post.. Reached this while doing some R &D regarding iframe.
Orakkam onnum illa alle ?
lol
aruna
Nov 30th, 2009
Hi Sujit
you proved to be a smart techie………is there any option where we can be invisible at gtalk.
plz do mail me
Great job!!!!!