"The Story of Declarative React at Grammarly: From two-way data binding with Focal to a custom implementation of UI as a tree data structure", Oleksandr Suhak
0 likes296 views
The document outlines the challenges and solutions related to UI state management and component reusability, focusing on the 'embrace' library which aims to facilitate type-safe and immutable UI composition. It highlights issues with traditional two-way binding and presents 'embrace' as a solution to manage state and actions effectively while ensuring declarative UI logic. Currently utilized in Grammarly's UI platform, 'embrace' is in development, addressing challenges such as animations and lists and invites contributions from others interested in its evolution.
"The Story of Declarative React at Grammarly: From two-way data binding with Focal to a custom implementation of UI as a tree data structure", Oleksandr Suhak
- 2. What we do
- 3. Outline ● Focal: good and bad points ● Reusability problems ● Experimental challenges ● Embrace: the solution to the above ● The current state of things
- 4. Let’s start with https://github.com/grammarly/focal
- 5. Focal enables “two-way binding”
- 6. But two-way binding has some issues ● Hard to reuse components: coupling of View and Model logic ● Hard to do action—generic logic: logging, filtering, throttling, etc.
- 7. Action messages are better
- 8. Action messages are better
- 9. Action messages are better
- 10. Action messages are better
- 11. The way we do state management ● Component state inside an Atom ● Component publishes actions ● State manager/VM listens for actions and updates state ● Rx.js: complex side effects management and synchronization of states ● Fp-ts: complex state updates
- 14. Problem: uncontrolled side effects
- 15. Solution hints: ● First-class support for action messages ● Better state composition ● Better action composition
- 16. Maintainability
- 17. Props interface on component?
- 18. Or state interface on manager?
- 19. Solution hints: ● One place to define state and action interfaces ● VM <- UI is bad ● VM -> UI is good
- 20. Experiments A/B
- 22. If-elsing problems ● It scales badly (think >100 experiments) ● Easy to add, hard to remove ● Easy to introduce experiment conflicts ● Need to involve multiple teams to do each experiment
- 23. Solution hints: ● UI as a traversable data structure ● Experiment as a function from one UI to another ● Type safe UI changes to avoid breaking changes
- 24. Introducing Embrace ● “Embrace” as in “hug the UI and squeeze any last bit of side effects from it”
- 25. Introducing Embrace ● “Embrace” as in “hug the UI and squeeze any last bit of side effects from it” ● A library for UI composition with a focus on type safety and immutability ● Makes UI representation truly declarative ● Uses React but triggers re-renders via Rx.js observables and Focal internally instead of relying on React’s VDOM
- 26. UI Part UI Part S S S Obs<State> A A A Obs<Actions>
- 27. UIPart
- 28. Flow Flow S S S Obs<State> S S S Obs<Actions>
- 29. Flow
- 30. Mounting ● Given a UIPart ● And a Flow that matches in action/state types ● Embrace can “mount” it ● Producing the ReactElement ● mount(UIPart, Flow) = ReactElement
- 32. Counter Example
- 33. Counter Example
- 34. Unlike: ● Pure react Embrace is declarative; no side effects allowed in components (No hooks! Well, maybe a few) ● Redux: no single state; everything is observable by default; no need to manually pass props ● Cycle.js Embrace is type safe, does not rely on selectors, is declarative
- 35. Composing UI parts UI Part UI Part UI Part
- 36. Composing UI parts ● A programmer who uses Embrace composes an App’s UI from smaller UI Parts ● Node: a UI Part that does not have slots ● Grid: the same as a Node but has named slots ● Knot: fills in a Grid’s slots with other UI Parts ● List: renders the collection of parts ● Union: renders one part at a time from a union of parts ● etc.
- 39. Patching UI with Embrace App New App Patch
- 40. Patching UI with Embrace
- 51. Embrace today ● Spreads through Grammarly UI platform ● Used by Grammarly Extension and Web Editor ● Continues to evolve ● Not ready for public release yet ● Challenges: animations, lists, animations in lists
- 52. ● Gives us truly declarative UI logic that composes ● Provides our and other Grammarly teams full control of the UI after we reuse Embrace components ● Allows us to manage breaking changes Embrace today
- 53. Join us! Help make Embrace and other cool stuff!
- 54. Thank you!