How to build the modern, optimistic and reactive user interface, we all want.

on YouTube ↗54m

" summary

Advocates a hybrid stack: render meaningful HTML on the server to hit the initial 14 kilobytes, minimize round trips because coast-to-coast RTT is about 85 ms coast-to-coast, and keep scripts small to avoid TCP slow-start. Uses optimistic rendering and optimistic rendering patterns (Facebook, Pinterest examples), input-driven immediate UI updates, client-side thumbnails in web workers, socket-based reactivity and sync (socket.io), service workers for offline sync, hot code reload to avoid forced refreshes, and explicit reconnection and error reconciliation.

AI-written summary · about

" chapters (11)

1. 0:00Introduction
2. 1:04JavaScript performance and UX
3. 2:12Seven principles for modern UI
4. 6:43Server rendering is not optional
5. 17:21Input reaction and optimistic rendering
6. 27:39Reactivity and eventual consistency
7. 33:06Client-server data transmission
8. 37:21Offline support and sync
9. 41:35Fixing the broken back button
10. 45:25Eliminating page reloads
11. 50:08Predicting user behavior

" related talks

• 30mReactive interfaceArtem Belov · FrontTalks 2018
• 18mThe need for speed - Single-page apps, Optimistic UIs, ReactivityGuillermo Rauch · dotJS 2013
• 48mClientside templates for reactive UITim Oxley · Web Directions Code 2012
• 44mHow to Approach Modern Web ApplicationsNikita Prokopov · HolyJS 2016
• 30mA Nerdy Guide To The Web Trending ConceptsDaniel Afonso · React Brussels 2023
• 01h 18mThe future of chatGuillermo Rauch · JSFoo 2015
• 48mUX Programming for DevelopersYun Jisu · FEConf 2018 Korea
• 22mBringing Back Progressive EnhancementKent C. Dodds · RenderATL 2022