Next generation of frontend architectures

on YouTube ↗36m

" summary

Reactive frontend claims move from callbacks to data flows: MVI enforces MVI unidirectional flow where intent maps DOM events, model holds state and view emits a virtual DOM. Implementation uses RxJS streams (engine emits numbers every 3s for a Bingo of 40 numbers in Bingo with two 15‑number tickets; shareReplay/buffers backfill new tickets) and Cycle.js (app.run with drivers, ~100 lines). Live Tube demo polls Open Data by combining interval and HTTP streams; result is less global state and easier debugging.

AI-written summary · about

" chapters (6)

1. 0:00Start
2. 1:00Architectures Timeline
3. 7:24PROGRAMMING PARADIGMS
4. 18:35OBSERVER PATTERN
5. 22:18MVI RULES
6. 33:28Cycle.js

" related talks

• 44mThe evolution of frontend architecturesLuca Mezzalira · Jazoon TechDays Spring 2016 Bern
• 40mReactive Programming: A Better Way To Write Frontend ApplicationsHannah Howard · Strange Loop 2018
• 36mRxJS: A Better Way to Write Frontend ApplicationsHannah Howard · JSConf US 2018
• 35mModel View Intent, Embracing Reactive UI'sAndré Staltz · droidcon NYC 2017
• 34mEffective Reactive ArchitectureBenoît Quenaudon · droidcon London 2019
• 45mHow to Manage Your UI State: Virtual DOM and RxJSRicardo Borillo · Codemotion Madrid 2016
• 28mReactive all the ThingsBen Lesh, Martin Gontovnikas · ng-conf 2015
• 35mFunctional Reactive Programming with Cycle.jsLuca Mezzalira · JSPoland Conf 2017