Maya Shavin

Smart & Controllable UI

with

Maya Shavin

@mayashavin

https://mayashavin.com

@mayashavin

State management

MobX

@mayashavin

manage state flow of different user interface controls

State management

@mayashavin

@mayashavin

Cre: https://www.mockplus.com/blog/post/user-flow-tools

@mayashavin

Set local state

Update local state

Render component

@mayashavin

Multiple clicks?

Loading state?

Error state?

Disabled?

@mayashavin

Bottom 🆙

@mayashavin

Basic actions

New action

Bug fixes

Bottom 🆙

@mayashavin

Difficult to maintain

Difficult to test

🐛

Hard to understand

@mayashavin

State Machines

@mayashavin

Finite

Deterministic Finite Automata

@mayashavin

Deterministic

@mayashavin

Finite

Automaton

one initial state

finite number of states

finite number of events

transition map triggered by events

@mayashavin

Promises

Async/Await

Callbacks

Observables

@mayashavin

Cre: https://www.mockplus.com/blog/post/user-flow-tools

UI phases/components are dependent

Transition between phases based on actions

Actions are events triggered

@mayashavin

Building user interfaces === building user

diagrams

graphs

trees

flows

@mayashavin

State machines & state charts for modern web

https://xstate.js.org/docs/

@mayashavin

https://xstate.js.org/docs/

@mayashavin

https://xstate.js.org/docs/

Create

Interpret

Execute

State machine/chart

Manage

State machine/chart

@mayashavin

https://xstate.js.org/docs/

Machine

transition

Events

State machine/chart

Actions

States

@mayashavin

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
            })
          }
        }
      }
    }
  });

@mayashavin

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' }
    }
  }
});

@mayashavin