The evolution of frontend architectures
summary
Traces front‑end architecture from 1980s MVC/MVP/MVVM through Flux to channel‑based CSP and reactive streams, and demos a working bingo engine that emits 40 unique numbers at ~3ms intervals plus a stock converter using CSP.js channels, ES6 generators and transducers to decorate streams. Shows how RxJS replaces generators with observables, uses shareReplay to make a hot stream and preserve past values, and frames the pattern as Model‑View‑Intent (cycle.js style) with unidirectional observable flows.
AI-written summary · about
chapters (17)
- 0:00Introduction to frontend architectures
- 1:50MVC and its evolution
- 2:53MVP and its benefits
- 5:01MVVM and data binding
- 6:28DCI and business requirements
- 8:37Flux and unidirectional flow
- 9:39Model View Intent overview
- 11:46Communicating Sequential Processes
- 14:37Bingo system demo with CSP
- 21:19CSP features and flexibility
- 23:50Stock application with transducers
- 27:45Reactive programming paradigms
- 30:13Observer and iterator patterns
- 32:22Bingo system with RxJS
- 36:13Hot vs cold observables
- 40:43MVI architecture deep dive
- 43:09Summary and key takeaways
related talks
36mNext generation of frontend architectures
40mReactive Programming: A Better Way To Write Frontend Applications
36mRxJS: A Better Way to Write Frontend Applications
43mThe Return of Stream I/O
33mCommunicating with channels
34mOperate Heavily Dynamic UIs with RxJS
28mReactive all the Things
27mEmbrace Reactive Programming in React and Vue with RxJS