"Mastering UI Complexity: State Machines and Reactive Patterns at Grammarly", Anastasiia Mihal
0 likes0 views
Learn how finite-state machines and reactive programming help us avoid callback hell at Grammarly. We’ll discuss: Rreal-world challenges we faced when integrating new functionality into a complex existing architecture; How FSMs transformed our approach to visualizing and scaling user flows; Techniques for integrating state machines with RxJS and Focal signals to create elegant, maintainable solutions
"Mastering UI Complexity: State Machines and Reactive Patterns at Grammarly", Anastasiia Mihal
- 2. Agenda 1. Problem space 2. Finite state machines (FSMs) 3. RxJS + Focal 4. Key takeaways 5. Resources Mastering UI Complexity: State Machines and Reactive Patterns
- 3. Improve lives by improving communication Our mission
- 4. Grammarly by the numbers 70K+ 1000+ employees work together to build Grammarly from our hubs or in their homes. 50K+ organizations trust Grammarly as their AI assistant for work. 500K+ apps and sites integrate seamlessly with Grammarly, so it works wherever you do. 40M+ daily active users use Grammarly to show up as the best versions of themselves
- 5. What does Grammarly do? 1. SETTING THE CONTEXT Mastering UI Complexity: State Machines and Reactive Patterns
- 6. Problem space Mastering UI Complexity: State Machines and Reactive Patterns
- 7. Feature design (simplified) Mastering UI Complexity: State Machines and Reactive Patterns 1 2 3 4 1. PROBLEM SPACE
- 8. Feature requirements 1 2 3 Flexible architecture Feature steps must happen in fixed order Activation at the right moment SECTION TITLE HERE Feature behaviour may change in the future No random jumping between feature states Respond to relevant text changes only Mastering UI Complexity: State Machines and Reactive Patterns
- 9. 1. SETTING THE CONTEXT Mastering UI Complexity: State Machines and Reactive Patterns
- 10. Finite State Machines (FSMs) Mastering UI Complexity: State Machines and Reactive Patterns
- 11. Real-life example: traffic light Mastering UI Complexity: State Machines and Reactive Patterns 2. FINITE STATE MACHINES (FSMS)
- 12. Key concepts: states, transitions, external input & output Mastering UI Complexity: State Machines and Reactive Patterns 2. FINITE STATE MACHINES (FSMS)
- 13. Feature state machine diagram IDLE LOADING READY SUCCESS Mastering UI Complexity: State Machines and Reactive Patterns 2. FINITE STATE MACHINES (FSMS)
- 14. Feature state machine diagram IDLE LOADING READY SUCCESS Mastering UI Complexity: State Machines and Reactive Patterns 2. FINITE STATE MACHINES (FSMS)
- 15. Feature state machine diagram IDLE LOADING READY SUCCESS TextService Mastering UI Complexity: State Machines and Reactive Patterns 2. FINITE STATE MACHINES (FSMS)
- 16. Feature state machine diagram IDLE LOADING READY SUCCESS TextService X ms passed since last change Mastering UI Complexity: State Machines and Reactive Patterns 2. FINITE STATE MACHINES (FSMS)
- 17. Feature state machine diagram IDLE LOADING READY SUCCESS TextService API Text ready for checking X ms passed since last change Mastering UI Complexity: State Machines and Reactive Patterns 2. FINITE STATE MACHINES (FSMS)
- 18. Feature state machine diagram IDLE LOADING READY SUCCESS TextService API Text ready for checking Suggestions ready X ms passed since last change Mastering UI Complexity: State Machines and Reactive Patterns 2. FINITE STATE MACHINES (FSMS)
- 19. Feature state machine diagram IDLE LOADING READY SUCCESS TextService API Text ready for checking Suggestions ready User input Shortcut pressed X ms passed since last change Mastering UI Complexity: State Machines and Reactive Patterns 2. FINITE STATE MACHINES (FSMS)
- 20. Feature state machine diagram IDLE LOADING READY SUCCESS TextService API Text ready for checking Suggestions ready User input Shortcut pressed Text ready for checking X ms passed since last change 500ms Mastering UI Complexity: State Machines and Reactive Patterns 2. FINITE STATE MACHINES (FSMS)
- 21. Time to code ＜/＞ Mastering UI Complexity: State Machines and Reactive Patterns 2. FINITE STATE MACHINES (FSMS)
- 22. Time to code ＜/＞ Mastering UI Complexity: State Machines and Reactive Patterns 2. FINITE STATE MACHINES (FSMS)
- 23. Time to code ＜/＞ Mastering UI Complexity: State Machines and Reactive Patterns 2. FINITE STATE MACHINES (FSMS)
- 24. Time to code ＜/＞ Mastering UI Complexity: State Machines and Reactive Patterns 2. FINITE STATE MACHINES (FSMS)
- 25. Benefits ● New states don’t break existing logic ● Requirement changes → state modifications ● State machine diagram = visual model for stakeholders ● Valid transitions permitted only ● Centralised transition logic ● Current state known and traceable Feature steps must happen in fixed order – ✅ Flexible architecture – ✅ Mastering UI Complexity: State Machines and Reactive Patterns 2. FINITE STATE MACHINES (FSMS)
- 26. Benefits ● New states don’t break existing logic ● Requirement changes → state modifications ● State machine diagram = visual model for stakeholders ● _getNextState() is a pure function ● Each transition verifiable independently ● Separation of concerns = no dependencies 100% Testability ● Valid transitions permitted only ● Centralised transition logic ● Current state known and traceable Feature steps must happen in fixed order – ✅ Flexible architecture – ✅ Mastering UI Complexity: State Machines and Reactive Patterns 2. FINITE STATE MACHINES (FSMS)
- 27. We’ve addressed 2 out of 3 requirements We’ll address the 3rd one, right? Right?.. Mastering UI Complexity: State Machines and Reactive Patterns 2. FINITE STATE MACHINES (FSMS)
- 28. Text is constantly changing ● Typed by the user ● Corrected by other Grammarly features Activation at the right moment Callback hell ● Asynchronous operations prone to race conditions ● No way to cancel pending operations if new occur Mastering UI Complexity: State Machines and Reactive Patterns
- 29. RxJS 🤝 Focal Mastering UI Complexity: State Machines and Reactive Patterns
- 30. Observables Observers streams of events that occur over time receive notifications when new values are emitted 3. RXJS & FOCAL Mastering UI Complexity: State Machines and Reactive Patterns RxJS: key concepts
- 31. RxJS: key concepts 3. RXJS & FOCAL Mastering UI Complexity: State Machines and Reactive Patterns
- 32. How to combine the two? RxJS React ✨ Focal ✨ 3. RXJS & FOCAL Mastering UI Complexity: State Machines and Reactive Patterns
- 33. Focal Atoms Atom Rx event stream Subscriber 3. RXJS & FOCAL Mastering UI Complexity: State Machines and Reactive Patterns
- 34. Time to code ＜/＞: Focal Atoms 3. RXJS & FOCAL Mastering UI Complexity: State Machines and Reactive Patterns
- 35. Time to code ＜/＞: Focal Atoms 3. RXJS & FOCAL Mastering UI Complexity: State Machines and Reactive Patterns
- 36. Time to code ＜/＞: feature activation Mastering UI Complexity: State Machines and Reactive Patterns 3. RXJS & FOCAL
- 37. Time to code ＜/＞: feature activation Mastering UI Complexity: State Machines and Reactive Patterns 3. RXJS & FOCAL
- 38. Time to code ＜/＞: feature activation Mastering UI Complexity: State Machines and Reactive Patterns 3. RXJS & FOCAL
- 39. Key takeaways: to choose or not to choose Mastering UI Complexity: State Machines and Reactive Patterns FSMs ✅ ● Clearly defined states ● Prevent invalid transitions ● Thorough testing of all paths ● Complex event timing ● Multiple async operations ● Streams of events needing transformation RxJS ✅ ● Automatic UI-state synchronization ● Reduced state management code ● Multiple components observe the same state Focal ✅
- 40. Key takeaways: to choose or not to choose Mastering UI Complexity: State Machines and Reactive Patterns FSMs ❌ ● Few states or extremely simple transitions ● Highly dynamic or runtime-generated states ● Continuous behaviour > discrete behaviour ● Simple one-off async operations ● Straightforward event handling ● No benefits from stream composition RxJS ❌ ● Component-local state only ● Rare shared state updates ● No need for reactive UI updates Focal ❌
- 41. Simplify your code with State Machines Resources Building Web Applications with Signals at Grammarly Understanding State Machines Understanding RxJS Observables & Observers: A Comprehensive Guide Mastering UI Complexity: State Machines and Reactive Patterns grammarly/focal: Program user interfaces the FRP way
- 42. Join us on Meetup! Grammarly Tech Talks Group
- 43. Thank you