Mastering Complex UI: State Machines and Reactive Patterns

on YouTube ↗47m

" summary

Explains how finite state machines and reactive patterns (RxJS and Focal signals) were used at Grammarly to avoid callback hell when integrating a new feature into existing infrastructure. Covers practical difficulties of that real-world integration, how state machines changed visualization and scaling, and techniques for combining state machines with RxJS/Focal signals to build maintainable UIs.

AI-written summary · about

" chapters (14)

1. 0:00Introduction
2. 5:04Text fixes problem
3. 8:57Finite state machines
4. 13:37State diagram
5. 17:33State machine implementation
6. 23:14Async events problem
7. 25:43Reactive programming with RXJS
8. 27:54Focal library
9. 30:42Refactoring with RXJS & Focal
10. 34:38Pros and cons
11. 34:59When to use state machines & RXJS
12. 37:53When not to
13. 38:16Resources
14. 38:58Q&A

" related talks

• 30mMastering UIs with Finite State MachinesRubén Sospedra · JSConf Budapest 2019
• 25mMastering UIs with Finite State MachinesRubén Sospedra · JS Kongress 2019
• 37mReactive State Machines and StatechartsDavid Khourshid · React Finland 2018
• 45mMastering UIs with Finite State MachinesRubén Sospedra · JSDayES 2018
• 29mReactive State Machines and StatechartsDavid Khourshid · ReactiveConf 2018
• 45mHow to Manage Your UI State: Virtual DOM and RxJSRicardo Borillo · Codemotion Madrid 2016
• 40mReactive Programming: A Better Way To Write Frontend ApplicationsHannah Howard · Strange Loop 2018
• 21mReactive State Machines and StatechartsDavid Khourshid · Uphill Conf 2019