🤖 Finite State Machines with XSTATE & Svelte 🔴 LIVE Coding & Chill

Опубликовано: 01 Январь 1970
на канале: Johnny Magrippis
1,111
31

Let’s take our FINITE STATE MACHINES to the next level, by bringing in `xstate`!

Finite State Machines sound intimidating, but we’re already using straightforward ones for our forms, such as our login form: https://techy.cat/login

No external dependencies either, only a typed `FormState` of `'idle' | 'loading' | 'success' | Error` 😄

But now, we’ll bring in `xstate` and see if we can leverage its extra complexity, to make our Memory Game logic easier to follow. Easier logic flow, would make it easier to add features like persistence, and polish like a “hit-stop” effect whenever we make a mistake!

Try out the Memory Game we made in previous streams here: https://techy.cat/games/memory

Agenda

[ ] What are Finite State Machines? What’s `xstate`??? https://xstate.js.org/
[ ] Seeing is believing! Stately Visualizer & Editor: https://stately.ai/viz/fff72866-9259-...
[ ] What’s our Memory Game again, and why could it benefit from `xstate`?
[ ] Magic VSCode Extension: https://marketplace.visualstudio.com/...
[ ] Let’s implement our `memoryGameMachine`!
[ ] Can we use `delay` to add `hit-stop` to misses?
[ ] Can we also make the move counter more fun?
[ ] Serialise state and persist to `localStorage`!
[ ] Expire persisted state based on game mode!
[ ] Feedback on the browser with `@xstate/inspect` https://xstate.js.org/docs/packages/x...
[ ] Model-based testing?! https://github.com/statelyai/xstate/t...

It's likely we'll be adding / demo-ing stuff in this app, so click around yourself: https://techy.cat

See the code: https://github.com/jmagrippis/techy-cat

No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄

My own website: https://magrippis.com/

Search for `@jmagrippis` to find me on socials like Discord, Instagram & Twitter!

Between the comment section and the socials, let me know *somewhere* what you’d like me to cover next 🙌


Смотрите видео 🤖 Finite State Machines with XSTATE & Svelte 🔴 LIVE Coding & Chill онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Johnny Magrippis 01 Январь 1970, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 1,111 раз и оно понравилось 31 людям.