130: David Khourshid - Building Better UI Components with State Machines

Topics include:

• What exactly is a finite state machine?
• Why trying to keep track of a component's status using boolean flags is leads to bugs and complex code
• Why it makes so much more sense to keep track of a component's state using some sort of label
• How simple it can actually be to implement UI component logic with a state machine and why you shouldn't think of it as complex or over-engineering
• How you can think of using state machines in UI programming to be like an inversion of the typical approach you may have taken in the past, where actions become scoped to certain states instead of actions needing to inspect the current state
• What events might look like in your state machine and where you're actually sending them from and to
• Advice for naming your events
• What it means to "transition" between states
• How using a state machine makes it easy to provide slightly different behavior for the same action based on the current state
• The benefits of visualizing your state machines
• Using the XState library to build state machines in JavaScript

Sponsors:

• Tuple, try the best pair programming app out there for free for two weeks
• DigitalOcean, get your free $50 credit at do.co/fullstack

Links:

• "No, disabling a button is not app logic.", David's recent article on state machines
• XState Docs

Episode source