State orchestration using State Machines

Farzad Yousefzadeh

@farzad_yz

Stately: Diagrams to the next level

Finite State Machine

type State = {
  isLoading: boolean;
  accounts: Account[];
  error?: string;
};
type State= 
| "Idle"
| "Loading"
| "Completed"
| "Failed";

Think in STATES 

type Data = {
  accounts: any[];
  errorMessages?: string;
}

Finite state

Infinite state

XState

👉🏻 State machines and Statecharts

👉🏻 TypeScript

👉🏻 Framework agnostic

👉🏻 Frontend and Backend

👉🏻 Based on SCXML standard

👉🏻 JSON config that ports to other languages

Model a Carousel

State orchestration

Actors

Canvas item actor: selection, highlighting, per item commands

Canvas actor: permissions (read-only), modes (embed)

Keyboard actor: delete item, select all items, copy pasting items

URL actor: update query params, navigate, feed initial data to the canvas

Ad-hoc UI actors: Toast actor, Popover actor

Supervisor

Focus actor: register focusable items and focus them on demand by message passing

Actors

Component tree vs Actor tree

General benefits of state machines

👉🏻 See breadth of features better

👉🏻 Event based architecture

👉🏻 Discover edge cases upfront

👉🏻 Focus on behavior than implementation

👉🏻 Visual model: onboarding, learning code, documentation

👉🏻 Test generation and property based testing

When to use state machines

👉🏻 Model a new feature

👉🏻 Refactor an existing feature

👉🏻 Learn a feature by modeling it from a higher level

👉🏻 Test a feature by modeling it for the test scenarios

Where to use State machines

👉🏻 UI components

👉🏻 Server sequences and workflows like continuous integration

👉🏻 Server controllers or cloud functions where there's asynchronous code and decision trees involved

👉🏻 State orchestration so different machines and actors can pass messages

👉🏻 Not all actors have to be a state machines

👉🏻 XState:fromPromise, fromCallback, fromReducer, fromObservable

Kiitos ❤️

https://stately.ai

https://stately.ai/studio

https://twiter.com/farzad_yz

https://stackblitz.com/edit/react-ts-wt2ipe

State orchestration using State machines

By Farzad Yousefzadeh

State orchestration using State machines

In this talk, we'll explore state machines for orchestrating the state across applications, from component level states to application level communication and how they open up to event based architecture. We'll also touch on benefits of using state machines and diagrams and model a few examples practically. After this talk, you should have a few action points in case you're interested to try them out in your projects. By Farzad Yousefzadeh, Lead Engineer at Stately.ai, leading development of Stately Studio, a visual editor for modeling application logic using Statecharts. Aerospace engineer and Astrophysicist turned Software engineer.

  • 372

More from Farzad Yousefzadeh