Episode 20: State Machines, XState & Vue with David Khourshid

Show Notes

[00:01:28] David explains about XState and the concept of State machines.

[00:02:42] In a lot of his talks, David references a paper from 1987, so Tessa wonders how David got into State machines and Statecharts.

[00:06:01] Sarah ask David how does it feel to be at the root of this pattern rediscovery in the front-end world and how do you feel about seeing those tried and true patterns slowly emerging front end?

[00:08:44] Ari asks David to give an example of a common scenario that we probably have all dealt with where a state machine might be better than Boolean state management?

[00:14:12] Tessa wonders how does David recommend somebody goes from, I don’t know what a state machine is to oh, here’s how I can start using them today?

[00:14:28] Sarah mentions about David having a visualizer on the XState website. She wonders if he’s considered pushing it into something that could maybe be a tool and has he considered building something like that to help with collaborative work?

[00:16:44] David talks about testing, especially end to end testing, and how tedious it is.

[00:18:33] Tessa is curious if David ever tries to represent piano playing with state machine? Piano was his major in college!

[00:21:50] Sarah wonders what were David’s big turning points, the big realizations that he made as a library author, since he’s at the fourth major version in three years of XState now. She also asks him when he decided to port XState to Vue, did he encounter major challenges or different challenges that were imported into react?

[00:29:35] Ari talks about having to address this past week, an ongoing problem caused by use of a Boolean state. Sarah asks David what are some of the most creative applications that he’s seen of XState?

[00:33:30] Tessa is curious to hear more about how the state machines work with scoping of events?

[00:36:55] David talks about moving from Vuex to XState.

[00:42:46} David explains why he would like to see more examples of people using state machines in creative ways.

[00:45:27] Tessa wonders if David has any thoughts or has he seen any interesting examples on state machines, potentially opening up a lot more interesting avenues to create dynamic or intuitive or accessible user interfaces?

Picks of the week:
[00:49:10] Tessa’s pick is a game, “Phoenix Wright: Ace Attorney- Dual Destinies.” (3DS, IOS, Android)
[00:50:16] Sarah has two picks: “Ten Second Songs” on YouTube and a book called, “So You Want to Talk About Race,” by Ijeoma Oluo.
[00:51:39] Ari has three picks: she seconds Sarah’s “Ten Second Songs” pick. Also, a song called, Disintegration Anxiety,” by Explosions in the Sky, and a Netflix show called, “Dead to Me.”
[00:52:42] David has two picks: A tutorial by Sarah Dayan called, “Using State Machines in Vue.js with XState.” Also, midi.city which is an online synthesizer.
[00:53:33] Ben’s pick is a gaming laptop Acer Predator Triton 500.

Sponsor:
Linode

Resources mentioned:
David Khourshid Twitter
David Khourshid GitHub
David Khourshid-CodePen
Enjoy the Vue-Episode 11, Test Driven Development (feat. Sarah Dayan)
Erik Mogensen
Statecharts
State Chart XML (SCXML) W3 Spec
Figma Plugin to XState
XState-Usage with Vue
DefinitelyTyped Repo
The Keyframers
“Phoenix Wright: Ace Attorney- Dual Destinies (3DS, IOS, Android)
“Ten Second Songs”-YouTube
“So You Want to Talk About Race”
“Explosions In the Sky” by Disintegration Anxiety
“Dead to Me”-Netflix
“Using State Machines in Vue.js with XState” by Sarah Dayan
midi.city
Acer Predator Triton 500

Special Guests: David Khourshid and Sarah Dayan.