pushState to the Future: Progressive Enhancement Using HTML 5 pushState

on YouTube ↗40m

" summary

Twitter implements HTML5 history as a progressive enhancement layered on full server rendering: the server returns JSON-wrapped server-rendered HTML plus module list and init data, the client loads modules with LoadRunner and swaps a DOM container, and history entries use pushState/replaceState so URLs never change. Implementation adds two new JS modules, uses Hijax + server-side rendering, and includes workarounds for Firefox 640K state limits and WebKit spurious popstate; result is faster in-app navigation, low server rearchitecture cost, and graceful fallback.

AI-written summary · about

" chapters (7)

1. 0:00Start
2. 8:26Title Param Support
3. 15:27Core Functionality
4. 23:00UI Component
5. 23:36Data Component
6. 31:02Uses of reload
7. 31:36Final Thoughts

" related talks

• 14mThe HTML5 History API: PushState or bust!Anson Parker · Web Directions Code 2012
• 22mProgressive EnhancementJames Halliday · NodeConf.eu 2013
• 33mPitfalls and Opportunities of Single Page ApplicationsJörn Zaefferer · jQuery Conference 2012 San Francisco
• 30mThe State of HTML5 - Inaugural AddressPaul Irish · JSConf.eu 2010
• 30mDoes Progressive Enhancement Have a Place in Today's Web?George Brocklehurst · WindyCityRails 2016
• 22mThe (Abundant) State of the WebJad Joubran · dotJS 2026
• 40mWeb Applications of the FutureIlya Pukhalskiy · FrontTalks 2013
• 54mHow to build the modern, optimistic and reactive user interface, we all want.Guillermo Rauch · ColdFront 2014