How Asana Handles URLs Without #

Question

You may have seen app.asana.com. If not, you should check this out, this is a very good webapp design.

But I can’t understand how they handle the whole url. Backbone.js or Knockout.js processes the URL with #, and everything after that is just generated.

Asana has no hash and can change the url, how do they do it?

Answer 1

It looks like they are using HTML5 history.pushState(); so they don’t need to refresh the page and therefore they don’t need to use # (hashes) in the URL to go to a specific part of the web application.

Here is a good tutorial about history.pushState(); : https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

This is what Google+ and Facebook use to change URLs without updating.

Hope this helps.

Answer 2

HTML5 Push State: http://spoiledmilk.dk/blog/html5-changing-the-browser-url-without-refreshing-page

The big advantage here is that if you paste the Asana URL directly into the browser (or click on the link from the email), the server sees the full URL and can immediately send the corresponding task data to the client. Previously, we used url fragments, but we needed to make a second trip after loading the application in order to read the fragment in JavaScript and transfer it to the server.