Rubén Sospedra

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 this 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 idempotents. Opening a new set of possibilities from predictable components to autogenerated tests.

Let's take a look to this new paradigm for UI components. You'll discover a better and cleaner world ;)

2019

JSConf Budapest

Mastering UIs with Finite State Machines

Take a look at this new paradigm for UI components.

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