nicknisi

Componentizing Application State

Here’s a list of all of the resources that were in my talk at THAT Conference (Texas) 2024.

Talk abstract

Your application state is too complex. There are too many states to manage, it’s difficult to test in isolation, and fidelity is lost when translating from high-level abstracts into runnable code. But, what if there was a better way? What if you could model your application into a finite number of states and test it in isolation, as if it were just another component in your application? In this talk, we’ll explore modeling application state with XState while utilizing Storybook and React to treat it as if it were just another component that can be visually reviewed and understood by both the development and product teams, and can be tested independently of any UI code. From this talk, you’ll hear about how we did just that to manage some of the most complex pieces of our application.

Resources

Previous iterations of this talk

This talk has evolved since its inception. Here are some previous iterations of this talk:

KCDC 2023 (Not recorded)

I spoke about this at KCDC 2023. While the talk was not recorded, the example app is located here.

Feedback

KCDC asks for feedback from attendees and here’s what they had to say about this talk:

  • 💚 This was a great session. Nick demonstrated how to manage state using a tool called XState, and the demo made it look easy to define and use state. Also the meme generator app might be the most fun app I’ve seen at a conference.
  • 💚 The talk was super entertaining, and I learned quite a few new things about XState, which I thought I had a good understanding of already.
  • 💚 Nice job!
  • 💚 Great energy and feel. MemeGen good demo idea; complexe enough. Based on the description I expected a pinch more storybook related to ui state but might not even be a real thing.
  • 💚 Fantastic
  • 💚 Great info and an engaging speaker!
  • 💚 Such a great demo app
  • 💚 Well done
  • 💚 Great content, clear explanations, professional delivery. Thank you.
  • 💚 Lots of good info
  • 💚 Great topic, and appropriately categorized as advanced. Vim, though… ugh. ;-D
  • 💚 Fantastic
  • 💚 I’m not sure we’re going to adopt this architecture, but the xstate tool is fascinating
  • 💚 Great talk, thank you!
  • 💚 Excellent example code!
  • 💚 Was very informative
  • 💚 Informative, live coding was impressive, good talk
  • 💚 Very engaging talk. Use of ChatGPT API was pretty cool

Let’s build something fun with XState, TypeSript, and React!

I was on Nick Taylor’s stream to talk about XState, TypeScript, and React. We built a simple state machine to manage the state of a button and then used that state machine to drive the UI of the button.

React Global Online Summit 2022

In this version, I go more in detail on the state machine that powers the JS Party podcast’s JS Danger game show board.

Get in contact!