
When deciding what to talk about in 2024, I wanted to showcase how powerful
state machines and XState can be by building something complicated, but not
_too_ complicated. That was the balance I was trying to strike. The year before,
I had built a little autocomplete dropdown component for my
[Model Based E2E Testing with State Machines](https://erikras.com/blog/model-based-e2e-testing)
talk, which desipite not being the state machine used in the talk, _was_
implemented with a relatively simple state machine. It seemed like the perfect
amount of complexity and asynchronous loading state. I turned it into a nice 30
minute talk, that I was lucky enough to be able to give at
[CityJS Athens](https://greece.cityjsconf.org/),
[What The Stack](https://wts.sh/), in Skopye, North Macedonia,
[React Alicante](https://reactalicante.es/), and
[React Africa](https://react-africa.com/), in Casablanca, Morocco.

Below I will share some photos of my vists to those places.

## Talk

<video>6yM839PycHU</video>

The code can be found
[on Github](https://github.com/erikras/search-state-machine).

<p>
<img
  src="/images/ui-with-state-machine-chart.png"
  alt="The state chart"
  width={3118}
  height={1580}
/>

<caption>
  The state chart.
</caption>
</p>

## CityJS – Athens, Greece

<p>
<img
  src="/images/2024-athens01.jpg"
  alt="The Acropolis at night"
  width={4032}
  height={3024}
/>

<caption>
  The Acropolis at night.
</caption>
</p>

<p>
<img
  src="/images/2024-athens02.jpg"
  alt="The Temple of Poseidon with Kadi"
  width={4032}
  height={3024}
/>

<caption>
  The Temple of Poseidon with <a href="https://bsky.app/profile/kadi.bsky.social">Kadi</a>.
</caption>
</p>

<p>
<img
  src="/images/2024-athens03.jpg"
  alt="All the speakers at the Temple of Poseidon"
  width={2048}
  height={1536}
/>

<caption>
  All the speakers at the Temple of Poseidon
</caption>
</p>

<p>
<img
  src="/images/2024-athens04.jpg"
  alt="The Parthenon"
  width={2048}
  height={1536}
/>

<caption>
  The <a href="https://en.wikipedia.org/wiki/Parthenon">Parthenon</a>
</caption>
</p>

## React Alicante – Alicante, Spain

<p>
<img
  src="/images/2024-alicante01.jpg"
  alt="Speakers Selfie"
  width={3895}
  height={2720}
/>

<caption>
  Speakers Selfie
</caption>
</p>

<p>
<img
  src="/images/2024-alicante02.jpg"
  alt="Plisplay with Stately"
  width={4032}
  height={3024}
/>

<caption>
  <em>Plisplay</em> with <a href="https://stately.ai/">Stately</a>
</caption>
</p>

<p>
<img
  src="/images/2024-alicante03.jpg"
  alt="Speakers' Night Out"
  width={3528}
  height={1608}
/>

<caption>
  Speakers' Night Out
</caption>
</p>

## What The Stack – Skopje, North Macedonia

<p>
<img
  src="/images/2024-skopje01.jpg"
  alt="Alexander the Great"
  width={4032}
  height={3024}
/>

<caption>
  Statue of Alexander the Great, the most famous Macedonian.
</caption>
</p>

<p>
<img
  src="/images/2024-skopje02.jpg"
  alt="The organizers, Blagica and Darko"
  width={4032}
  height={3024}
/>

<caption>
  The organizers, Blagica and <a href="https://bsky.app/profile/darko.io">Darko</a>
</caption>
</p>

## React Africa – Casablanca, Morocco

<p>
<img
  src="/images/2024-casablanca01.jpg"
  alt="Hassan II Mosque"
  width={4032}
  height={3024}
/>

<caption>
  <a href="https://en.wikipedia.org/wiki/Hassan_II_Mosque">Hassan II Mosque</a>, the must-see building in Casablanca
</caption>
</p>

<p>
<img
  src="/images/2024-casablanca02.jpg"
  alt="Interior of the Hassan II Mosque"
  width={4032}
  height={3024}
/>

<caption>
  Interior of the Hassan II Mosque. As a non-muslim, I was not allowed inside.
</caption>
</p>

<p>
<img
  src="/images/2024-casablanca03.jpg"
  alt="Colorful grains at the market"
  width={3024}
  height={4032}
/>

<caption>
  Colorful grains at the market
</caption>
</p>

<p>
<img
  src="/images/2024-casablanca04.jpg"
  alt="Speakers on a bus"
  width={4032}
  height={3024}
/>

<caption>
  We took a speaker trip to Rabat.
</caption>
</p>

I am so grateful to the organizers that invited me to their conferences,
[Aris](https://x.com/arismarko), [Darko](https://bsky.app/profile/darko.io),
[Victoria](https://bsky.app/profile/vicqr9.bsky.social), and
[Aymen](https://bsky.app/profile/aymenbenamor.bsky.social); I love you all. 🫶

What a great year! I can't wait to do it all again next year. I've already got
my talk planned. Stay tuned...


Building Complex UI with State Machines


This was my third time on the Canary Islands, second time on the island of
Tenerife. I really love the 17º – 24º C (63º – 75º F) weather every day of the
year is pretty amazing. If the terrain weren't so taxing – sooo hilly!! – I
might consider moving there. I had been winking at JS Day Canarias over Twitter
("twinking"?) for several years, and I finally got to meet the organizers at
[React Alicante](https://reactalicante.es) last year, so I was delighted to be
invited this year.

Ever since I saw
[David K. 🎹's talk from React Rally 2019](https://www.youtube.com/watch?v=tpNmPKjPSFQ),
I've been curious about model-based testing. As he is want to do, his demo was a
little, let's say, "set in the future", so it took a few years for Reality to
catch up, but last year at the
[first ever Remix Conf](https://erikras.com/blog/remixconf-2022), I learned more
about [Stately](https://stately.ai)'s
[`@xstate/test`](https://xstate.js.org/docs/packages/xstate-test/) from
[Matt Pocock](https://twitter.com/mattpocockuk), who was working on the alpha
docs at the time.

This was the first year where I submitted talks before actually having any
content behind the proposals, so when I had two _different_ talks accepted
back-to-back in the same week of May, it was a little stressful. By March, I had
actually built the project that confirmed that `@xstate/test` was a way to build
tests. My friendship from Croatia the previous year with
[Debbie O'Brien](https://debbie.codes) made [Playwright](https://playwright.dev)
the obvious choice for my demo.

## Talk

Sadly, this talk was not recorded...or if it was, the video was never published.
The last video on their YouTube channel is
[the promo for the event](https://www.youtube.com/watch?v=6VHUmy-6x-g).

## Food

The day before the conference began, I went on a little excursion with my
friends from [Lemon Code](https://lemoncode.net) to experience the most
authentic food on the islands, namely those provided by a
[_guachinche_](https://en.wikipedia.org/wiki/Guachinche). Five of us piled into
a small rental car, and we did a bit of tourism on our way to the _guachinche_,
including stopping at a town where I had been before when I traveled to the
island for the first time with my family two years earlier. We ended up at
Guachinche Los Gomez. There was no menu to order from. The sexagenarian waiter
came to our table and read out a list of things they had, including such Canary
staples as _ropa vieja_ and _queso asado_. We said, "Yeah, some of all that."
Then we began to order the main course, one person asking for the _solomillo_,
but the waiter stopped us, warning that it might be too much food and we should
wait to order additional dishes until we'd had our appetizers. We acquiesed.

<p>
<img
  src="/images/guachinche-ropa-vieja-queso-asado.jpg"
  alt="Ropa Vieja and Queso Asado"
  width={3024}
  height={4032}
/>

<caption>
  <em>Ropa Vieja</em> and <em>Queso Asado</em>
</caption>
</p>

Afterwards, we actually did want to try the meat, so we ordered one _solomillo_.
In Spanish, the word "_solomillo_" is used for both beef sirloin steak and pork
tenderloin, the beef usually being way more expensive. This meat was _so_ tasty
and juicy, we were genuinely unclear as to whether we were eating beef or pork.
We confirmed with the waiter that it was pork, and someone at the table
exclaimed, "_¡Menudo cerdo, tío!_" ("Man, what a pig!")

<p>
<img
  src="/images/guachinche-solomillo.jpg"
  alt="Pork Tenderloin"
  width={3024}
  height={4032}
/>

<caption>
  <em>Solomillo de Cerdo</em> (Pork Tenderloin)
</caption>
</p>

Rather than present us with a dessert menu, the waiter just brought us three of
their homemade desserts.

When we couldn't eat or drink any more (we'd had 6 liters of local red wine), we
went to pay. There had never been any mention of prices, of course (no menus
🙄). When the waiter told us 66€, our reaction was, "That's actually not a bad
price for what we ate!", assuming it was 66€ _each_. I mean, just the wine
should cost that much! But when he clarified that it was 66€ _in total_, we were
astonished!

I've placed a digital pin on the map, so I can find that place every time I go
back to Tenerife. Wow!


Model Based E2E Testing with State Machines


The more I play with [Solid](https://www.solidjs.com/), the more I find its
abstraction incredibly fascinating. I think it might be as revolutionary as
React's "just render everything every time and diff the DOMs" approach was back
in 2013. In my own words as a total n00b:

> When you write your JSX with conditionals and props that are
> [signals](https://www.solidjs.com/docs/latest/api#createsignal), Solid is able
> to notice exactly which pieces of your UI depend on which signal value, and
> can rerender _only that dependent UI_ when the signal value changes.

When I wrote my [Proof of Concept](/blog/solid-final-form-poc) using an external
state management system with Solid, I realized that I had to communicate via
signals, i.e. I had to keep the state I wanted to use in the UI in a signal.
This is _vaguely_ analogous to how the way to force a React component to
rerender is to change some part of its state with `setState()`.

> One important difference in Solid, when coming from React, is realizing that
> your "render function" (the component body itself) is **ONLY CALLED ONCE** on
> first render. All UI updates are dependent on signal changes _from inside the
> JSX_.

So let's try and plug my favorite framework agnostic state management library
into Solid!

## XState

The way you use XState is that you create a machine definition of your finite
state machine, and then you "boot up an instance" of that machine using
`interpret()`, which gives you a "service". Once you `.start()` your service,
you can `.send()` events to it, and generally observe it via listeners or
grabbing a snapshot of the state of the service at any given time.

### `select`

The primary way that you can subscribe to one particular slice of the machine's
"context" (where it stores data) is via a "selector", very much
[like Redux](https://redux.js.org/usage/deriving-data-selectors).

### `matches`

The way you determine what state the machine is in is with a `.matches()`
function. From
[the XState docs](https://xstate.js.org/docs/guides/states.html#state-matches-parentstatevalue):

> The `state.matches(parentStateValue)` method determines whether the current
> state.value is a subset of the given `parentStateValue`. The method determines
> if the parent state value “matches” the state value. For example, assuming the
> current `state.value` is `{ red: 'stop' }`:
>
> ```ts
> state.matches("red"); // => true
> state.matches("red.stop"); // => true
> state.matches({ red: "stop" }); // => true
> state.matches("green"); // => false
> ```

### `can`

A predicate that tells you if you "can" send a given event – i.e. that the
machine is currently listening for that event.

Quoth
[the docs](https://xstate.js.org/docs/guides/states.html#state-methods-and-properties):

> The `state.can(event)` method determines whether an `event` will cause a state
> change if sent to the interpreted machine. The method will return `true` if
> the state will change due to the event being sent; otherwise the method will
> return `false`.

This is especially useful for visually disabling buttons that don't do anything
right now.

### `send`

A state machine isn't much good if you can't send events to it, so we're going
to need to expose the `.send()` function as well.

## `useMachine()`

I've written a ~~hook~~ function called `useMachine()` that takes a state
machine definition and then exposes the above API to be consumed in Solid.
`can`, and `matches` use signals internally, and `select` returns the actual
signal to the data selected. Remember that we must use signals if we want Solid
to rerender parts of our UI.

Oh, and it's all strongly typed AF.

This is what it looks like to consume:

```ts
import { Component, Match, Switch } from "solid-js";
import { useMachine } from "./useMachine";
import { trafficMachine } from "./trafficMachine";
import "./App.css";

export const App: Component = () => {
  const { can, matches, select, send } = useMachine(trafficMachine);
  const cycles = select((s) => s.context.cycles); // defines a signal on first render
  return (
    <div class="app">
      <div>
        <div>Cycles: {cycles()}</div>
        <button onClick={() => send("Reset")}>Reset</button>
      </div>
      <div>
        <Switch>
          <Match when={matches("Stopped")}>
            <div>Stopped</div>
            <button disabled={!can("Start")} onClick={() => send("Start")}>
              Start
            </button>
          </Match>
          <Match when={matches("Started")}>
            <div>Started</div>
            <button disabled={!can("Stop")} onClick={() => send("Stop")}>
              Stop
            </button>
          </Match>
        </Switch>
      </div>
      <div>
        <div class="traffic-light">
          <div class={`red ${matches("Started.Red") ? "on" : "off"}`} />
          <div class={`yellow ${matches("Started.Yellow") ? "on" : "off"}`} />
          <div class={`green ${matches("Started.Green") ? "on" : "off"}`} />
        </div>
      </div>
    </div>
  );
};
```

## State Chart

Just a humble traffic light that counts how many times it's gone through `Red`.

<img
  src="/images/xstate-in-solid-state-chart.png"
  alt="Traffic Light State Chart"
  width={2320}
  height={1592}
/>

## Demo

Click "Open Sandbox" to dig into the actual `useMachine()` code.

<iframe
  src="https://codesandbox.io/embed/xstate-solid-ztsy8t?fontsize=14&hidenavigation=1&theme=dark"
  style={{
    width: "100%",
    height: 500,
    border: 0,
    borderRadius: 4,
    overflow: "hidden",
  }}
  title="XState Solid"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

If you inspect the DOM, you'll see that _only the nodes that need to change are
changing_.

<img
  src="/images/xstate-in-solid-dom.gif"
  alt="Traffic Light DOM GIF"
  width={642}
  height={228}
/>

## Conclusion

This was mostly a learning exercise for me. I'd be happy to contribute this code
to initiate an official `@xstate/solid` library. The Stately people, that
maintain XState, know how to contact me.

Thanks for reading, and I hope you learned something.


XState in Solid


The chart above is from
[a famous tweet](https://twitter.com/dan_abramov/status/981712092611989509) by
Dan Abramov in 2018. Dan, as usual, does an amazing job of communicating his
deep technical knowledge in a way that is easy to comprehend.

Since the release of
[Stately's Visual Editor](https://stately.ai/registry/new?source=erikras), I've
been using it more and more at my dayjob at
[Centered](https://centered.app/erik) to construct new, and comprehend existing,
state machines in our codebase. The visual editor is just so _fun_ to use!

The other day, I thought to myself,

> "I wonder if I could test my knowledge of React and state charts, and model
> the React lifecycle methods in a state chart?" 🤔

So I gave it a try!

## React Lifecycle State Chart

<p>
<img
  src="/images/react-lifecycle-state-chart.png"
  alt="React Lifecycle State Chart"
  width={2590}
  height={2084}
/>

<caption>
  Elegant, ain't it?
</caption>
</p>

One thing that immediately jumped out at me was how all the lifecycle methods –
and `render()` itself! – ended up being side effects, or "actions" in XState
parlance. This makes total sense, as they really are _where you put side
effects_!

> Rendering is a side effect!

### The Code

This is the XState machine that the visual editor generated:

```js
import { createMachine } from "xstate";

export default /** @xstate-layout N4IgpgJg5mDOIC5QCUwEMDGAXABAYQHsBbABwIDsxysA6AWQIFdrIBiAVXKKesVDNgBLLIIp8QAD0QBaAIwAGAGw0ALAE4AHPICsigMxrFi+RqMAaEAE8ZAJhsaaAdm0qVsmyb12bamwF8-C1RMXEJSCipaBmYsNgA5MAB3HAAFACcCEngkEAFhUXJxKQRpNxsaeVk9FUc1Xz09DTttC2sS-WUG9wbtbUdXWUcAoPRsfGIySmp6HliIVgBlMFwFrDRY8TyRMRzi2SqaRTVHE3t+tS7HVplFDxofBUUVDQ1ZC5tZYZBgsbDJyJmMTYADECGkMGAcOwSBB1mBNgQhNtCrsZAp5DRZC4zvI9I4DPtriVtC8aGoVDZtLImoZHI4ngFAiByAQIHBxD9QhMItNoiwIDRUOQ2WlIAikQUijJapj8U19iSVLpZCoidI9L0KvJ5EqdQTNEovpzxuEplFZmKcltJaiSio9MpKtVavVGs01S8MV07I4fJoLiojaMuaaAZxuECIOL8jtQHs8WT5fI7KY3eYrLYsU4XColIZFNofP4mca-jysNHkVK7cYKlUanUbA0mpS1XUvXp3DZatVc7JFIy-EA */
createMachine({
  description: "made by @erikras",
  initial: "Mounted",
  states: {
    Mounted: {
      entry: [
        "constructor",
        "getDerivedStateFromProps",
        "render",
        "componentDidMount",
      ],
      initial: "Rendered",
      states: {
        Rendered: {},
      },
      on: {
        Unmount: {
          actions: "componentWillUnmount",
          target: "Unmounted",
        },
        "New Props": {
          actions: ["getDerivedStateFromProps", "render", "componentDidUpdate"],
          cond: "shouldComponentUpdate",
          target: ".Rendered",
        },
        "Set State": {
          actions: ["render", "componentDidUpdate"],
          cond: "shouldComponentUpdate",
          target: ".Rendered",
        },
        "Force Update": {
          actions: ["render", "componentDidUpdate"],
          target: ".Rendered",
        },
      },
    },
    Unmounted: {
      type: "final",
    },
  },
  id: "React Component",
});
```

The crazy comment at the top is how the visual editor encodes the location of
all the boxes and arrows and whatnot, so if you open this exact file in the
editor, the layout will be the same. Clever, huh?

Of course, because
[I tweeted it](https://twitter.com/erikras/status/1539984775523475457), I got
[a clever response/challenge](https://twitter.com/donavon/status/1540112177515970567),
from my friend, Donovan:

> Nice. Now do this one.

with a link to [this chart](https://github.com/donavon/hook-flow) he, his son,
and Dan put together three years ago:

<p>
<img
  src="/images/react-hooks-lifecycle.png"
  alt="React Hooks Lifecycle"
  width={761}
  height={969}
/>

<caption>
  React Hooks Lifecycle
</caption>
</p>

I couldn't turn down such a challenge, now could I?

## React Hooks State Chart

It actually didn't take me long at all to whip up this one. Although React
hooks, as an API, is full of footguns with which to shoot yourself, the actual
mental model of what is happening is simpler than the lifecycle methods.

<p>
<img
  src="/images/react-hooks-lifecycle-state-chart.png"
  alt="React Hooks State Chart"
  width={2226}
  height={1700}
/>

<caption>
  React Hooks State Chart
</caption>
</p>

With this one, I took the additional step of imagining we were actually
implementing it as an XState state machine, where we could have to save the
props, state, and context into the machine's context (that's the XState term for
the internal storage of the machine).

### The Code

```js
import { assign, createMachine } from "xstate";

export default /** @xstate-layout N4IgpgJg5mDOIC5QCUwEMDGAXABAYQHsBbABwIDsxzdBkAhwAkCCBrWHAMQBsCB3AOgCyBAK7VIfVOQhgATpADEABRkESbPAAs05GIlBlYASyyGKekAA9EAWgAsAdgAMfewGYAnK9e3XARgBs7v6OrgA0IACeNvYATPZ8tgAcMX7BjgH+9r4AvtnhqJi4hKQUVLQMTKwc3PxColjiktJyEPIAylhoDfhaOmDmBsam5OZWCHb+iXzuvgCsvr6J7rY+7u724VHj-r7u0zGJib5uwa7+B7n56Nj4xGSU1Dh0jCxsXLyCImIQElTNCoQxBYir1dEgQIMTGZwWM7PYpnEVolzjFbLNXEdNjZ5lMfPYso5-LZHGtZjFLiACjdivcyk8Kq9qh86t95ABVchEL5YAYEIxQkYwxD2WZ8SaxWKuRwxYJJXxY7Zk6azFU7HZJFX2XJ5EDkAjSeDgqlFO6lR7PSpvGqfeqNP6ySC8-nDUY2A6uaZHEW+Ry+1zo1wbSLRGIxBIHI7pUNrGUU423EoPcovKrvWrcx3gyEuoXjWbSviIpIotEY+XB8aJeYJZKpX0ZLJx64mxN0i2MtN8Dlc20QJ1DaGgMa2fx8ZFSvy+Ym+QOzWwK6yzI58RxkxyJJKuGJT3ZNwoJ2nmhmpmr9gWuvMywv2JEl9GYivWIK+GspUMi-xz-za7JAA */
createMachine(
  {
    description: "made by @erikras",
    initial: "Mounted",
    context: {
      props: {},
      state: {},
      context: {},
    },
    states: {
      Mounted: {
        entry: "Run Lazy Initializers",
        initial: "Rendered",
        states: {
          Rendered: {
            entry: [
              "Render",
              "Cleanup Layout Effects",
              "Run Layout Effects",
              "Browser Paints Screen",
              "Cleanup Effects",
              "Run Effects",
            ],
            on: {
              "Props Change": {
                actions: "setProps",
              },
              "State Change": {
                actions: "setState",
              },
              "Context Change": {
                actions: "setContext",
              },
            },
          },
        },
        on: {
          Unmount: {
            target: "Unmounted",
          },
        },
      },
      Unmounted: {
        type: "final",
      },
    },
    id: "React Component – Hooks Flow",
  },
  {
    actions: {
      setContext: assign({ props: (_context, event) => event.props }),
      setProps: assign({ props: (_context, event) => event.props }),
      setState: assign({ props: (_context, event) => event.props }),
    },
  }
);
```

## Conclusion

Am I trying to reimplement React using state machines? Hell no!

But this exercise _has_ served to benefit my understanding – and maybe yours
too? – of how React works, how to model flows in state charts using Stately's
visual editor, and how to read and understand state charts.


Modeling React in XState


When Remix was first announced, by the gentlemen behind React Router, I knew it
was gonna rock...eventually. I figured they would need some time to work out the
exact APIs. That it was released initially as a paid offering was all I needed
to ignore it for a bit to let it mature. When it became open source several
months later, my interest was piqued.

I've been using [Next.js](https://nextjs.org) since it was in version 1.0. I
fully understood all that it was doing for me, because I had extensive
experience cobbling together such a site using Webpack, React Router, Express,
Server Side Rendering, Hot Reloading, and all the hot new technologies in 2015.
Even after authoring open source libraries used by millions of companies around
the globe,
[React Redux Universal Hot Example](https://github.com/erikras/react-redux-universal-hot-example)
remains my repository with more Github stars than any other. People are still
starring it, despite all the cobwebs, as I have not touched it in six years.
Every once in a while, someone will come up to me a conference and thank me for
it, telling me that they built and launched and grew a startup using that
starter kit. So I've been starting every project with Next.js and recommending
that everyone do the same for years and years.

All that is to say that I was highly skeptical that any framework could come
along and unseat my beloved Next.js from its pedestal. Nevertheless, I went
through the [Remix Tutorial](https://remix.run/docs/en/v1/tutorials/blog) –
which is different (better) now than it was when I did it – to see what these
Router boys were up to.

Within an hour, I was hooked. I will never start a project with Next.js again.

I've been building websites since _all_ pages were static files. When it was
discovered that you could execute code on the server – I ❤️ U `/cgi-bin`! – to
_dynamically_ change the HTML that was downloaded we were off to the races!

So I also come to Remix with a fundamental understanding of the ...errr...
fundamentals of HTTP and how the web works. Seeing Remix embrace The Platform™
warms my heart. That said, I remember why we all moved away from The
Platform™... because browsers sucked! But now that Internet Explorer is rotting
in its grave, I think it might be just the right time to return to the
fundamentals.

When [Remix Conf 2022](https://remix.run/conf/2022) was announced, I immediately
began brainstorming ideas interesting enough to attract the attention of the
Remix team. In my dayjob at [Centered](https://centered.app/erik), I have been
introducing [XState](https://xstate.js.org) state machines at every opportunity,
and it invariably improves the codebase. There was even one particularly complex
bit of backend logic, accepting a webhook from Linear, where I chose to
implement it as a state machine, and, wouldn't you know it?, it improved the
readability and robustness of the code. Remix is so elegant about how it does
stuff on the backend, I began to wonder if I couldn't come up with some sort of
an app to use a state machine on the backend using Remix.
[My previous talk](./infobip-shift-2021) was about using XState to implement an
e-commerce checkout flow, so what if I could do that entirely on the backend?

Narrator: "He pulled it off."

I wrote the prototype entirely on a transatlantic flight in February, and shared
the code with both the Remix and XState teams. My talk was _sort of_ accepted at
RemixConf. I was chosen as a backup speaker. This was a new concept to me, but
it makes total sense. I was to have all the perks of a speaker, travel,
expenses, hotel, etc., but rather than give my talk in front of the conference
attendees, it would be to an empty auditorium the night before, and the talk
would be released on YouTube with all the others, so future people wouldn't even
know it was to an empty crowd. Great plan! I was just delighted to attend the
conference!

As luck would have it, one of the speakers had some visa issues, and I was
bumped up to give a talk in front of an audience. And it made all the
difference! I've never given a talk with such an enthusiastic audience!

So, without further ado...

## The Talk

<video>r4xI6LPf6iQ</video>

<caption>
  The slides can be found{" "}
  <a
    href="https://speakerdeck.com/erikras/state-machines-on-the-edge-remixconf-2022"
    target="_blank"
  >
    here
  </a>
  , and the code <a
    href="https://github.com/erikras/remix-conf-2022"
    target="_blank"
  >
    here
  </a>, if you so desire.
</caption>

## Photos

<p>
<img
  src="/images/remixconf-2022-2.jpg"
  alt="The audience during my talk"
  width={2500}
  height={1669}
/>

<caption>
  The audience during my talk. I had the perfect slot, right before the morning coffee break.
</caption>
</p>

<p>
<img
  src="/images/remixconf-2022-3.jpg"
  alt="View from the back"
  width={2500}
  height={1668}
/>

<caption>
  The view from the back. That's Kent C. Dodds' pink sleeve on the far left, furiously live tweeting.
</caption>
</p>

<p>
<img
  src="/images/remixconf-2022-4.jpg"
  alt="Fisheye from the stage"
  width={2500}
  height={1669}
/>

<caption>
  Fisheye from the stage.
</caption>
</p>

<p>
<img
  src="/images/remixconf-2022-5.jpg"
  alt="Heroes and friends"
  width={4032}
  height={3024}
/>

<caption>
  A few of my heroes that I now call friends, <a href="https://twitter.com/tannerlinsley">Tanner Linsley</a>, <a href="https://twitter.com/jen_ayy_">Jenny Truong</a>, <a href="https://twitter.com/mattpocockuk">Matt Pocock</a>, <a href="https://twitter.com/DavidKPiano">David Khourshid</a>, and <a href="https://twitter.com/chancethedev">Chance Strickland</a>.
</caption>
</p>

<p>
<img
  src="/images/remixconf-2022-6.jpg"
  alt="Michael Chan and Chance Strickland"
  width={4032}
  height={3024}
/>

<caption>
  Photogenic lads, <a href="https://twitter.com/chantastic">Michael Chan</a> and <a href="https://twitter.com/chancethedev">Chance Strickland</a>.
</caption>
</p>

<p>
<img
  src="/images/remixconf-2022-7.jpg"
  alt="Van Selfie"
  width={4032}
  height={3024}
/>

<caption>
  We morbidly joked about what a loss to the JavaScript community it would be if this van crashed.
</caption>
</p>

<p>
<img
  src="/images/remixconf-2022-8.jpg"
  alt="Scooter Crew"
  width={4032}
  height={3024}
/>

<caption>
  <a href="https://twitter.com/johnlindquist">John Lindquist</a> lent some scooters to <a href="https://twitter.com/jen_ayy_">Jenny Truong</a>, <a href="https://twitter.com/mattpocockuk">Matt Pocock</a>, <a href="https://twitter.com/DavidKPiano">David Khourshid</a>, and me to ride around his neighborhood.
</caption>
</p>

<p>
<img
  src="/images/remixconf-2022-9.jpg"
  alt="Smash Burgers"
  width={4032}
  height={3024}
/>

<caption>
  <a href="https://twitter.com/jlengstorf">Jason Lengstorf</a> taught me the meaning of "smash burgers", and my life will never be the same.
</caption>
</p>

## Salt Lake City – Aerial Shots

<p>
<img
  src="/images/slc-2022-1.jpg"
  alt="Flying into Salt Lake City"
  width={4032}
  height={3024}
/>

<caption>
  As an East Coast boy whose never been to the rocky mountains, the terrain around Salt Lake City was <em>gorgeous</em>!
</caption>
</p>

<p>
<img
  src="/images/slc-2022-2.jpg"
  alt="Salt Lake"
  width={4032}
  height={3024}
/>

<caption>
  Apparently they have a big – dare I say "great"? – lake of salt there.
</caption>
</p>


XState

Posted in XState