Fluent is O’Reilly’s conference dedicated to the Web Platform and all that entails, with a focus on JavaScript and HTML5. In 2013, over 1000 attendees and speakers like Brendan Eich, the creator of JavaScript and CTO of Mozilla, Paul Irish of Google, and CSS guru Lea Verou came together to learn, share, and network.
One speaker at Fluent 2013 whose talk was particularly well received was Todd Kloots of Twitter who spoke about HTML5’s pushState API and demonstrated how it was used in Twitter’s Web-based interface.
Some key parts of Todd’s talk include:
- The opportunity Twitter saw in pushState [at 01:45]
- What you had to do with dynamic URLs before pushState [at 02:46]
- A summary of the pushState API [at 06:10]
- Gotchas and browser support [at 07:58]
- How pushState sped up navigation on Twitter.com without re-architecting [at 12:15]
- What Twitter had to do server-side to make progressive enhancement work [at 19:11]
- Final thoughts [at 31:37]
- Q&A [at 32:15]
The HTML5 History API makes it possible to manipulate the content of a Web browser’s history stack using the pushState method. Whereas moving backwards or forwards through the browser’s history had been possible in JavaScript for years, pushState allows developers to add and modify history entries which is particularly useful in situations where a page has not changed in a way in which a browser would usually detect a page change (for example, dynamically with JavaScript using Ajax).
Twitter coupled pushState with server-side rendering to increase the performance of their Web-based interface. Rather than have browsers jump to an entirely new page, new pages would be requested through Ajax requests, rendered straight into the existing DOM, and pushState would then manipulate the browser so that the browser’s history looked as if a totally clean page had been loaded.