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

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

81bf9a5ec95c07c4884b334456025095?s=47 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

81bf9a5ec95c07c4884b334456025095?s=128

Jeremy Lu

August 18, 2019
Tweet

More Decks by Jeremy Lu

Other Decks in Programming

Transcript

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

  2. 慘案

  3. 如何寫錯⼀一⾏行行程式 讓股價下跌 CEO 當眾出醜 公司名聲掃地 他本⼈人可能也回家吃⾃自⼰己

  4. None
  5. None
  6. None
  7. 故事是這樣的 發起⼀一個 Facetime call 新增⼀一個成員 在對⽅方還沒接聽前 他⼿手機的麥客風即會啟動 因此可聽到他週遭的聲⾳音

  8. 為何會發⽣生這種嚴重失誤?

  9. 更更重要的是為何無法事 前防⽌止?

  10. None
  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/

  31. None
  32. Statechart vs. FSM - Statecharts 是樹狀狀結構,解決狀狀態爆炸問題 - ⽀支援 actions 可操作

    side effects - 因此便便於封裝整個商業邏輯於其內 - 所以別被狀狀態機這名詞給騙了了 - Statecharts 是 FSM 威⼒力力加強版 非常適合⽤用於前端開發
  33. None
  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?