Visualize

your State Management with XState

Maya Shavin - Vue Nation 2022

@mayashavin

A LITTLE BIT about me

Senior Software Engineer

MICROSOFT

Core Team

STOREFRONT-UI

Organizer

VUEJS ISRAEL

Blogger & Book Author

@mayashavin

mayashavin.com

〞

Good programmers write code that human can understand.

– Martin Fowler

@mayashavin

〞

Code is read much more often than it is written...

– Raymond Chen

MICROSOFT DEV BLOG

@mayashavin

@mayashavin

the feature lifecycle

The states we always have to go through...

@mayashavin

idea

How PM imagine the feature

Specs

Long document describes the feature behaviors in details 

Design

Design scenarios and UI that capture the specs and requirements

release

Specs turned into actual code & visually seen on client-side.

CODE

Implement the feature based on the priorities

What human thinks

What computer understands 

@mayashavin

Code translates

what we imagine our feature

into

what computer can display

@mayashavin

Sequence Diagram

Flow charts

Wireframes

User flows design 

Specifications

reading IS understanding

Visualizing

@mayashavin

When something happens, how do the app react?

Events

Behaviors (states)

@mayashavin

State Management

Image: https://dribbble.com/shots/6605060-Input-Field-States

  • Manage conditions of an app/ component/ feature at a given session period.
  • Keep consistency of data flows.

@mayashavin

The developer way

The classic 🍑 approach to everything

@mayashavin

Basic actions

New action

New action

Bug fixes

Bug fixes

Just make it work... at the minimal

@mayashavin

Mixed up logic & events & actions

Event handlers

Callbacks

Logic

Logic

@mayashavin

Flux pattern

https://facebook.github.io/flux/docs/in-depth-overview/

@mayashavin

State machines

The explicit way to handle complex UI states

@mayashavin

State

State 

State 

Event

Event

Event

Finites of States

Transition using Event

State data control using Actions

@mayashavin

JS State Machines

xstate.js.org

npm i xstate

Vue, React, Svelte 

@mayashavin

const fetchMachine = createMachine({
    id: 'fetch',
    initial: 'idle',
    context: { retries: 0 },
    states: {
      idle: {
        on: {
          FETCH: 'loading'
        }
      },
      loading: {
        on: {
          RESOLVE: 'success',
          REJECT: 'failure'
        }
      },
      success: {
        type: 'final'
      },
      failure: {
        on: {
          RETRY: {
            target: 'loading',
            actions: assign({
              retries: (context, event) => context.retries + 1
            })
          }
        }
      }
    }
  });

@mayashavin

import { interpret } from 'xstate';

const machine = createMachine({/* configuration */})

const service = interpret(machine)

service.onTransition(newState => {
/* do something during transition from one state to another */
}).start();

service.send('EVENT');
import { myMachine } from '../machines/myMachine';
import { interpret } from "xstate";
import { useActor } from '@xstate/vue'

const service = interpret(myMachine).start()
export default {
  setup() {
    const { state, send } = useActor(service)
    
    const transition = () => send('EVENT')
    
    return { state, transition }
  }
}

Vue

Demo

Seeing is believing... as always

@mayashavin

Vue 3
Pinia
XState
XState/vue
XState/inspect
XState/graph

Requirements

  • Define state machine Wizard for cart checking out cart
  • Visualize the state machine for wizard steps
  • Guarding steps with condition (shipping address)
  • Auto generate visual flow for the wizard

@mayashavin

State management

State machine - XState

VueX

Pinia

Architecture

@mayashavin

Start planning first, before coding

REsources

@mayashavin

Thank you

@mayashavin

mayashavin.com

Visualize your state management with XState

By Maya Shavin

Visualize your state management with XState

  • 811

More from Maya Shavin