Functional-Reactive User Interfaces in the modern Web Platform
summary
Argues that end-to-end functional-reactive UIs cut boilerplate roughly 50% less code by treating events as streams and using RxJS primitives like Subjects/BehaviorSubject plus operators (map, filter, scan) to hold state; demonstrates RML/Rimmel.js binding streams directly into HTML (click counter, reactive list, drag-and-drop, a Tic‑Tac‑Toe in ~35 lines) and notes native observables are shipping (native observables in Chrome) but missing operators force monkey‑patching; library shows practical success in both large and small projects.
AI-written summary · about
chapters (15)
- 0:00Functional-reactive UIs intro
- 1:05Modern web UI flaws
- 3:15Benefits of functional-reactive programming
- 8:35RxJS fundamentals
- 13:07Making HTML itself functional-reactive
- 14:31Click counter example
- 17:43Event adapters
- 18:48Pipes vs reverse pipes
- 20:16Reactive arrays
- 23:09Drag-and-drop with streams
- 25:40Tic-Tac-Toe in 35 lines
- 27:48Native observables
- 30:14Framework challenges
- 32:04Future of FRP UIs
- 33:52Q&A
related talks
36mFunctional reactive UI with JavaScript
28mReactive Programming Demystified Drink the Kool-Aid
23mReactive Programming Made Simple
42mConquering Time with Functional Reactive Programming
27mReactive Programming Demystified: Drink the Kool-Aid
43mAdvanced patterns in RxJS - Operating heavily dynamic UI’s with RxJS
42mMake Your Frontend Reactive with RxJs
39mReactive Programming