Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Jeremy Lu
August 18, 2019

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

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

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

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

Jeremy Lu

August 18, 2019
Tweet

More Decks by Jeremy Lu

Other Decks in Programming

Transcript

  1. Jeremy Lu - 過去⼗十五年年在美國擔任軟體⼯工程師 - 專長為各種 web, app 前端開發與 UX

    design - ⽬目前在美國擔任軟體顧問,協助客⼾戶召募、組建與 培訓⼯工程團隊並參參與軟體開發 - @thecat
  2. - redux 是 react 最常搭配的狀狀態管理理⼯工具 - 它是⼀一⼤大包狀狀態不斷轉換到下⼀一包狀狀態 - 任何⼈人,可在任何時間,對整包狀狀態做任意轉換 -

    這個任意的過程很容易易出意外導致程式進入錯誤狀狀態 - 現⾏行行⼿手法無法精準控管狀狀態切換規則並防⽌止錯誤發⽣生 - ⾄至於 boilerplate code 太多的問題今天先下略略五千字
  3. 狀狀態機(FSM) - Finite State Machine / Automaton / DFA -

    1943 年年提出,據今 76 年年 - NASA ⽤用於火星探測 https://youtu.be/VvssxOP95s0 - 嵌入式系統、航太、醫療、⾦金金融業...早⼤大量量採⽤用
  4. Statechart vs. FSM - Statecharts 是樹狀狀結構,解決狀狀態爆炸問題 - ⽀支援 actions 可操作

    side effects - 因此便便於封裝整個商業邏輯於其內 - 所以別被狀狀態機這名詞給騙了了 - Statecharts 是 FSM 威⼒力力加強版 非常適合⽤用於前端開發
  5. 2. 操作 side effects - 例例如讀寫資料庫、操作遠端 API 等外部資料源 - 並在完成

    async 操作後將資料存回 Statecharts 內 - 然後觸發 ui 重繪
  6. 3. 完整封裝商業邏輯 - 商業邏輯 = State + Event + Side

    Effect - ⽅方便便帶著走⽽而不受限於單⼀一平台與框架
  7. 4. 驅動 ui - Statecharts 有變化,UI 就重繪 - 因此 UI

    變成 dumb layer - 只負責繪出畫⾯面 - 與接收⽤用⼾戶輸入(mouse/keyboard) - 也因此可輕易易抽換不同前端框架 - 因為最重要的商業邏輯都封裝在 Statecharts 內 - ⽽而非綁死在 UI 框架內
  8. 更更好測試 - 商業邏輯完全封裝在 Statecharts 內 - 只要針對每個狀狀態與相關事件寫測試就能達到 100% coverage -

    將來來還會有 auto-test 功能可窮盡所有狀狀態與事件 組合找出未知的問題
  9. 商業邏輯⾼高度封裝與可攜 - 商業邏輯完整封裝在 Statecharts 內因此是可攜的 - 精⼼心設計⼀一次可長久使⽤用 - 不需換個平台就要重來來⼀一次 -

    長遠可節省⼤大量量成本 - ⼀一份 Statecharts 可驅動不同前端平台 - 例例如 web、⼿手機、桌機等不同介⾯面 - 等於實現了了 biz logic reuse
  10. UI 變成 dumb layer - 將來來可輕鬆置換不同前端框架,切換成本變的極低 - react, angular, vue,

    jquery...所有框架皆適⽤用 - 菜⿃鳥也可勝任此低階⼯工作,因此徵⼈人與訓練更更容易易
  11. 論⽂文 - Statecharts: a visual formalism for complex systems (June,

    1987) - David Harel, 32 年年前 - http://bit.ly/2Z7Tc5Z
  12. 學術研究已超過三⼗十年年 - 年年代比 haskell (1990) 還久遠⼀一些 - SCXML 是 W3C

    製定的規格 https://www.w3.org/TR/scxml/ - 跟 UML ⼀一樣是世界通⽤用的標準 - 企業界早已廣泛使⽤用 尤其在 Java 與 C++ 領域
  13. 書 - Constructing the User Interface with Statecharts (1999) -

    Ian Horrocks (20 年年前) - 已絕版,但⼤大學圖書館可能還 有,或找電⼦子書,或找我...
  14. 幾個關鍵步驟 - 學習使⽤用 Statecharts 補捉商業邏輯 - 學習開發與測試 Statecharts - 學習

    Statecharts 為主的 UI 開發流程 - Statecharts 與 UI 兩兩部份的開發思維不⼀一樣 腦袋要換⼀一下
  15. ⼼心法 - 剛接觸 Statecharts 時共同的難關都是如何正確 model 程式的商業邏輯 - 只要記得 Statecharts

    設計⼿手法沒有標準答案 只要適⽤用就好 - 並且在開發過程中難免會依需要⽽而反覆修改 這些都是正常的情況
  16. - 最重要的是腦⼦子要換個⽅方式思考 - 就像當年年從 jquery 轉換到 react 時 - 要能從

    imperative 思維轉換為 declarative 思維⼀一般 - 現在要從⼀一⼤大包狀狀態的思維,轉成切片狀狀態的思維 - 並且習慣將商業邏輯與 UI 分開來來想
  17. - Xstate 網站瞭解⼯工具 API https://xstate.js.org/docs/ - Xstate 是 Statecharts 的

    javascript 實作 - Swift, Go, Rust, Python, Java, Haskell 等各⼤大語⾔言也都有不同實作
  18. - Statechart 資訊站瞭解基本概念念與 patterns - https://statecharts.github.io/ 
 - 範例例 -

    https://github.com/coodoo/xstate-examples - 六個不同應⽤用類型範例例 - 包含 Statecharts 書中經典的計算機案例例 - 每個範例例皆附上完整 Statecharts 供按圖索驥
  19. - 社群 - 英⽂文 - https://spectrum.chat/statecharts - 中⽂文 - https://www.facebook.com/groups/

    statecharts/ - 透過臉書提問 - https://www.facebook.com/twthecat