I have read these two articles complaining about the new style of using hashbangs #! as links. http://www.tbray.org/ongoing/When/201x/2011/02/09/Hash-Blecch  http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs, If you don't know what i mean by  hash-bangs, visit any profile on twitter, then look at the address bar of your browser, what do you see? Well, here is what the address of my profile looks like on twitter http://twitter.com/#!/shrage. Notice the #!?

My argument is, don't blame website developers for abusing the technology given to them, after all, isn't this is what we ask them to do daily just to make a single webpage work in all browsers? Instead, we should take browser developers up to task and demand support for propar ajax/plugin/clientside navigation capabilities.

So here is my proposal to browser developers, but first a scenario. We have a single page www.site.com/index.html which needs to be able to display a profile page using a url like www.site.com/profile/101. The way browsers work currently, we have two problems at hand.

Problem #1 -  When you click on any link from inside the domain, the browser will make a new request to the server which will result in a page refresh. This needs to be changed to allow the developer to cancel navigation requests at his/her choosing (obviously for security reasons the developer should be able to cancal only requests from the current domain)

Problem #2 - If an outside website links to the profile above www.site.com/profile/101, the browser doesn't even know to load index.html at all. The browser will make a request straight for www.site.com/profile/101 which is not what the developer has designed the site for. so we need to give the developer a way to indicate to the browser that every request to profile/101 should be handled by index.html. This can be  handled by introducing another 3xx http status code, ex: 309 which will be a special redirect response that tells the browser to handle this request in javascript at the specified location.

So here is example example javascript code at index.html

[Index.html]

   // This even fires when a user clicks on any link within this page, or, if this page is loaded as a result of a 309 response
    window.onNavigate(function(e){
        // e.location == location clicked too, or original location of the redirect
        if(e.location.indexOf('Profile') == 0){
            e.cancel;
            var id = extractIdFrom(e.location);
            LoadProfile(id)
        });
    }

[Server]

On the server, the developer can write a rule to redirect request to www.website.com/Profile/id with Response Code = 309 and Location = Index.html

Once browsers supports this navigation hook, we can build a clientside framework on top of it, that will extract parameters from the new location url and map them to functions on the client just as server side routing and mvc frameworks do.

<script src="routes.js"/>

    
    // Registers a route to the function LoadProfile, extracting the id from the url and providing it as a function argument.
    routes.registerRoute("/Profile/{id}", LoadProfile);
    function LoadProfile(id){
        $.ajax(...);
    }

Add a Comment

You must log on to comment.