前端開發的再次典範轉移 - 如何走出混亂並讓複雜變的可掌控 - 呂維德
===

{%hackmd LcL4-VI0SGitSiINTuy4rA %}

> 請從這裡開始
>

- **Slide: https://speakerdeck.com/coodoo/qian-duan-kai-fa-de-zai-ci-dian-fan-zhuan-yi-ru-he-zou-chu-hun-luan-bing-rang-fu-za-bian-de-ke-zhang-kong**
- **FB 社團: https://www.facebook.com/groups/statecharts**

故事：Apple 犯的 if (anwsered) { openMic() } 錯誤。

Redux 的問題：大家都在改狀態，沒人可以確定改出來的狀態是對的。
你把狀態改好了，另一位新來的工程師又 override 你的狀態，就壞惹⋯⋯

從一包狀態轉換到下一包狀態時，無法預期轉出來的狀態是不是對的。

## 狀態機：FSM 可以完美解決我們遇到的問題

1943 年⋯⋯ NASA 大量用它上火星，不同領域都在用

可惜 FSM 狀態爆炸的問題一直存在（狀態圖太複雜）

link 的方式：切成好幾個小狀態機，然後用 link 相連。

最近找到的更好解法：statecharts。

statecharts: 描述式語言

declairtive!!!

範例（圖）

https://statecharts.github.io/xstate-viz/

### Statechart v.s. FSM

- statecharts 是樹狀結構，可外連，可以解決狀態爆炸
- 支援 actions 可操作 side effects
- 別被狀態機這名詞給騙了

在學校學了就忘了 XD

實例：120 個狀態、400 個會交互影響的 events。
用 Redux 的話: 娃，一大包狀態轉到另一大包狀態，是哪兒出錯？

改用狀態機：debug 複雜度從 O(n) 變 O(1)

### 好處：

1. 將狀態切片管理：每一片代表一個商業邏輯

2. 操作 side effects

3. 完整封裝 business logic：business logic 封裝在 state chart

4. 驅動 UI

statechart 有變化，UI 就重繪

UI 成為 dumb layer，只負責輸出畫面、接收輸入

"map state to UI、send events to statechart"

前端框架變得不再重要、不再糾纏商業邏輯

---

speaker: 重點講完了、剩下都是廢話

強迫開發者儘早想清楚 business logic 並清楚寫出來

開發速度更快

更容易 debug

"用了 statechart 後，90% 的錯誤都出在 UI 端，UI 送了不對的 event 進來。"

更好測試：business logic 都在 state chart 內、只要針對每個相關事件寫測試就能達到 100% coverage。

"你可以更快的把錯推給寫 UI 的人 (誤)"

狀態與 UI 可平行開發：速度快超過兩倍！

> 感覺 GraphQL 那套也有類似的特性、~~走類似的方法，只是沒有人可以清楚地說出來。~~GraphQL Mutations 應該沒有哪套有提到狀態機的概念，只有「先想清楚 data schema」和「邏輯和 UI 分離」這些概念類似。
> [name=Pokai Chang]

商業邏輯高度封裝：換框架不怕不怕！商業邏輯封裝在 statechart 內因此是可攜的！

不怕找不到資深的人，只要會 JS 和基本框架就可以寫。

> 沒有 10x 工程師，只有 10x 工作法
> [name=Pokai Chang]
>

適用於前後端各種情境。

書：constructing the user interface with statecharts (1999)
20 年前出版，已絕版

https://www.amazon.com/Constructing-User-Interface-Statecharts-Horrocks/dp/0201342782/

### 心法

- 難的不在狀態機，難的在 modeling。
- 沒有唯一解法，只要適用都行。
- 要換個方式思考，類似 impertive to declairtive
- 再一次典範轉移，JQuery -> thinking in component -> thinking in state
- 重要教學資源，看簡報。

https://speakerdeck.com/coodoo/qian-duan-kai-fa-de-zai-ci-dian-fan-zhuan-yi-ru-he-zou-chu-hun-luan-bing-rang-fu-za-bian-de-ke-zhang-kong

有社群！

台灣，剛開的 https://www.facebook.com/groups/statecharts

Q: 有沒有 auto generate redux code

"從歷史經驗來看，做 codegen 通常沒什麼好下場"

Q: 國外紅度？

剛紅，文章還稀少

"終於有一次台灣可以跟國外同步潮流了！"

Q: 寫對的一些 訣竅？

"當你寫不下去之後自然就會切"

狀態機沒有標準答案，只要符合你的邏輯的都可以

###### tags: `COSCUP2019` `Open Web Technologies` `IB401`