83: David Khourshid on XState, Statecharts, and the Future of Designer—Coder Collaboration

David Khourshid is the man bringing statecharts to the frontend. We talk about XState, model-based testing with xstate-test, and the future designer/coder integration

For the month of february, we're chatting exclusively with Reactathon speakers. You can hear more from David on the topic state-charts for UI development this march. Reactathon is a top React conference in the heart of San Francisco. David and I will be there, chewing people's ears off about better designer tooling. Get a ticket at reactathon.com.

Featuring

• David Khourshid — Twitter, Website, GitHub, CodePen
• chantastic — Twitter, Website, GitHub

Links

• XState
  • XState Docs
  • XState Visualizer
• Redux
• Constructing the User Interface with Statecharts by Ian Horrocks on Amazon
• Statecharts: A Visual Formalism for Complex Systems by David Harel
• Welcome to the world of Statecharts by Erik Mogensen
• RxJS
• Lodash
• Finite-state machine on Wikipedie
• State diagram on Wikipedie
• SCXML — State Chart XML on Wikipedia
• mukeshsoni/statechart-calculator
• A javascript calculator built with Xstate and Vue — built on the statechart above
• React Context
• RxJS Observable
• Concurrent computing on Wikipedia
• Cooperative multitasking on Wikipedia
• Screen tearing on Wikipedia
• Deterministic system on Wikipedia
• Beyond React 16 | JSConf Iceland by Dan Abramov
• Actor Model on Wikipedia
• use-subscription
  • On GitHub
  • On NPM
• Write Fewer Tests! From Automation to Autogeneration — David's announcement of Xstate/test at React Rally 2019
  • Model-based testing
  • @xstate/test
  • xstate-test-demo
  • Given-When-Then on Wikipedia
  • [Cucumber syntax]https://en.wikipedia.org/wiki/Cucumber_(software)#Syntax) on Wikipedia
• Adobe Xd
• Sketch
• Sunil Pai on Twitter
• inVision
• Framer
• Sketch.systems
• Subform
• Storybook
• useState
• useReducer
• useMachine from @xstate/react
• keyframers
  • @shshaw

Episode source