1. React
  2. JSHeroes
  3. 2019
  4. Taming UI complexity with Typed State Machines

Taming UI complexity with Typed State Machines

Managing state in UI apps is hard. Keeping a coherent mental model of it is even harder.

Bogdan Zaharia at JSHeroes 2019

Managing state in UI apps is hard. Keeping a coherent mental model of it is even harder. Finite State Machines seem to offer a good abstraction of the way we interact with UIs, making states and transitions between them explicit, and thus easier to reason about. One of the nice things about FSMs is that only certain transitions are legal from each state. But is it possible to enforce that in code? It seems that, with some TypeScript magic, it is possible. In this talk, you'll be exposed to a new perspective on implementing FSMs in JS/TS and how it compares to libraries such as XState or Redux (not really a FSM, but similar). You'll also see how this new approach can be used in real apps, using various libraries, such as React, Vue, and others, some of them quite unexpected.