Google-driven Web Development, Chapter 2

Gmail

Here in part two of this preview of Google-driven Web Development, we'll look at Gmail.

There's no way to state the importance of Gmail enough. It was the first of it's kind in webmail programs. All other webmail sites are playing catch up now, and really, Gmail helped take AJAX mainstream. Or at least, offered the first large scale application of AJAX techniques as core technology. My intro for this chapter in the book is short, but I hope it suggests some of the same.

Gmail has been unique among web mail services from the moment of its release. The service offers over 2 GB and counting of storage, uses a JavaScript-driven rich user interface, and provides Google's powerful search capabilities for email. Web mail accounts are often thought of as throw away accounts, something for signing into other online systems to prevent Spam collecting in your real email account's Inbox. Gmail is meant to change your impression of web mail. Gmail is meant to be a web mail service that you'll want to use.

Web mail suffers this reputation for good reason. Prior to Gmail, web mail was slow and awkward to use. Login. Wait. Select Inbox. Wait Select mail to read. Wait. And, finally, read your mail. To make a web mail service that people would want to use, the developers of Gmail made extensive use of JavaScript. This browser-side language makes Gmail quicker and more responsive and gets web mail closer to a desktop mail program's capabilities. JavaScript, like web mail, suffers from a bad reputation, mostly due to early security vulnerabilities and the proliferation of poorly implemented JavaScript sites. Gmail stands as a testament to what good, smart JavaScript development can produce. This chapter will detail how JavaScript creates such a unique web mail experience.

In this chapter, we'll cover:

• The Gmail Difference
• Framing Up the Page
• Data Parsing and HTML Generation
• XMLHttpRequest and AJAX
• Document Object Model Control

Framing Up The Page

After a brief intro to how Gmail works, hopefully touching on some of the lesser known features for advanced Gmail usage, we get into the internals of the app's architecture. The Gmail UI is all in JavaScript, so it's easy to look under the hood and see how the app works. My intent here is not to reveal any "secrets" of Gmail but rather to just give developers a glimpse into the site's architecture and design and to show how JavaScript-based web development offers possibilities for all the limitations that the language may have (though obviously that last line is a debatable point).

Gmail uses a series of frames, a mixture of both traditional frameset frames and inline iframes, to create a framework -- no pun intended -- around which to manipulate Gmail's user interface. When you think of frames, you may think of those awkward sites with a frame used for navigational links on one side of the browser window and another frame for content on the other side. This is certainly common, but frames can also serve as a proxy between the server and the user. Frames can load data and the JavaScript within one frame can prepare that data for presentation in another, without the user being privy to (or slowed down by) the mechanics of this data loading and manipulation.

In Gmail there are several frames in use at any one time, but the average user is completely unaware of this. The user only sees one of the frames, the one that contains mail client interface. There is one more primary frame hidden away from view, and several iframes hidden in the UI.

Generally, there are two frames — main and js. I think the names say it all. main is the page that you see when using Gmail. js is the frame that loads the JavaScript that makes up the Gmail UI engine.

To build the initial interface, Gmail reads a series of JavaScript arrays that contain the various bits of the page that are displayed, plus some additional meta data concerning the display. These arrays are almost analogous to the html in a static web page. Once a user logs on, the main frame is loaded with a series of these JavaScript arrays that represent the user's Inbox. HTML is created from these arrays.

From there, we spend some time in the book going through the JavaScript arrays, what the possible points in the data arrays could/do represent, and the function that builds the page from these arrays. Everything in Gmail is built from JavaScript, which makes for an interesting application design.

For a sample array, see this view of my Inbox in JavaScript:

  D(["t",["109cf7e500109440",0,1,"6:18 am","
      DeryckHodge",
      "» ", "Search Syntaxes",
      "Also, don't forget to check out the special search 
          syntaxes and operators. Gmail gives you …",
      ["^t"], "", "109cf7e500109440", 0, 
      "Mon Mar 6 2006_6:18 AM",0,"",0,0],
      ["109cf7d208f6fb43", 0, 0, "6:16 am",
      "Deryck     
          Hodge",
      "» ",    "Liking Gmail?",
      "Hey, dude. How do you like gmail? kewl, huh?!? Cheers, 
          deryck -- Deryck Hodge http://www …", [],
      "", "109cf7d208f6fb43", 0, "Mon Mar 6 2006_6:16 AM",0,"",0,0],
      ["109cf79a5a9ec48c", 0, 0, "6:13 am",
      "Gmail 
          Team"," 
      » ", 
      "It\'s easy to switch to Gmail!","Did you know that Gmail was voted 
          #2 in PC World's Top 100 products of 2005, right after 
          …",
      [], "", "109cf79a5a9ec48c", 0, "Mon Mar 6 2006_6:13 AM", 0, "", 
      0, 0], ["109cf79a5491ae6a", 1, 0, "6:13 am",
      "Gmail 
          Team","» ",
      "Gmail is different. Here\'s what you need to know.","Auto-
          save, keyboard shortcuts, customized addresses and more. Sound 
          cool? We think so too …",
      [], "", "109cf79a5491ae6a", 0, "Mon Mar 6 2006_6:13 AM", 0, "", 
      0 ,0]
  ]
  );

No privacy concerns from me. :-) And I think you can get the idea of how each of the parts of the UI is represented in JavaScript, in a series of D arrays. The Gmail Agent API offers a more indepth look at these arrays, though it's based on an older version of Gmail.

AJAX

I also try to offer an introduction to AJAX and creating a basic XMLHttpRequest. I also use some obfuscated code from Gmail to illustrate how the simple XMLHttpRequest setup and request cycle is used almost verbatim in Gmail. There are some interesting choices made in Gmail, too, like populating an array with a few initial XMLHttpRequest objects which can be pulled from the array at any time. Gmail also makes nice use of JavaScript closures and passing the current XMLHttpRequest around as a function context. This makes handling multiple XMLHttpRequest objects clean and neat.

Gmail really is interesting and import in more ways the one.

On Friday, I'll preview the next chapter, a look at Google Reader and GData. We'll be putting the X in AJAX next time. Until then...

Posted by deryck on February 12, 2007

Post a comment

Comments temporarily closed.