iT邦幫忙

2021 iThome 鐵人賽

DAY 30
1
Software Development

From State Machine to XState系列 第 30

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 頁面尋找。


上一篇
Day 29 - XState in React 2 (著重: global state and performance concerned)
下一篇
Day 31 - Redux vs XState (英文原文改作)
系列文
From State Machine to XState31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
Jing.tech
iT邦新手 2 級 ‧ 2021-10-15 03:15:54

恭喜完賽!! /images/emoticon/emoticon08.gif

Ken Chen iT邦新手 4 級 ‧ 2021-10-15 21:19:31 檢舉

/images/emoticon/emoticon37.gif

0

Ken Chen iT邦新手 4 級 ‧ 2021-10-15 21:19:44 檢舉

/images/emoticon/emoticon37.gif

0

恭喜完賽!!!這系列文真的是拜讀

我要留言

立即登入留言