Wednesday, September 15th, 2010
pushState + node.js on the Server Side
Category: Node
-
-
var stateObj = { foo: "bar" };
-
history.pushState(stateObj, "page 2", "bar.html");
-
This would change the URL bar to http://example.com/bar.html without forcing the page to reload, allowing full JavaScript applications on the client-side. This is supported in Firefox 4, Safari, and Chrome.
Ben Nolan has been doing some interesting work exploring using pushState + JQuery but on the server-side using node.js in order to get the advantages of pushState while still being search-engine and accessibility friendly:
The number one downfall of javascript apps, is that there are now pages in your app that can’t be linked to - nor can they be crawled by google, or scraped by any other site that uses the http protocol. Building exciting new apps that ‘break the internet’ isn’t cool.
But if you can run your entire app on the server side - then if someone goes to http://yourapp.com/search/myterms - node.js can load your page on the server, recognize the url, run the correct javascript code to update the state as the browser would - then send it down the wire. So that non-javascript clients can access the same content that a desktop browser can.
Related Content:
Browser Support: Firefox 4, Chrome 6, Safari 5, Mobile Safari on iOS 4+ (!)
Glen Murphy (Chrome Design Engineer at Google), took advantage of the pushState in a nice example he created 2months ago, take a look how pushState works. Pretty cool!
http://bodytag.org/rollstate/
@MohamedMansour – The demo maybe cool, but it broke the Back button behavior. The history is much longer than the links you have clicked, so it broke user experience.
Maybe I overlooked something, bug what’s the point?? I think its
prettyugly wrong approach.@steida I think the point is to be able to make rich HTML5 + JavaScript applications without loosing support for non-javascript user agents and to avoid redoing much of the work in the server.
Please post an article if you have a good demo. No, http://bodytag.org/rollstate/ is not a good demo.
@edwinm Please, no snide remarks on other users here on Ajaxian. Let’s keep the conversation respectful and fact based.