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

Made with Slides.com