Uncover the logic of your business

State of the art in the art of state management

Transcript

1. Uncover the logic of your business State of the art in the art of state management
2. We have a lot of frameworks and libraries to build fancy web UIs STATUS
3. How do we transform a beautiful UI into something useful? PROBLEM
4. SOLUTION We need something to manage our business logic. And we need it now!
5. Frontend Backend
6. Modern web frameworks Declarative Tell me what, not how Modular Handle complexity through composition Independent Do only one thing and do it well
7. Let's build one together! Simple VanillaJS Modern Virtual DOM Quick Not starting from scratch Useful TODO MVC
8. https://gist.github.com/developit/2038b141b31287faa663f410b6649a87 Virtual DOM
9. https://codepen.io/sdras/full/RwwQapa Virtual DOM
10. Frameworkless By Francesco Strazzullo https://github.com/Apress/frameworkless-front-end-development
11. Let's dive into the code https://github.com/Apress/frameworkless-front-end-development https://github.com/mbarto/state-management
12. Summary Components Views and templates Rendering Engine Components registry and recursive (virtual) renderer Virtual DOM Recursive diff application from virtual to real DOM FrameworkLess Rendering Engine
13. Let's get into the business
14. Uncover your business logic • State • Events • Transitions • Side effects • UI mapping State UI Events Event Source Events Transitions Side Effects State Manager
15. State • Centralized or distributed • Normalized or not • Immutable or mutable • Free-form or with a model "In information technology and computer science, a system is described as stateful if it is designed to remember preceding events or user interactions; the remembered information is called the state of the system."
16. Events • Source ◦ UI ◦ others • Generators ◦ Actions ◦ Dispatch • Observability ◦ Observables ◦ Publish/Subscribe "Something that happens or is regarded as happening; an occurrence, especially one of some importance." "Something that occurs in a certain place during a particular interval of time."
17. Transitions • Functional or imperative • Reactive • Immediate or long running • Constrained or free "The change from one state to another is called a transition." "Movement, passage, or change from one position, state, stage, subject, concept, etc., to another; change."
18. Side effects • Ajax • IO • Logging • Asynchronous jobs "Any effect of ... that is in addition to its intended effect, especially an effect that is harmful or unpleasant." "Any accompanying or consequential and usually detrimental effect"
19. UI Mapping • Connectors • Mappers / Selectors • Decorators • Publish / Subscribe "UI as Function of State." UI = F(S)
20. Let's re-dive into the code https://github.com/Apress/frameworkless-front-end-development https://github.com/mbarto/state-management
21. ReduxJS
22. ReduxJS Unidirectional data flow https://redux.js.org/ https://redux-toolkit.js.org/
23. ReduxJS Single source of truth There is one global store, where all the state is persisted, fully inspectable using the Redux DevTools (a Chrome Extension) A predictable state container
24. ReduxJS Referential Transparency Allows predictable transitions, using pure reducers functions, but there is nothing in the library itself that prevents you from mutating the state A predictable state container
25. ReduxJS Redux Toolkit Opinionated library that simplifies the boilerplate and improves DX, using for example Immer to handle immutability in a simple way A predictable state container
26. Please, show me the code!
27. 0 1. State Global Redux Store, normalization and immutability depend on the developer 02. Events Actions (description) triggered by action creators, dispatched to the store 03. Transitions Reducers (pure) functions from action and state, produce a new state 04. Side effects Delegated to optional middlewares 05. Visible effects Connect state to UI through (eventually optimized) selector functions 06. Pros and cons Pros: Predictable, debuggable, extendable Cons: Boilerplate, no standard solution for side effects, immutability and modeling -> use RTK ReduxJS
28. Why do (some) people hate Redux? "My biggest regret with Redux is explaining it in terms of API instead of how to "think in it". I underestimated the temptation to twist it into a familiar conceptual model - and that it's flexible enough to allow these contortions." - Dan Abramov
29. MobX
30. https://mobx.js.org/ MobX Unidirectional data flow again
31. MobX Decentralized, observable state Every object can become observable, by using a wrapper or a decorator. State is updated using mutable objects methods, immutability is not requested and should be avoided. Simple, scalable state management
32. MobX Automatic Derivations Computed values (pure) and Reactions (side effects) are automatically activated on observable objects changes Simple, scalable state management
33. MobX Actions (transactions) Light abstractions of state updater functions that are needed only to optimize recalculations and re-rendering when state is updated Simple, scalable state management
34. I know, I know you want to see the CODE!!!
35. 0 1. State Many observable objects and computed properties, no immutability please 02. Events No special handling 03. Transitions Functions can update state directly, Actions can wrap them to optimize stuff 04. Side effects Reactions can execute side effects on state updates 05. Visible effects Reactions can update the UI on state updates (e.g. for React use the observer reaction) 06. Pros and cons Pros: Simple, scalable, reactive Cons: Some magic, UI leaks (decorators), scattered state MobX
36. Why do people hating Redux usually love MobX? "People adopting redux in 2016: oh, 5 files and 184 lines of totally unscalable boilerplate just to push an item in an array? SAY NO MORE" - The Kitze
37. Why do people hating Redux usually love MobX? "If I had a magic wand that would swap the popularity of redux with MobX instantly, I would freaking wave it." - Kent C. Dodds
38. mobx-state-tree
39. https://mobx.js.org/ mobx-state-tree https://mobx-state-tree.js.org/
40. mobx-state-tree Immutable mutable tree Best of both, update through a mutable object, but get immutability advantages through snapshots Opinionated, transactional, MobX powered
41. mobx-state-tree MobX powered Uses MobX nice features like derivations, so if you are familiar with it, most concepts will apply Opinionated, transactional, MobX powered
42. mobx-state-tree Typed state using Models Powerful modeling abstractions using types Opinionated, transactional, MobX powered
44. 0 1. State Typed, Immutable tree, contained into a store. Snapshots to interact. Views as computed state. 02. Events No special handling 03. Transitions Actions functions update the state. New Snapshots are generated. 04. Side effects Asynchronous actions modeled through JS generators. 05. Visible effects Reactions can update the UI on state updates (e.g. for React use the observer reaction) 06. Pros and cons Pros: Typed models, simple immutability, reactive Cons: More abstract and complex than MobX mobx-state-tree
45. Did we find a compromise? "If you want something that resembles Redux, checkout mobx-state-tree. It attempts to combine what is great about Redux with what is great about Mobx." - Michael Tiller
46. RxJS
47. https://rxjs-dev.firebaseapp.com/ RxJS Reactive Programming
48. RxJS Observables and Observers Powerful model for event based and asynchronous systems Reactive Extensions Library for JavaScript
49. RxJS Operators Composable functions to create and transform events into complex flows Reactive Extensions Library for JavaScript
50. RxJS Everything is an event Stateful systems modeled as a flow of events (both states and transitions) Reactive Extensions Library for JavaScript
52. 0 1. State No real concept of state. The Subject (store) emits data to one or more Subscribers. 02. Events Events are values emitted by another Subject (the Dispatcher). 03. Transitions Function that emits a new state when receiving events, using RxJS operators. 04. Side effects Transition functions take care of side effects too, using RxJS operators . 05. Visible effects Subscribe to the store. Emitted values update UI. 06. Pros and cons Pros: very powerful operator library to manage transitions and side effects Cons: not really a state management library RxJS
53. Why did we talk about RxJS to manage state? "Great, so I can use RxJS to control my Redux state, which I can render with React!. That sounds like a lot to juggle! How does that even look?!" - James Wright
54. XState
55. https://xstate.js.org/ State machines and state charts
56. XState Finite state machines Stateful systems represented as a set of discrete states and transitions between them Finite state machines and statecharts for the web
57. XState State charts to describe continuous states Context as extended state, parallel and nested machines to handle complexity Finite state machines and statecharts for the web
58. XState Finite state machines and statecharts for the web Declarative state management Disallows impossible states and transitions
60. 0 1. State State machines where state is distinguished from the detail context. 02. Events Sent to a state machine interpreter, using a send method. 03. Transitions Declarative state to state transitions, with explicit constraints and rules. 04. Side effects Actions, Activities, Invoked Promises and Machines are used for different purposes. 05. Visible effects Subscribe to state transitions and use context for updates. 06. Pros and cons Pros: powerful language to describe constraints and the visualizer tool Cons: steep learning curve
61. Are we inventing anything new? "Software modeling is a missing discipline in web development, but using them (state machines) can make application logic much more clear, communicative, and transferable. This calculator model was created 20+ years ago, and can be used directly today" - David K. Piano
62. Use your framework tools (e.g. React Hooks) What else?
63. Mix and match (e.g. Redux + XState) What else?
64. Build your own solution (frameworkless) What else?
65. The backend, where you get your data, but this deserves a different talk! What we didn't consider?
66. CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, and infographics & images by Freepik. That's all folks!
67. Thanks! Do you have any questions? (also about the pictures) mauro bartolomeoli@gmail.com #iorestoincasa (per ora)