Home > Architecture, Programming > URL Design, Routing, Navigation and History

URL Design, Routing, Navigation and History

This post is part of a series of posts on Client-Side Web Application Development using JavaScript.

Some of my notes from links given below:

Explicit URL Design

URL Design is the process of designing the structure of your application’s URL. Do not leave URL Design to the framework / library you are using. Make an explicit choice about the URLs used by your application.

Routing

In a Single Page Application you want the URL to change as you navigate between views. This will provide the application the ability to deep link into specific parts of the application. Routing is the process of selecting a view based on the URL.

Location Hashes

In a Single Page Application, when the URL changes you do not want to go the server to get the page when the URL changes. This is achieved typically by using location hashes in the URLs. Location hashes are supported in all the browsers, but they are not understood by the server.

When when the Search Engine Bot sends a Hash url to the server the server the server ignores the hash and will not be returning the right page. People workaround this by using a hack called hash bangs that is supported by Google’s Search bot. Hash bangs have been criticized by several Smart people and are not recommended.

HTML5 History API – pushState API

The alternative that is acceptable is HTML5 History – pushState based URLs. This allow to server pages in the client without going to the server on a URL change. But the issue with HTML5 history – pushState API is that it is not supported in all the browsers. So the routing engine / history library you select should be a Polyfill for unsupported browsers.

What ever polyfill hack / workaround the client-side library uses needs to be understood by the Web Server and the right pages should be served for SEO scenarios.

Stateful Routing

Traditionally these routing engine implementations were inspired their counterparts on the server-side. Server-side is a stateless environment so these routing engines on the server were designed with that limitation in mind. The client-side on the other hand is a different story where you can leverage the stateful nature. Ember’s routing library implements a stateful routing. It is something to keep an eye on.

Parameters

Can you deep link to specific views in your Single Page Application?

If you can deep link are the URLs SEO friendly, are they readable?

Should you use location hashes which are supported in pretty much all browsers or should you use HTML5 Push state based navigation bowser support for which is still poor?

Do you need SEO? SEO requirement has an impact on location hashes. Can you avoid Hash bangs if you choose the right routing / navigation / history library?

Reading List

http://warpspire.com/posts/url-design/

http://codebrief.com/2012/03/make-the-most-of-your-routes/

http://blog.benward.me/post/3231388630

http://www.adequatelygood.com/2010/7/Saner-HTML5-History-Management

Advertisements
  1. August 6, 2013 at 2:04 pm

    I’m pretty pleased to find this page. I want to to thank you for your time due to this wonderful read!! I definitely savored every bit of it and I have you saved to fav to look at new stuff on your site.

  1. October 22, 2012 at 3:25 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: