Solving behavioral complexity with FRP
summary
Presents using Functional Reactive Programming plus functional composition to manage frontend behavioral complexity, implemented as a TypeScript + React prototype built on RxJS streams and tiny custom atoms. Demonstrates per-card observables so only changed cards re-render, uses pairwise to get previous/new values for animated transitions, computes positions with pure functions, and combines ResizeObserver, scroll events and debounce to enable inexpensive virtualization while smoothing animations and scrolling.
AI-written summary · about
chapters (16)
- 0:00Introduction
- 1:02Frontend complexity problems
- 3:40Behavioral complexity causes
- 8:23What is behavioral complexity
- 9:26Asynchronous complexity
- 11:14Reactive programming solution
- 12:43FRP basics: events and behaviors
- 15:13FRP in practice: card list
- 16:38Rendering optimization with angle snap
- 23:21Active card selection and data types
- 25:06Adding animation with FRP
- 27:13Card position animation
- 31:03Performance optimization with virtual scroll
- 33:50Stream combination optimization
- 36:19FRP usage conclusions
- 37:43Q&A
related talks
31mFunctional && Reactive
36mRxJS: A Better Way to Write Frontend Applications
46mFunctional Reactive Programming
23mHow we’re embracing functional programming to build a large SPA
27mBe More Functional and Reactive in React
42mConquering Time with Functional Reactive Programming
39mIntroduction to Reactive Programming with React
28mReactive Programming Demystified Drink the Kool-Aid