Day 30 - Finite State Machine x XState 推荐学习资源

说到学习资源，最容易学习的方式就是从母语开始

中文文章

Jerry Hong 的部落格
Jerry 在前端社群相当乐於分享，也是之前铁人赛的冠军，其文笔及范例、说明对初学者相当易懂，关於 XState 的文章在其部落格有 3 篇
一篇介绍 XState 、一篇介绍 Finite State Machine 以及 一篇 介绍 context 与 action

Luc Humanhighway 的 Medium
Luc 的 Medium 关於 XState 的范例同样有三篇
一篇以游戏模型实作 介绍 XState + React 、一篇介绍 探讨父子状态机及 Actor Model 正好能继续延伸我铁人赛没更深入探讨的 Actor
以及 一篇 介绍 透过 XState 及 Cypress 来进行 Model Based Testing 的实例

高效设计 UI 状态、以及无痛与工程师沟通的 FSM 表格
Vince 简易的比较 flow chart, state Machine，并透过大量图例及表格来解释说明 Finite State Machine ，并分享以此跟团队沟通分享的经验。

Day 21：什麽是「有限状态机」？
C.T. 用一篇文章介绍了 Finite State Machine 及 State Chart 中的进阶状态，让读者可以简单快速有个全貌。

State Pattern 与 State Machine
Vic 介绍了什麽是 State Pattern 与其优缺点，以及如何透过 Transition Table 来规划及实作状态机

英文文章

You don't need a library for state machines
XState 作者 David 分享如何实作自己简易的状态机器，以及提出你不需要使用 XState 的理由是什麽

Robust React User Interfaces with Finite State Machines
XState 作者 David 一样简介 State Machine 的观念，这次除简易实作一个状态机，更展示如何在 React 使用自制的 FSM
内文也稍微带到一点 状态机 与 CSS 的如何互动

XState: The Solution to All Your App State Problems
Ovie 分享了 React 常见的 UI 状态 (data, isLoading, error)，开发时可能要注意或预防的事情，并且用 XState 如何轻易地避免掉这些状况
是一个 XState 配 React hook 不错的范例

Modeling UI States in A React Form Component Using A Finite State Machine
Xiaoyun 介绍了 什麽是 FSM 并且以 React 及大量图表为范例

Implementing a simple state machine library in JavaScript
React 生态圈另外一位活跃的参与者 Kent C 透过影片及文章，分享自制状态机，其分享经验及文笔都很丰富，也很适合初学者或有兴趣自己动手做 Finite State Machine 的朋友

https://github.com/darrylhebbes/awesome_xstate
https://xstate.js.org/docs/about/resources.html
https://discord.com/invite/xstate
上面 3 个是 XState 官方提供的 resources ，Discord channel 也满多人愿意帮忙回答问题、官方也在里面提供 office hour 的直接互动

https://slides.com/davidkhourshid
XState 作者 David 本人的 投影片，里面有许多过去在各大 conference 演讲的投影片，也比较能接触到官方较新的资讯，比如与 v5 有关的资讯我就是从这里得知的。
里面也有 XState 与 CSS, XState + Rx + 动画, XState 与测试, Actor Model 等

英文影片

RF21 – David Khourshid – The State of XState
作者今年度在 React Finland 的 talk ，有关於 XState 较新的资讯，包含 V5 的改变

RF21 – Laura Kalbag – Introducing state machines and statecharts
Laura 透过生动的狗狗范例介绍 State Chart 及 State Machine ，该范例目前也在 XState 官网上，Laura 本人现在也在 Stately 工作（XState 背後团队）

Mind-Reading with Adaptive and Intelligent User Interfaces - David Khourshid
XState 作者 David 2019 年来台湾 JSDC 分享，透过 State Machine 如何让我们能建立出自动调整、可预测的使用者 User flow

更多关於影片或 podcast 的资源建议去上面 XState 官方网站的 resources 页面寻找。