How can I write an interface like Gmail?
I am a python hacker. I want to give a gmail-like interface to my web app. What tools are the best to consider??
24 comments
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.
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.
if you can map these hashes to actual URLs, you can get rid of hashes entirely by using HTML5's history methods. see: https://developer.mozilla.org/en/DOM/Manipulating_the_browse...
you can fall back on hashes for browsers without support.
the first implementation i've seen of this is in Flickr. i was amazed when i ran into it yesterday. you have to be signed in to preview the new photo pages, but the zoomed/lightboxed photo pages use HTML5 history in compatible browsers and fall back when they can't. their JS is viewable at: http://l.yimg.com/g/combo.gne?j/history-manager.js.v90829.14
the first implementation i've seen of this is in Flickr. i was amazed when i ran into it yesterday. you have to be signed in to preview the new photo pages, but the zoomed/lightboxed photo pages use HTML5 history in compatible browsers and fall back when they can't. their JS is viewable at: http://l.yimg.com/g/combo.gne?j/history-manager.js.v90829.14
Plus one for Sammy, it's wonderfully easy to use. It even has templates built-in.
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.
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.
> I have this impression the language was designed to duplicate as much code as you possibly can
You're right about the limits of jquery, but JavaScript is not like Java inasmuch as repetitious JavaScript is a near-sure sign that you're doing it wrong. I'm working on a larger script too these days, and code organization is a problem for me, too, but repetition isn't really.
You're right about the limits of jquery, but JavaScript is not like Java inasmuch as repetitious JavaScript is a near-sure sign that you're doing it wrong. I'm working on a larger script too these days, and code organization is a problem for me, too, but repetition isn't really.
unDRY code is a problem for me in JavaScript probably because I don't have too much experience. The point is: you can write DRY code in js, it's just not as easy as in Ruby. Also, here's an example: http://stackoverflow.com/questions/3077335/how-do-i-implemen...
I managed to find a better answer than it is suggested there, though.
I managed to find a better answer than it is suggested there, though.
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).
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.
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.
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.
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.
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
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
also, http://ukijs.org is as powerful and much less code
Be very wary of SproutCore. It is not only a Rich Internet Application framework. It is also a MVC framework in javascript, which adds a lot of complexity to the design (mostly when compared to GWT and cappucinno).
On the other hand, its designer tool is the only free one among javascript frameworks. However, it is quite new, and a bit buggy.
On the other hand, its designer tool is the only free one among javascript frameworks. However, it is quite new, and a bit buggy.
fixin some typos
http://cappuccino.org/ 280north Objective-C
Thanks. That's what I get for posting to HN via iPad...
Not to quaffle, but please do add 'Ask HN' the next time you post a question.
If it's a "self" post (has no domain name after the link indicating an external link) and it's a question, who else would he be asking?
Not that I have a dog in this race, but sometimes seemingly arbitrary convention can be exploited. For instance, some pioneering lad[y] might be compiling a collection of Ask-HN-questions. It's easy to see why it would be nice to have "Ask HN" in the title. Convention implies "easier to parse", and that makes programmers happy.
Not everyone uses the web interface. For instance, I read HN via RSS. If I see a post without "Ask HN" or a similar prefix, then I expect to be taken to an article. It's a useful nicety.
http://cappuccino.org/ and some python on the backend for REST interaction.
Or GWT, just like GMail.
Or GWT, just like GMail.
Not to be snarky but, GMail isn't written in GWT.
GWT though would be a step towards the OP's solution.
GWT though would be a step towards the OP's solution.
How sure are you in your claim? Any proof that GMail is not written in GWT?
Here is proof:
http://news.ycombinator.com/item?id=56758
(Paul Buchheit was GMail's creator and lead developer)
Also, here is more proof:
http://news.ycombinator.com/item?id=190151
You could tell me: "OK, but it doesn't prove that current GMail is not in GWT. It may have been rewritten". I'd answer that:
- using firebug and looking at the js scripts loaded by GMail, there is no trace of GWT (things such as *.nocache.js scripts). They might have obfuscated to hide it, but why do that?
- if Google indeed rewrote GMail using GWT, they would have announced it, like they did for Wave / Adwords.
More discussion in this other thread: http://news.ycombinator.com/item?id=1470633
http://news.ycombinator.com/item?id=56758
(Paul Buchheit was GMail's creator and lead developer)
Also, here is more proof:
http://news.ycombinator.com/item?id=190151
You could tell me: "OK, but it doesn't prove that current GMail is not in GWT. It may have been rewritten". I'd answer that:
- using firebug and looking at the js scripts loaded by GMail, there is no trace of GWT (things such as *.nocache.js scripts). They might have obfuscated to hide it, but why do that?
- if Google indeed rewrote GMail using GWT, they would have announced it, like they did for Wave / Adwords.
More discussion in this other thread: http://news.ycombinator.com/item?id=1470633
Gmail was written using Closure library built by google itself. Google release it for open source community now.
That is not proof, just another statement that means nothing without supporting data.
Also, if GMail is such a successful use case for Closure library, one could wonder why did they build Google Wave client with GWT?
Also, if GMail is such a successful use case for Closure library, one could wonder why did they build Google Wave client with GWT?
GMail predates GWT by at least 2 years.
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.
Dude, i am impressed.WT really rock!.Just one problem how do Python programmer learn C++ fast?
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.
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)
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/
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
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 am playing with pyjamas currently. It is not working properly with chrome. I am trying to resolve that issue now.
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.
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.
BTW, GWT is one option. Some JS libraries such as JQuery is another.
don't we take pride in calling ourselves hackers? Why on earth otherwise are we on HN? :P
I don't remember where I read it, but you're only a true hacker if some arbitrarily large enough community has bestowed that label upon you. As of today, hacker is almost synonymous with programmer, and people who can compile a C++ program sometimes think themselves as 'hackers'. It's kind of sad, but I don't really care. The media has long since killed the term for general usage.
We better start a Hacker Certification Program to make sure we can sort the true hackers from the fake ones.
Question 1: What is your hacker handle?
A1: Zero Cool, A2: Crash Override, A3: Acid Burn, A4: Cereal Killer (select one)
Question 1: What is your hacker handle?
A1: Zero Cool, A2: Crash Override, A3: Acid Burn, A4: Cereal Killer (select one)
Heh, hell yeah.
Question 2: Which of these systems do you have control over? (Circle all that apply.)
A1: National Electric Grid A2: Local Electric Grid A3: Any Television Station A4: Any Cellphone Tower A5: Any Satellite A6: Your neighbor's wireless router
Question 2: Which of these systems do you have control over? (Circle all that apply.)
A1: National Electric Grid A2: Local Electric Grid A3: Any Television Station A4: Any Cellphone Tower A5: Any Satellite A6: Your neighbor's wireless router
ESR's "How to become a Hacker" guide lists:
"Has a well-established member of the hacker community ever called you a hacker?" as a requirement. I guess that's what you were thinking of.
http://catb.org/esr/faqs/hacker-howto.html#hacker_already
http://catb.org/esr/faqs/hacker-howto.html#hacker_already
The term "hacker" has become so diluted by forums like this one that it's totally meaningless. Calling yourself a hacker at this point is just a form of self-aggrandizement.
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.
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.
[deleted]
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.