​​Angular / Vue / React 框架優缺點分析
​​
​​
​​Angular
​​Vue
​​React
​​優點
​​
​​
​​
​​
​​
​​
​​
​​
​​
​​
​​
​​
​​
​​
​​
​​
​​
  • ​​工具支援豐富
  • ​​Angular CLI
  • ​​Schematics (程式碼產生器)
  • ​​VSCode + Angular 語言服務
  • ​​採用物件導向架構(OOP)
  • ​​架構本身非常 SOLID
  • ​​內建相依性注入 (DI)
  • ​​豐富的表單功能
  • ​​Template-driven Form
  • ​​Reactive Form
  • ​​C#/Java 開發者容易上手
  • ​​不知不覺寫出不差的架構
  • ​​Angular CLI + Style Guide
  • ​​ng lint​
  • ​​元件的可測試性非常高
  • ​​所有元件的測試方式都有範例
  • ​​非常容易透過 webpack 進行 CI/CD
  • ​​幾乎沒有選擇障礙的問題，所有第三方套件已經都預選好了
  • ​​元件化架構與事件容易理解
  • ​​架構類似 NG1 + NG2 + React
  • ​​單學習 Vue，對新手的學習門檻低
  • ​​容易在中國找到開發者
  • ​​不需要有 OO 或 FP 觀念也可進入開發
  • ​​對設計或純前端開發者容易上手
  • ​​尊重開發者既有習慣
  • ​​可以訓練團隊溝通協調的能力
  • ​​因為很多格式/寫法難以統一規範
  • ​​原生支援 TypeScript, JavaScript, ReasonML
  • ​​支援各家程式語言 (如: ClojureScript, PureScript, F#)
  • ​​React 是函式庫，不受框架限制，可以自由變化組合
  • ​​非常純粹，沒有 DSL，概念精簡、運作效率高
  • ​​採用 JSX 宣告式程式設計，專注目標而非流程
  • ​​開發風格不受限，可自由採用喜愛的開發風格
  • ​​物件導向程式設計 (OOP)
  • ​​函數式程式設計 (Functional Programming, FP)
  • ​​應用場合不受限，相同語法可以用在網站、行動裝置、圖形介面 (GUI) 和文字介面 (TUI)
  • ​​React Native
  • ​​React
  • ​​豐富的第三方套件，可以量身訂作組出更合適的系統
​​缺點
​​
​​
​​
​​
​​
​​
​​
​​
​​
  • ​​架構不夠彈性/自由 (但是已經非常完整)
  • ​​第三方 JS 整合門檻較高
  • ​​強制 TypeScript 也是個門檻
  • ​​小型網站殺雞用牛刀?
  • ​​透過 Angular Elements 才能無縫整合進現有 Legacy 網頁架構
  • ​​沒有 DI (很難解決元件耦合問題)
  • ​​與 TypeScript 整合不易
  • ​​Template 缺乏語言服務
  • ​​刻好 Webpack 不容易
  • ​​為效能/優化提心吊膽 (人命是自己搞出來的)
  • ​​程式撰寫風格不容易統一 (缺乏工具檢查)
  • ​​架構各開發者各自為政
  • ​​團隊協作時容易造成混亂或累積技術債
  • ​​後續維護成本難以估計
  • ​​函式庫的迭代進步速度不足
​​
​​
​​
  • ​​沒有 CLI，最接近的工具是 create-react-app
  • ​​運作思維並非 template，需改變切版套版習慣
  • ​​最佳實務隨時在改，日新月異變化太快
  • ​​系統架構和設計的每個環節都要自己來
  • ​​React 官方未提供預設的專案架構範本
  • ​​若無一定的技術掌握能力，容易寫出可怕架構
  • ​​第三方套件需要逐一挑選，需耗費大量時間和成本
  • ​​測試工具 (單元測試、E2E)
  • ​​風格規範、代碼檢查 (ESLint, Prettier, etc…)
  • ​​建置工具 (Webpack, Parcel, Browserify, etc…)
​​