1. React
  2. JS Kongress
  3. 2019
  4. Mastering UIs with Finite State Machines

Mastering UIs with Finite State Machines

Take a look at this new paradigm for UI components.

Rubén Sospedra at JS Kongress 2019

Did you ever feel like monkey patching your UI component? Adding too many if/else, handling a lot of complexity or hacking several non-desired side effects. Did you ever have a problem with double-clicking an async button? Fetching multiple times the same resource in a row? Did you have problems translating UX interfaces and mock-ups into your applications scenes? All these kind of problems can be properly fixed by applying a different point of view. An architecture based upon Mealy state machines. Also known as finite state machines or automatas. These machines are deterministic, pure and idempotent. Opening a new set of possibilities from predictable components to autogenerated tests. Let’s take a look at this new paradigm for UI components. You’ll discover a better and cleaner world 😉 What are the key takeaways from this talk? - Define your app states in advance; even if you’re not using an FSM - FSM can reduce to 0 the number of run-time bugs your app produces. Libraries: - State machines and statecharts for the modern web. https://github.com/davidkpiano/xstate - A state machine abstraction for React https://github.com/michelebertoli/react-automata - an open source platform for network analysis and visualization https://github.com/cytoscape/cytoscape