Hacker News new | ask | show | jobs
by wavesplash 5841 days ago
Gmail's interface is unique in that the rendering is being done by a Javascript Controller in a hidden iframe. Gmail itself only requests raw data over the wire.

If you just want the look and feel of Gmail, there are plenty of frameworks referenced in the comments (Cappucinno, YUI2, Sencha, etc) that can give you the basic layout. But if you want the mimic the speed/functionality, it'll require getting dirty with Javascript controller design in the browser.

2 comments

Can you elaborate on this? So it isn't being done by just modifying the DOM with Javascript? Why the hidden iframe?
Sure. The hidden iframe allows you to do 3 things: 1) preserve state across view changes (mail vs. preferences, etc) 2) isolate code 3) reduce over-the-wire data size because all the rendering/UI generation is happening in-browser.

If you take a look at gmail in a debugger you'll see there are 4 iframes. The controller is the 'js_frame', the 'canvas' contains the graphic UI elements.

Leaving the canvas in its own iframe allows it to be reloaded separately without affecting application state.

Javascript still modifies the canvas iframe DOM. But that modification is cross-frame from the controller iframe.

I used a similar frame-based technique back in '97 when our enterprise startup needed a snappy native-looking zero-deploy UI.

The History class provided by GWT offers this functionality. Of course, you need Java for this.