How can I write an interface like Gmail?

https://news.ycombinator.com/item?id=1463353

by gotouday • 16 years ago

83 50 16 years ago

news.ycombinator.com

I am a python hacker. I want to give a gmail-like interface to my web app. What tools are the best to consider??

wangwei• 16 years ago

Why is everyone a hacker these days?

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

vijaydev• 16 years ago

don't we take pride in calling ourselves hackers? Why on earth otherwise are we on HN? :P

Jach2• 16 years ago

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.

thaumaturgy• 16 years ago

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.

ochekurishvili• 16 years ago

ExtJS, now Sencha, is another option.

versesane• 16 years ago

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

brutimus• 16 years ago

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)

Andi• 16 years ago

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

shadowsun7• 16 years ago

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

bobbyi• 16 years ago

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?

TrevorBurnham3• 16 years ago

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.

drhodes• 16 years ago

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.

keyist• 16 years ago

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.

petervandijck• 16 years ago

Plus one for Sammy, it's wonderfully easy to use. It even has templates built-in.

treyp• 16 years ago

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

some1else• 16 years ago

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).

xenoterracide• 16 years ago

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.

snitko2• 16 years ago

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.

midnightmonster• 16 years ago

> 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.

snitko2• 16 years ago

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.

Ygor• 16 years ago

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.

Flow• 16 years ago

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

Or GWT, just like GMail.

atlbeer2• 16 years ago

Not to be snarky but, GMail isn't written in GWT.

GWT though would be a step towards the OP's solution.

fgd2• 16 years ago

How sure are you in your claim? Any proof that GMail is not written in GWT?

TrevorBurnham3• 16 years ago

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

forgotmypasswd• 16 years ago

fixin some typos http://cappuccino.org/ 280north Objective-C

TrevorBurnham3• 16 years ago

Thanks. That's what I get for posting to HN via iPad...

rubyrescue• 16 years ago

also, http://ukijs.org is as powerful and much less code

DanielRibeiro• 16 years ago

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.

chmike• 16 years ago

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.

smallhands• 16 years ago

Dude, i am impressed.WT really rock!.Just one problem how do Python programmer learn C++ fast?

tchvil• 16 years ago

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.

agentultra• 16 years ago

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

gotouday2• 16 years ago

I am playing with pyjamas currently. It is not working properly with chrome. I am trying to resolve that issue now.

swah• 16 years ago

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/

asnyder• 16 years ago

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.

wavesplash2• 16 years 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.

bemmu• 16 years ago

Can you elaborate on this? So it isn't being done by just modifying the DOM with Javascript? Why the hidden iframe?

wavesplash2• 16 years ago

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.

kksm19820117• 16 years ago

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

narcvs• 16 years ago

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.

cvg• 16 years ago

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/

niels• 16 years ago

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

How can I write an interface like Gmail?

Related Stories