{"id":626,"date":"2011-07-22T09:28:31","date_gmt":"2011-07-21T20:28:31","guid":{"rendered":"http:\/\/thunderguy.com\/semicolon\/?p=626"},"modified":"2011-07-22T13:46:59","modified_gmt":"2011-07-22T00:46:59","slug":"html5-barcamp-auckland-5","status":"publish","type":"post","link":"https:\/\/thunderguy.com\/semicolon\/2011\/07\/22\/html5-barcamp-auckland-5\/","title":{"rendered":"HTML5 — Barcamp Auckland 5"},"content":{"rendered":"

The last proper session I went to at Barcamp Auckland 5<\/a> was “Extreme AJAX – beyond the hashbang, building a robust single page JS framework and URL schema”, presented by Barry Hannah (@barryhannah<\/a>) & Mark Zeman (@markzeman<\/a>). They worked on the excellent newzealand.com<\/a> redesign and gave some insight into its engineering.<\/p>\n

At a high level, the most interesting part of the design is the navigation: no hierarchy, just tags. Opinions were divided, but I like the purity and elegance of the idea, and the implementation gives a lot of structure to the tags.<\/p>\n

At a low level, they described the initial URL scheme they came up with. The site is implemented as a single-page site, with all content updates done with Ajax. For modern browsers, they use the history API<\/a> to seamlessly change the URLs. For example, if a user clicks a “Travel” link, the browser address bar will switch from http:\/\/nz.com\/<\/tt> to http:\/\/nz.com\/travel<\/tt> without refreshing the whole page. (Opera offer a good history API introduction<\/a>.)<\/p>\n

Browsers that don’t support the history API instead use Google’s Hash fragments specification<\/a>: browsers would see the URL http:\/\/nz.com\/#!travel<\/tt>, while web crawlers would see http:\/\/nz.com\/?_escaped_fragment_=travel<\/tt> . (See the spec for the reasoning behind this.)<\/p>\n

Eventually they realised they didn’t need to use hashbangs at all. HTML5 browsers, with their fancy history API, end up being able to use plain URLs like http:\/\/nz.com\/travel<\/tt> without ever refreshing the whole page. But crawlers can use the same URLs to fetch whole pages — the backend can easily tell whether a request is coming from a crawler or a browser. And less capable browsers can just use a plain hashy URL like http:\/\/nz.com\/#travel<\/tt>.<\/p>\n

This is quite a nice solution, except that if a web crawler does get hold of an URL like http:\/\/nz.com\/#travel<\/tt>, it will only ever see the site homepage. That’s an SEO fail. But they point out that this probably won’t have much of an impact because the proportion of such links floating around won’t be high.<\/p>\n

They talked about various libraries they used to do this: jQuery plugins Pjax<\/a> and History.js<\/a> and the JavaScript MVC framework Backbone<\/a>. (Poking around the Pjax page I discovered a very useful online Closure compiler service<\/a> that actually hosts compiled code!)<\/p>\n

I really enjoyed seeing this lively presentation from a team who are pushing a large public website into the HTML5 world. I’m feeling inspired for my next project!<\/p>\n","protected":false},"excerpt":{"rendered":"

The last proper session I went to at Barcamp Auckland 5 was “Extreme AJAX – beyond the hashbang, building a robust single page JS framework and URL schema”, presented by Barry Hannah (@barryhannah) & Mark Zeman (@markzeman). They worked on the excellent newzealand.com redesign and gave some insight into its engineering. At a high level, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[75,44,62,21,40],"class_list":["post-626","post","type-post","status-publish","format-standard","hentry","category-general","tag-hashbang","tag-barcamp","tag-html5","tag-javascript","tag-jquery"],"_links":{"self":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts\/626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/comments?post=626"}],"version-history":[{"count":9,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts\/626\/revisions"}],"predecessor-version":[{"id":637,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts\/626\/revisions\/637"}],"wp:attachment":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/media?parent=626"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/categories?post=626"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/tags?post=626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}