State machines


Component libraries

Farzad Yousefzadeh


❤️ React is great

❤️ React is great






😩 Complexity 

Cross browser

Cross framework



Focus management

The rise of the machine 🤖

The rise of the machine 🤖

Finite State Machine

Think in STATES

type State = {
  isLoading: boolean;
  accounts: Account[];
  error?: string;
type State= 
| "Idle"
| "Loading"
| "Success"
| "Error";

Think in STATES

Live Diagramming

With dragging

Without dragging

240 paths

34 paths


👉🏻 Boundaries

👉🏻 Edge cases

👉🏻 Zooming

👉🏻 Plan and estimate

👉🏻 Integrations

👉🏻 See layers

If diagrams are so good, why not just diagram the software instead of programming it?

Executable diagrams

👉🏻 Diagrams are the source of truth

👉🏻 Diagram ➡ model  execute

👉🏻 Export to more than just code

👉🏻 Import from more than just code

👉🏻 Multi-purpose

👉🏻 Across the stack

Diagrams to the next level

👉🏻 Generate event sequences

👉🏻 Collaborative

👉🏻 Adaptive

Kiitos ❤️

State machines meet component libraries

By Farzad Yousefzadeh

State machines meet component libraries

In this talk, we will experiment with using state machines for modeling components in a React based component library. We will use the Stately visual editor to model components visually and see how we can use Storybook and Model based testing concepts to deal with test generation and documentation based on acceptance criteria.

  • 513