How can I write an interface like Gmail?

Imo, the most important technique (besides standard ajax with js lib of choice) is making use of hashchange and organizing your behavior into 'routes' based on the hash. You'll notice that Gmail does this -- it has URIs ending with #inbox, #label/action, etc.

Using hash routes allows you to keep track of state and decouple event handlers that set state from code that updates the page. Plus you get back button functionality and bookmark support.

Some background info on hashchange: http://blog.whatwg.org/this-week-in-html-5-episode-3

jquery library for dealing directly with hashchange: http://benalman.com/projects/jquery-bbq-plugin/

Higher-level jquery library for handling hashchange: http://code.quirkey.com/sammy/ . It has more assumptions and imposes more constraints on the structure of your code. But in return you get route parsing and a DSL.

If you go through the examples/tutorials in those two libraries you should gain enough knowledge to get started.

I'm not sure if you asking exactly this, but here's what I'll tell you. We're building a frontend interface for our webapp now (almost finished) and I have to say it's a difficult design task, in terms of code, of course. The truth is that libraries like jQuery have really nothing to do with building interfaces. They have a couple of effects, a couple of useful shortcuts (like selecting dom elements easily), a couple of solved issues (like browser compatibility), but if you're going to write an interface - be ready to give a good thought about how to arrange the code, so that it would not look ugly.

Especially because we're talking js now, I think it's a hell of a task, as I have this impression the language was designed to duplicate as much code as you possibly can. It's not Python or Ruby and you have to understand it inside out to make it right. In Ruby, for example, it's easy to write nice looking code even if you're a beginner. I haven't tried ExtJS or some other frameworks, maybe they provide some necessary background that helps you organize things better. But jQuery and Prototype definitely don't do that. Then there's the question of testing, which is a pain in the ass in javascript, even though we have nice tools like jspec.

So I'd be really careful. Chances are you'll end up with lots of crappy code in js that would be hard to maintain, especially if your frontend is big and you don't have experience in creating interface frameworks.

Well you definitely need something to handle AJAX. I pick between Prototype and jQuery, depending on the project. Sometimes I mix and match with both, since jQuery can coexist.

Next, you need to decide whether you will transport XML/JSON and have client-side code stick in in the DOM, or eval the AJAX response. In the latter case, you need to be generating JavaScript on the server-side. I know the Ruby on Rails RJS piece of the stack can be extracted from Rails 3, but I'm unsure about Python, so you might be better off taking the former approach.

There's a lot you can do with regards to animation in Prototype/jQuery alone, but I like Scriptaculous, and I've heard good things about MooTools.

Making a GMail-like interface isn't all about XML-HTTP-Requests though. There's a lot of value in nailing the usability, the basic concept. Then there's maintaining the history, undoable actions, HTML fallback and such.

My best advice is to start building a decent static interface from the ground up, and when you have it nailed, just augment all the minor GET actions with AJAX first (like going back to the index after reading an email). Then enhance primary POST and UPDATE actions (replying, marking with a star, moving to archive).

Half way through, you'll probably notice most of the page reloads that remain are acceptable. At that point, focus on refining the original concept with new methodologies you picked up along the way.

It's just the way I do it though, make sure you investigate other suggestions to find a perfect fit (by the looks of it, GWT is quite a paradigm-shift).

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.

Not Python, but there are a few Rich Internet Application (RIA) frameworks you should look at if you don't want to do low-level HTML/CSS/JS work (still the most common approach, mind you). GWT is the most popular, but probably only worth using if you're Java-fluent. Here are a couple of others:

Caoouccino/Objective-J, from the YC-funded 180north guys. It's an Onjective-C like language that compiles to web apps (and now Mac apps, too). It was used recently to create a Github issue tracker app, which looks pretty sweet.

http://cappucinno.org

No one seems to have mentioned SproutCore, which had a lot of buzz for a while since Apple was using it to develop their own webapps. It had a 1.0 release just a few months ago, but the buzz seems to have died down and I haven't seen any new projects using it. Apple is using something else now. Still, it's one option to check out:

http://sproutcore.com

Finally, if you do wind up working at the JavaScript level, I strongly recommend that you try CoffeeScript, which has a very Python-like syntax yet compiles directly to JavaScript. I've used it with jQuery for some pretty complex apps, and it's definitely made me a lot more productive:

http://coffeescript.org

Not to quaffle, but please do add 'Ask HN' the next time you post a question.

http://cappuccino.org/ and some python on the backend for REST interaction.

Or GWT, just like GMail.

I'm currently evaluating WT (www.Webtoolkit.eu) which is the C++ equivalent of GWT. I noticed that WT examples were much faster than GWT's examples on my iPad. For python, I think Django should be the way to go.

Although you're a Python hacker, you may want to save yourself some time and use NOLOH (http://www.noloh.com). It handles most of the aspects of development that usually distract you and let you focus on your core application. It features a lightweight and on-demand core that offers cross-browser compatibility, automatic AJAX, search-engine-friendly, numerous syntactic features to make developing in it a joy, and much much more.

You can read more about it the website, user blogs, or in this month's php|architect magazine cover story http://www.phparch.com/magazine/2010/may/.

Note that if you're really interested you can join us in our #noloh IRC room and someone can help you put together a prototype in relative short order.

Disclaimer: I'm a co-founder of NOLOH.

I'm a Mootools fan myself. I use it over the seemingly more popular libs like jquery because very little of my JS code is actually touching DOM. I usually start my projects by creating all my "classes" (actually prototypes, etc, but classes make sense to most OO people).

I primarily code in Py, but I do really want to sit down with GWT some day, it looks badass.

In a lot of my projects I just use raw JS. Big libraries scare me sometimes and honestly, JS isn't that hard if you know what you're doing and know how to code around the main browser issues. I like some of the functional paradigms from mootools though (well any other lib for that matter), and the XHR handling.

(sorry I didn't really answer your question -- just rambled a bit before I go to sleep)

Visually, perhaps you can take something from this example which mimics Google wave layout using the ukijs javascript framework.

http://ukijs.org/examples/core-examples/wave/

I'm working on a neat project to integrate pylons with pyjamas for this very task.

Pyjamas is an RIA framework that started as a port of GWT to Python. Development has recently sparked up and they now offer new features beyond what GWT can offer.

In order to integrate pylons with pyjamas, I've started work on a JSONRPCController base class that I hope will eventually be included in pylons. Eventually I'd like to add other things like a project template and setuptools commands for compiling and deploying a pylons+pyjamas app.

You can get a peek at what I've started on my blog: http://agentultra.com

I think you could limit python for server tasks(data read/write, security and authentication). We use Erlang for that.

Then choose in which language the server talks to the world(browsers, mobile apps, native apps, flash,...) usually through json or xml services, REST or not. You are building your API at the same time.

For each platform you can choose different techniques depending on your skills and needs. I'm not a fan of auto-pilot frameworks. I always felt they force me to think their way to build my thoughts(a personal limitation probably).

When we faced this decision to build our app, we took HTML5. We know it well and it works on all platforms. Native apps are cool, but we can't afford them as a startup.

Then on the browser, when you get the data you have to represent them. I was a fan of XML+XSLT and used to templating logic on the browser. We use JSON now, and have built a template engine(PURE) for a similar approach and get a fast HTML rendering of JSON data.

And we took jquery to cope with the DOM and browser differences.

The server streams only data, the network likes it. The browser render all this very fast. And this makes a very responsive app.

here's how http://code.google.com/closure/ by google themselfs

Why is everyone a hacker these days?

BTW, GWT is one option. Some JS libraries such as JQuery is another.

I use a javascript MVC framework called Claypool for structuring my client-side code. It's really good! http://docs.jquery.com/Plugins/Claypool

GWT is certainly a very useful tool for rich client web applications. If you are familiar with Java, it might be the quickest way to start building very complicated javascript based interfaces.

You better ask: "How can WE write an interface like Gmail?"

You need JavaScript, and though there are lots of libraries that make things simpler, you'll need a good understanding of JavaScript and preferably have a good understanding of the DOM as well.

Libraries will help you with the DOM, but not a ton. They won't help you with the js.

I suggest you start with a library, but make sure you understan what you're doing in terms of the DOM.

ExtJS, now Sencha, is another option.

There's also pyjs if you want to skip the writing of javascript and just write python. It works like gwt, but in python. http://pyjs.org/

on top of things like using Ajax you might want to read up on RESTful web services for building services. Jquery and Jquery UI are great otherwise.