[Functional Vue Architecture] 你應該用 Functional 的方式來想怎麼寫 Vue #vue

vue.md

Functional Vue Architecture

Sam Xiao, Feb.18, 2019

Web 所面臨的挑戰

後端 MVC

約在 2015 年，主流的 Web 開發架構仍以後端 MVC 為主：

1. PHP / Laravel
2. Ruby / Ruby on Rails
3. C# / .NET MVC
4. Python / Django

這類都是 後端 以 MVC 為主，前端 以 jQuery / Ajax 為輔的架構。

這種架構有幾個挑戰：

1. 有於重點在後端，時常必須換頁到後端去，使用者會明顯感受到網頁重新載入，視覺與使用感受較差
2. 若想減少換頁到後端，就必須大量使用 jQuery / Ajax，則前端就會有大量 JavaScript
3. 由於 JavaScript 缺乏 module 概念，實務上常常會看到上千行的 jQuery / JavaScript，導致維護困難
4. 由於 jQuery / JavaScript 是躲在後端網頁內，因此大部分的 jQuery / JavaScript 都是由後端工程師撰寫，但由於 JavaScript 語言特性與後端語言明顯的差異，大部分後端工程師選擇逃避原生 JavaScript，而改用較容易的 jQuery，此時都是 Web 工程師都是 全端工程師
5. 也由於使用 jQuery，導致大部分 全端工程師 並沒有深入研究 JavaScript，而是認為前端只是控制 HTML / DOM 而已，jQuery 足以，因此沒必要深入研究 JavaScript，導致一些 JavaScript 很重要的語言特性被忽略 (Higher Order Function、Closure、IIFE、Function Composition ...)，其實這些 Functional 的語言特性，才是 JavaScript 的精華所在

前後端分離

2015 年開始有一些前端 framework 展露頭角，如 AngularJS、React：

1. 後端只寫到 API，以 JSON 與前端溝通
2. 顯示邏輯 寫在前端，而不是以 Presenter Pattern 寫在後端，因此沒有網頁重新載入，視覺與使用感受佳
3. 前端開始有 Component 概念，也開始使用 ES6 (ECMAScript 2015) 的 module 概念，因此不再出現上千行 JavaScript，容易維護
4. 由於使用 ECMAScript 2015，與原本 JavaScript 相比幾乎是全新語言，有學習門檻
5. 前端技術發展迅速，開始有
   • Node.js 生態圈 (NPM、Yarn)
   • ECMAScript 每年會更新一版 (2015 ～2019)
   • Babel / Webpack 編譯打包技術 + ESLint (即使 JavaScript 不編譯，亦可享有編譯的優點)
   • 層出不窮的 library (RxJS、Ramda ...)
   • 層出不窮的 framework (Angular、React、Vue)
   • 由於前端技術爆炸，已經不再只有 jQuery，後端也要精通前端已經有難度，因此前後端開始分家，開始有所謂 前端工程師

前端的變革

相較於 jQuery、前端開始有了新的概念：

1. Data Binding：傳統 jQuery 直接控制 DOM；現在前端改為控制 data，現在由 framework 處理 data 與 DOM 的改變
2. Reactive Programming：傳統 jQuery 是根據 event 去做相對應的處理；現在將 event 視為 stream 處理 (RxJS)
3. Functional Programming：由於 JavaScript 深具 Functional 語言特性 (以 Scheme 為原型)，原本 OOP 的 MVC 架構蛻變為 FP 的 Pipeline (單向資料流) 架構 ( React 的 Redux、Vue 的 Vuex)
4. Webpack Tree-shaking：由於 OOP 大量使用 field，導致 Tree-shaking 無法有效發揮，前端開始使用 FP 方式，以 function 取代 class，並使用 FP 的 Function Composition 取代 OOP 的 DI (Ramda)

可以發現前端的改變：

1. 從控制 DOM 轉為控制 data，回歸程式設計的本質
2. 由 Object Oriented Programming 改為 Functional Programming

Vue

Vue 吸取 React 與 Angular 的優點：

1. 從 Angular 學到學習門檻較低的 HTML Template，而非 React 的 JSX
2. 從 Angular 學到 directive 控制 HTML，而非 React 直接以 JavaScript 夾雜 HTML
3. 從 React 學到 Component 概念，使得 顯示邏輯 得以模組化
4. 從 React 學到 狀態管理 概念 (Redux) ，讓跨 component 的溝通更加簡單 (Vuex)
5. Vue 前期學 Angular 較多，後期則明顯向 React 靠攏

儘管如此，Vue 也有自己的缺點：

1. Vue 的 data、computed、props、method ... 都必須靠 this 存取，這是一種具有 Side Effect 的寫法，且有於 this 的可變性，導致 Vue 重構的困難

2. Vue 寫法多元，最原始寫法是一種依賴 this，很像 OOP 又不是 OOP 寫法，後來又開發出 class-component，這是正統 OOP 寫法，風格很像 Angular，但也由於太偏 OOP，導致大部分人寫 Vue 都使用 OOP 思維，而忘記 JavaScript 最重要的 Functional 特性 (Higher Order Function、Closure、IIFE、Function Composition ...)

Functional Vue

• Vue 的 data、computed、props、method 這些本質都是 function，不要將這些寫在 Option Object 內，而將所有的 function 拉出來，也由於看到的是一條條 function，不是 OOP 的 method，有助於發現重複的部分以 Higher Order Function 重構

• 除了 HTML Data Binding 的資料放在 data 外，不要把 data 當成 OOP 的 field 使用，如此可避免使用 Side Effect 寫法，而改用 Pure Function 風格

• 將資料從 data 搬到 Vuex 的 state，由於 state、getter、mutation 與 action 不使用 this，Vue 可徹底從 ES5 的 function 寫法解放，全面改用 ES6 的 Arrow Function

• 也由於 state、getter、mutation 與 action 本質上都是 function，可以很容易抽成 Higher Order Function，也可以使用 Ramda / RxJS 這類 Functional Library，透過 Function Composition 產生 state、getter、mutation 與 action

• 也由於所有的 function 都沒有 this，都是 Pure Function 沒有 Side Effect，因此很容易重構到適當 module，不必被 Vue 的 component 或 mixin 所綁架