Hello,
I was just wondering what is the advantage of client side architecture GMail is following. I mean what is the advantage of multiple iframes on the page; one with html layout and second with all the javascripts?
Isn't it more complicated to execute all the DOM operations? (you need to search trough js ifram<->top<->html iframe).
What do you experts think?
It's an "endless frame" used for reverse ajax (the server sends a message to the client when an event happens, as opposed to the normal ajax where the client asks the server something). From wikipedia:
A basic technique for dynamic web application is to use a hidden IFrame HTML element (an inline frame, which allows a website to embed one HTML document inside another). This invisible IFrame is sent as a chunked block, which implicitly declares it as infinitely long (sometimes called “forever frame”). As events occur, the iframe is gradually filled with script tags, containing JavaScript to be executed in the browser. Because browsers render HTML pages incrementally, each script tag is executed as it is received.
One benefit of the IFrame method is that it works in every common browser. Two downsides of this technique are the lack of a reliable error handling method, and the impossibility of tracking the state of the request calling process.
I'm quite sure it's not the iframes being used for push "reverse-ajax" stuff. Gmail uses the Google Closure Library's goog.net.BrowserChannel system to handle those, and uses xhr and activex htmlfile transports. (See: http://closure-library.googlecode.com/svn/docs/class_goog_net_BrowserChannel.html)
That's all I know for sure, but I guess at least one of the frames would be for managing history.
In short: for client-side performance.
Because GMail has a lot of Javascript (around 700 KB), it takes some time to download and run everything. By using a separate iframe, downloading and running the Javascript will not block the browser UI. Scripts and UI events in separate iframes will be executed in parallel by the popular browsers. This approach also allows you to construct a complete DOM for the interface in the other iframe while the scripts are still being executed. This article describes common solutions to the blocking-scripts problem.
Another iframe is required to allow the browser history to work. How it works exactly can be seen in the implementation in Google's Closure Library.
As for the impact on complexity of making sure the correct DOM is manipulated: the constructors of UI components in GMail (also part of the Closure Library) all take an optional DOM helper argument. This helper is bound to a particular DOM, which may be in a different frame. Manipulating different DOMs is completely built into the design of these UI components.