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

你總好奇為何在學會 react 與元件化思考後，手邊程式卻仍有修不完的臭蟲且難以測試，而專案也總會逐漸變的混亂並失去控制？本場將說明前端開發總是緩慢、易錯與難以控管的根本原因並提出一勞永逸的解決方案，不但能杜絕已知所有弊病並大幅改善開發流程與效率，這是你不可錯過的次世代典範轉移。

討論區:
https://www.facebook.com/groups/statecharts/

COSCUP 2019
https://coscup.org/2019/en/programs/624113ac-2f80-4102-86e0-5ea8a257e1c9

Transcript

1. 前端開發的再次典範轉移 如何走出混亂並讓複雜變得可掌控 Jeremy Lu
2. 慘案
3. 如何寫錯⼀一⾏行行程式 讓股價下跌 CEO 當眾出醜 公司名聲掃地 他本⼈人可能也回家吃⾃自⼰己
7. 故事是這樣的 發起⼀一個 Facetime call 新增⼀一個成員 在對⽅方還沒接聽前 他⼿手機的麥客風即會啟動 因此可聽到他週遭的聲⾳音
8. 為何會發⽣生這種嚴重失誤？
9. 更更重要的是為何無法事 前防⽌止？
11. Jeremy Lu - 過去⼗十五年年在美國擔任軟體⼯工程師 - 專長為各種 web, app 前端開發與 UX design - ⽬目前在美國擔任軟體顧問，協助客⼾戶召募、組建與 培訓⼯工程團隊並參參與軟體開發 - @thecat
12. FullStackRocks.com
13. 先講重點
14. - ⽬目前⼈人們使⽤用的狀狀態管理理⼿手法有重⼤大缺陷 - 導致程式問題層出不窮且無法根絕 - 今天將提供完美解法
15. 狀狀態管理理的常⾒見見問題
16. 有多少⼈人寫過類似這樣 的程式？ if( isEditable ){...}
17. 不久後長⼤大變成這樣... if( isEditable && isDirty && isLoggedIn && hasCredits() && … )
18. 如果你有下列列症狀狀 就代表中招了了 - 發現隨著時間更更替程式越長越⼤大 - 狀狀態變的越來來越複雜與難管控 - 到後來來根本改不動程式因為怕掛⼀一漏萬 - 或想寫更更多測試祈禱能窮盡所有錯誤情況 - 簡單講就是程式已接近失控邊緣 - 然後開始想差不多是遞辭呈另謀⾼高就的時刻了了
19. 為何 redux 也解決不了了問題？
20. (oldState, action) -- reducer --> (newState)
21. - redux 是 react 最常搭配的狀狀態管理理⼯工具 - 它是⼀一⼤大包狀狀態不斷轉換到下⼀一包狀狀態 - 任何⼈人，可在任何時間，對整包狀狀態做任意轉換 - 這個任意的過程很容易易出意外導致程式進入錯誤狀狀態 - 現⾏行行⼿手法無法精準控管狀狀態切換規則並防⽌止錯誤發⽣生 - ⾄至於 boilerplate code 太多的問題今天先下略略五千字
22. 其實幾⼗十年年來來 早有可靠解法
23. 狀狀態機(FSM) - Finite State Machine / Automaton / DFA - 1943 年年提出，據今 76 年年 - NASA ⽤用於火星探測 https://youtu.be/VvssxOP95s0 - 嵌入式系統、航太、醫療、⾦金金融業...早⼤大量量採⽤用
24. 直⽩白講就是我們來來晚啦！
25. 可惜 FSM 狀狀態爆炸的問 題⼀一直存在
26. Statecharts 提供完美解法
27. Statecharts 是什什麼？ - 是⼀一種描述式語⾔言 - 讓⼯工程師⽤用 declarative 的⽅方式描述程式內 所有可能狀狀態與每個狀狀態下允許的操作 - 也就是 Making the impossible, impossible - 讓不可能發⽣生的狀狀態，絕無機會發⽣生
28. SCXML
29. Javascript
30. https://statecharts.github.io/xstate-viz/
32. Statechart vs. FSM - Statecharts 是樹狀狀結構，解決狀狀態爆炸問題 - ⽀支援 actions 可操作 side effects - 因此便便於封裝整個商業邏輯於其內 - 所以別被狀狀態機這名詞給騙了了 - Statecharts 是 FSM 威⼒力力加強版 非常適合⽤用於前端開發
34. Statecharts 能做些什什麼？
35. 1. 將狀狀態切片管理理 - 每⼀一片代表⼀一個商業羅輯 - 例例如 beforeLogin, loggedIn 就是兩兩片狀狀態， 可分別處理理兩兩種商業邏輯 - 在不同狀狀態下能做的事受到嚴格限制
36. 2. 操作 side effects - 例例如讀寫資料庫、操作遠端 API 等外部資料源 - 並在完成 async 操作後將資料存回 Statecharts 內 - 然後觸發 ui 重繪
37. 3. 完整封裝商業邏輯 - 商業邏輯 = State + Event + Side Effect - ⽅方便便帶著走⽽而不受限於單⼀一平台與框架
38. 4. 驅動 ui - Statecharts 有變化，UI 就重繪 - 因此 UI 變成 dumb layer - 只負責繪出畫⾯面 - 與接收⽤用⼾戶輸入(mouse/keyboard) - 也因此可輕易易抽換不同前端框架 - 因為最重要的商業邏輯都封裝在 Statecharts 內 - ⽽而非綁死在 UI 框架內
39. 立即的好處
40. 強迫開發者盡早想清楚 商業邏輯並清楚寫出來來 - 畢竟程式開發的⽬目地就是為了了滿⾜足商業邏輯 (解決實際需求) - 以往會急著跳下去寫程式再慢慢摸索商業邏輯 - 現在正好反過來來，⼀一開始先強迫想清楚商業邏輯， 有問題就能即早發現並修改，這樣成本最低
41. 開發速度更更快 - 每次只專⼼心處理理⼀一⼩小片狀狀態內可能發⽣生的事， ⽽而非⼀一⼤大包狀狀態交互影響 - 其餘⼀一律律忽略略，因此無需擔⼼心意外處理理到 不該碰的事件 - 並且也能補捉那些沒⼈人偵聽的事件 進⽽而判斷可能是 ui 端出錯了了
42. 更更容易易除錯 - 只要追蹤程式⽬目前所在的狀狀態與可能發⽣生的事件 即可找出原因 - 不像過去需翻遍整份 codebase 去找原因
43. 更更好測試 - 商業邏輯完全封裝在 Statecharts 內 - 只要針對每個狀狀態與相關事件寫測試就能達到 100% coverage - 將來來還會有 auto-test 功能可窮盡所有狀狀態與事件 組合找出未知的問題
44. 狀狀態與 UI 可平⾏行行開發 - 讓資深⼯工程師與專案經理理、設計師先專⼼心規畫 Statecharts - 同時間菜⿃鳥可先開始製作元件與單⼀一畫⾯面 - 等 Statecharts 完成後兩兩邊再會師 - 因此開發時間可縮短⼀一半
45. 長期的好處
46. 商業邏輯⾼高度封裝與可攜 - 商業邏輯完整封裝在 Statecharts 內因此是可攜的 - 精⼼心設計⼀一次可長久使⽤用 - 不需換個平台就要重來來⼀一次 - 長遠可節省⼤大量量成本 - ⼀一份 Statecharts 可驅動不同前端平台 - 例例如 web、⼿手機、桌機等不同介⾯面 - 等於實現了了 biz logic reuse
47. UI 變成 dumb layer - 將來來可輕鬆置換不同前端框架，切換成本變的極低 - react, angular, vue, jquery...所有框架皆適⽤用 - 菜⿃鳥也可勝任此低階⼯工作，因此徵⼈人與訓練更更容易易
48. 適⽤用於前、後端各種情境 - DevOps, CQRS, event sourcing, job scheduling 等多步驟⼯工作也適⽤用 - 總之只要需要狀狀態管理理的地⽅方都能派上⽤用場
49. 歷史背景
50. 論⽂文 - Statecharts: a visual formalism for complex systems (June, 1987) - David Harel, 32 年年前 - http://bit.ly/2Z7Tc5Z
51. 學術研究已超過三⼗十年年 - 年年代比 haskell (1990) 還久遠⼀一些 - SCXML 是 W3C 製定的規格 https://www.w3.org/TR/scxml/ - 跟 UML ⼀一樣是世界通⽤用的標準 - 企業界早已廣泛使⽤用 尤其在 Java 與 C++ 領域
52. 書 - Constructing the User Interface with Statecharts (1999) - Ian Horrocks (20 年年前) - 已絕版，但⼤大學圖書館可能還 有，或找電⼦子書，或找我...
53. 如何上⼿手？
54. 幾個關鍵步驟 - 學習使⽤用 Statecharts 補捉商業邏輯 - 學習開發與測試 Statecharts - 學習 Statecharts 為主的 UI 開發流程 - Statecharts 與 UI 兩兩部份的開發思維不⼀一樣 腦袋要換⼀一下
55. ⼼心法 - 剛接觸 Statecharts 時共同的難關都是如何正確 model 程式的商業邏輯 - 只要記得 Statecharts 設計⼿手法沒有標準答案 只要適⽤用就好 - 並且在開發過程中難免會依需要⽽而反覆修改 這些都是正常的情況
56. - 最重要的是腦⼦子要換個⽅方式思考 - 就像當年年從 jquery 轉換到 react 時 - 要能從 imperative 思維轉換為 declarative 思維⼀一般 - 現在要從⼀一⼤大包狀狀態的思維，轉成切片狀狀態的思維 - 並且習慣將商業邏輯與 UI 分開來來想
57. Thinking in Component
 Thinking in State(chart) ⬇ 2013 2019
58. 教學資源
59. - Xstate 網站瞭解⼯工具 API https://xstate.js.org/docs/ - Xstate 是 Statecharts 的 javascript 實作 - Swift, Go, Rust, Python, Java, Haskell 等各⼤大語⾔言也都有不同實作
60. - Statechart 資訊站瞭解基本概念念與 patterns - https://statecharts.github.io/ 
 - 範例例 - https://github.com/coodoo/xstate-examples - 六個不同應⽤用類型範例例 - 包含 Statecharts 書中經典的計算機案例例 - 每個範例例皆附上完整 Statecharts 供按圖索驥
61. - 社群 - 英⽂文 - https://spectrum.chat/statecharts - 中⽂文 - https://www.facebook.com/groups/ statecharts/ - 透過臉書提問 - https://www.facebook.com/twthecat
62. 搞懂 Statecharts 應⽤用技 可能會是職涯最值得的⼀一筆投資 終⽣生受⽤用！
63. Making the impossible, impossible!
64. @thecat | jeremy@pubulous.com Founder, builder and instructor, FullStackRocks.com Questions?