Maya Shavin

for UI

Maya Shavin

Composition API allows us to build component differently

Set local state

Update local state

Render component

Multiple clicks?

Loading state?

Error state?

Disabled?

Bottom šŸ†™

Basic actions

New action

New action

Bug fixes

Bug fixes

Bottom šŸ†™

Difficult to maintain

Difficult to test

šŸ›

Hard to understand

State Machines

Finite

Deterministic Finite Automata

Deterministic

Finite

Automaton

one initial state

finite number of states

finite number of events

transition map triggered by events

State machines & UI ?

UI phases/components are dependent

Transition between phases based on actions

Actions are events triggered

Building user interfaces === building userĀ  Ā  Ā  Ā  Ā  Ā 

diagrams

graphs

trees

flows

State machines

is used everywhere

Promises

Async/Await

Callbacks

Observables

State machines & state charts for modern web

Create

Interpret

Execute

State machine/chart

Manage

State machine/chart

Machine
transition
Events

State machine/chart

Actions
States
const fetchMachine = Machine({
    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
            })
          }
        }
      }
    }
  });
@xstate/vue

inactive

toggle

active

toggle

import { Machine } from 'xstate';

export const toggleMachine = Machine({
  id: 'toggle',
  context: {
    /* some data */
  },
  initial: 'inactive',
  states: {
    inactive: {
      on: { toggle: 'active' }
    },
    active: {
      on: { toggle: 'inactive' }
    }
  }
});

Advantages of XState

Code reusability

Test coverage

Code scalability & maintenanceĀ 

Better code design & planning

Easy to debug and spot bugs

Visually clear view of the code flow

Resources

State machine/chart

console.log(Maya)

Senior Software Engineer

Core maintainer of StorefrontUI

NuxtJS Ambassador

Everything about Frontend/Web

Google Developer Expert

Vue.js Israel Organizer

THANK YOU!

Plan. Model. Develop

XState for UI in Vue

By Maya Shavin

XState for UI in Vue

  • 1,601