Skip to content

Latest commit

 

History

History
553 lines (258 loc) · 7.44 KB

deck.mdx

File metadata and controls

553 lines (258 loc) · 7.44 KB
Raw

import { swiss } from '@mdx-deck/themes'; import CodeSandboxLayout from './layouts/CodeSandboxLayout'; import MainLayout from './layouts/MainLayout'; import './layouts/slides.css';

import CodeBlock from './components/CodeBlock'; import Column from './components/Column'; import MachineInspector from './components/MachineInspector'; import Row from './components/Row'; import TrafficLight from './components/TrafficLight'; import TrafficLightWithControl from './components/TrafficLightWithControl'; import VideoBlock from './components/VideoBlock';

import { calibrationSwitch } from './code/calibration-bugs'; import { simpleStateMachine } from './code/simple-state-machine'; import { expandedTrafficLightMachineCode, trafficLightCode, trafficLightMachineCode, } from './code/traffic-light';

export const theme = swiss;

<title>Modeling UI with Statecharts</title>

Modeling UI with Statecharts

Kelli Rockwell

We as developers and designers are really good at making the impossible, possible.

Sometimes, we're so good at it, we do it unintentionally!

import sutro from './images/sutro.png';

import loadingSpinner from './videos/loading-spinner.mp4';

<VideoBlock label={'*Dramatization, not actual user recording'} source={loadingSpinner} />

...

import inProgress from './videos/in-progress.mp4';

<VideoBlock label={'*Dramatization, not actual user recording'} source={inProgress} />

These are both "impossible states." So how did the user end up here?

How did the user end up here?

  • We changed the application logic and the UI got out of sync

How did the user end up here?

  • We changed the application logic and the UI got out of sync
  • We tried to take a shortcut

Default case is supposedly impossible to reach:

{calibrationSwitch}

How did the user end up here?

  • We changed the application logic and the UI got out of sync
  • We tried to take a shortcut
  • We forgot to reset a condition
  • We missed an edge case
  • We didn't handle an API response properly
  • ...

We need a better model for our state.

import hwFlowDiagram from './videos/hw-flow-diagram.mp4';

import statechart1 from './images/reassuring-statechart.jpeg'; import statechart2 from './images/reassuring-statechart-2.jpeg'; import statechart3 from './images/reassuring-statechart-3.jpeg';

Finite State Machines!

We're already used to thinking in state machines.

First rule of Finite State Machines:

You can only be in one state at any given time.

Second rule of Finite State Machines:

You have a finite number of discrete states.

Third rule of Finite State Machines:

You transition from one state to another based on an event.

As a driver,

Given, the light is red,

When, 30 seconds have elapsed,

Then, the light turns green.

import prototypes from './images/prototypes.png';

{simpleStateMachine}

The problem here isn't the switch statement, it's that the state machine is implicit

{calibrationSwitch}

import xstate from './images/xstate.png';

{trafficLightMachineCode}

{expandedTrafficLightMachineCode}

Statechart = finite state machine with nested and/or parallel states

import stateExplosion from './images/state-explosion.svg';

import stateExplosionFixed from './images/state-explosion-fixed.svg';

{expandedTrafficLightMachineCode}

{trafficLightCode}

Enough with the traffic lights already!

Takeaways

- On that note, let's talk takeaways

Takeaways

  • Keeping UI in sync with application logic is universally hard

Takeaways

  • Keeping UI in sync with application logic is universally hard
  • Implicit state machines make it harder

Takeaways

  • Keeping UI in sync with application logic is universally hard
  • Implicit state machines make it harder
  • You're probably already thinking in state machines

Takeaways

  • Keeping UI in sync with application logic is universally hard
  • Implicit state machines make it harder
  • You're probably already thinking in state machines
  • Statecharts = beefed up state machines

Takeaways

  • Keeping UI in sync with application logic is universally hard
  • Implicit state machines make it harder
  • You're probably already thinking in state machines
  • Statecharts = beefed up state machines
  • Modeling UI with statecharts is something you should consider doing :)

Thank you!