Reactive interface

on YouTube ↗30m

" summary

The talk explains techniques of reactive UI design for browser JavaScript that make rendering faster by changing how updates are scheduled and composed. It names the problem as single-threaded, transactional rendering (empty screen → loading → interface) and proposes practical Pareto-focused methods to spend ~20% effort to achieve ~80% faster rendering using reactive design patterns already used in UX-first products.

AI-written summary · about

" chapters (9)

1. 0:00Reactive interfaces introduction
2. 3:11Slow interface loading
3. 7:14JavaScript load optimization
4. 10:47Fonts and FOUT
5. 13:44Image optimization
6. 17:20Content placeholders
7. 21:55SVG component approach
8. 25:35Design systems and loading
9. 27:45Progressive rendering

" related talks

• 54mHow to build the modern, optimistic and reactive user interface, we all want.Guillermo Rauch · ColdFront 2014
• 39mReactive ProgrammingSebastian Springer · enterJS 2016
• 40mReactive Programming: A Better Way To Write Frontend ApplicationsHannah Howard · Strange Loop 2018
• 34mEffective Reactive ArchitectureBenoît Quenaudon · droidcon London 2019
• 18mThe need for speed - Single-page apps, Optimistic UIs, ReactivityGuillermo Rauch · dotJS 2013
• 48mClientside templates for reactive UITim Oxley · Web Directions Code 2012
• 26mWhat Every Developer Must Know About User-Interface Design and UXNiyam Bhushan · Great Indian Developer Summit 2015
• 34mFunctional UIs and Unidirectional DataflowMikael Brevik · JSConf Budapest 2015