早期常見後端整合前端的開發框架相當多元，各個語言與平台，幾乎都有相對應的開發框架可供選擇，像是 .NET 的 ASP.NET Web Form 與 ASP.NET MVC、Java 的 Spring Framework、PHP 的 Laravel、Ruby 的 Rails、... 等等。但近幾年，前後端分離的架構日益盛行，所帶來的效益也漸漸被大家看見。不過，對企業來說，就算我們知道前後端分離的概念，也知道可以帶來什麼效益，但面臨這突如其來的架構巨變，企業又該如何因應呢？ 前端框架這些年不斷推陳出新，從多年前的如雨春筍，到現在的三強鼎立 (Angular, React, Vue)，這條路確實不好走。一般企業在引入新技術的過程，總是十分謹慎，畢竟要考量的地方不僅僅是簡單、好上手而已，長遠來說，技術整體的架構性、延展性、功能性、維護性、易用性、工具支援、商業支援等綜合考量，也許更加重要！ 網路上，可以看到許多 Angular, React, Vue 評比的文章，相互謾罵、信仰崇拜的人都有，讓人看得眼花撩亂、目不暇給，這反而讓許多人對前端框架的採用望之卻步。因此，我們特別舉辦這場【企業前端框架趨勢論壇】，帶你理性分析 Angular, Vue, React 的現在與未來，不只是聽我們說，還提供線上表單讓你們問，透過一個下午，來場不一樣的分享活動！ 本次活動包含一場專題演講，由 Will 保哥進行專題演說，帶大家從不同的角度分析三套前端框架，你可以從中獲得靈感，降低選擇障礙。演講完後，則是專家座談時間，我們邀請到兩位 Vue 專家、兩位 React 專家、兩位 Angular 專家，在現場進行一場深度交流，同時也開放現場會眾提問。這難得的機會，邀請大家共襄盛舉，一同前往本活動參與交流！

1. 企業前端框架趨勢論壇
多奇數位創意有限公司
技術總監 黃保翕 ( Will 保哥 )
部落格：http://blog.miniasp.com/
分析 Angular, Vue, React 的現在與未來

2. 框架發展現況
Current Status

3. 各前端框架大致現況
Angular Vue React
官方網站 http://angular.io https://vuejs.org https://reactjs.org
發展主力 Google 尤雨溪 / Communities Facebook
最新版本
Release: 6.1.7
Beta: 7.0-beta.5
Release: 2.5.17
Beta: v2.5.17-beta.0
Release: 16.5
Beta: 17.0
命令列工具 Angular CLI v6.2.1 Vue CLI v3.0.3 沒有官方的 CLI
官方文件 豐富且充足 豐富且充足 相對少
中文文件 官方文件翻譯完整 官方文件翻譯完整 稀少
台灣社群 Angular Taiwan Vue.js Taiwan 台灣 ReactJS.tw
專案位址
https://github.com/
angular/angular
https://github.com/vuejs/
vue
https://github.com/
facebook/react
3

4. 前端框架評比要點
Frontend Framework Comparisons

5. 一句話介紹前端框架
Vue
簡單且容易使用，
適合設計師與前
端新手快速上手
5
Angular
完整而全面的前端
框架，適合多人開
發中大型企業應用
React
簡單且強大，與 JS
深度整合，透過 JSX
將網頁融入前端開發

6. 前端框架評比要點 (大致概況)
評比項目 Angular Vue React
框架類型 完整框架
(已經是完整框架)
函式庫
(朝向完整框架發展)
函式庫
(擁有多元的生態圈)
中文化資源 高 高 低
主要程式語言 TypeScript/Dart JavaScript/TS JavaScript/JSX/Flow
未來的發展性
穩定迭代 (勝)
(Roadmap)
僅大方向
(Roadmap)
未知
整體學習曲線
多重頁面/中 (勝)
單一頁面/中
多重頁面/高
單一頁面/低 (勝)
多重頁面/高
單一頁面/中

7. 前端框架評比要點 (前端工程架構)
評比項目 Angular Vue React
網站模組化架構 內建標準做法 (勝) 自行設計 自行設計
開發複雜度
小型網站/中
大型網站/中 (勝)
小型網站/低 (勝)
大型網站/高
小型網站/中
大型網站/高
網站開發架構一致性 極高 (勝) 中 (自由度高) 低 (自由度高)
開發風格方面的彈性 低 高 極高
架構成熟度/穩定度 高 高 高

8. 前端框架評比要點 (開發生產力)
評比項目 Angular Vue React
開發工具支援度 極高 (勝) 中 高
元件市場成熟度 高 高 高
程式碼產生器 Angular CLI (官方) Vue CLI (官方) umi.js
版本升級工具 Schematics (勝) 無 無
是否容易重構 容易 (勝) 困難 困難

9. 前端框架評比要點 (其他)
評比項目 Angular Vue React
開發最佳實務 官方提供 (優) 官方提供 (良) 社群支援 (良)
伺服器端渲染 / SEO
Rendertron
Angular Universal
App Shell
Rendertron
Nuxt.js
Rendertron
Next.js
與現有後端框架整合 難 易 (勝) 中

10. 框架類型
Framework Types

11. 完整框架 vs. 函式庫
完整框架
• 元件架構
• 資料繫結
• 事件處理
• 生命週期
• 表單驗證
• 相依注入 (DI)
• SPA 多頁面路由
• AOT / Compiler
• 開發工具語言服務
• 多國語系
函式庫
• 元件架構
• 資料繫結
• 事件處理
• 生命週期
11

12. 三大框架都有完整的開發生態系
• Angular
– 由 Google 主導的開發生態系 (專職的開發團隊)
– 完全透明的開源專案，所有發展過程與專案管理皆於 GitHub 完成
• React
– 由 Facebook 負責 React 核心維護
– 主要的開發生態系還是由各大新創公司共同打造
• Netflix, New York Times, Microsoft, … 族繁不及備載
• Vue
– Vue 核心函式庫主要由 尤雨溪 (Evan You) 親自維護 (近期專訪)
– 其他則由獨立團隊維護 (非公司) (資金來源就是贊助商、廣告等)

13. 整體學習曲線
Learning Curve

16. 不同前端框架的學習成本
16
評比項目 Angular Vue React
整體學習曲線
多重頁面/中 (勝)
單一頁面/中
多重頁面/高
單一頁面/低 (勝)
多重頁面/高
單一頁面/中
新手上路 7 hrs. 3 hrs. (勝) 7 hrs.
表單開發 7 hrs. (勝) 7 hrs. (無標準做法) 14 hrs.
路由機制 7 hrs. 7 hrs. 14 hrs.
路由延遲載入 完整功能內建 完整功能內建 需第三方套件
專案環境建置 簡單 (Angular CLI) 簡單 (Vue CLI) 隨時間變複雜
狀態管理機制 Service, NgRx, NGXS vuex redux

17. 三大框架的學習地圖
• Angular Developer Roadmap
– https://github.com/sulco/angular-developer-roadmap
• React Developer Roadmap
– https://github.com/adam-golab/react-developer-roadmap
– 中文版：React 开发者指南
• Vue Developer Roadmap
– https://github.com/flaviocopes/vue-developer-roadmap
17

18. 如何學好任何一套前端框架
• 學好 HTML, CSS, JavaScript 基礎
• 認真閱讀各框架的官方文件
• 多報名實體課程或線上課程
– 一定要找業界知名講師學習 (前端世界擁有實戰經驗超重要)
• 經常參加社群活動吸收新知
– 最好是能主動參與分享知識，分享的過程會學到更多！
• 找專家定時幫忙 Code Review (重要)
18

19. 如何學好 Angular
• 學好 HTML, CSS, JavaScript 基礎
– ES5, ES2015, ES2016, ES2017, …
– Basic DOM APIs
• 了解 TypeScript 與物件導向觀念
– 了解強型別觀念與價值
– 類別、介面、封裝、繼承
– OOP/OOAD, SOLID, SoC, IoC, DI
– 這部分對後端開發人員相對容易上手
• 學習 RxJS 函式庫處理非同步事件
• 熟悉並善用你的開發工具
– Visual Studio Code 19

20. 如何學好 React
• 學好 HTML, CSS, JavaScript 基礎
– ES5, ES2015, ES2016, ES2017, …
– Basic DOM APIs
• 了解函數編程概念 (Functional Programming)
– Pure Function, Haskell, Category Theory
• 多向大神學習最新的開發觀念與技巧
– 每隔一段時間就會有新的觀念出來，之前的常見寫法可能會被推翻
• 學好 JavaScript 基礎
• 學好 JavaScript 基礎
• 學好 JavaScript 基礎
20

21. 21
中国首届React开发者大会
https://react.w3ctech.com/
2018/08/18 @ 广州
A WAY TO IMPROVE REACT SKILL
https://twitter.com/thelarkinn/status/1030741494079127553

22. 如何學好 Vue 框架
• 學好 HTML, CSS, JavaScript 基礎
– 學會基礎物件、函式、Hoisting、Scoping 觀念即可
– Basic DOM APIs
• 定時重構並盡可能維持編程風格的一致性
– 沒有 TypeScript 的型別檢查，重構會有點風險！
– 建議導入單元測試架構
• 整合第三方資源應慎重考慮穩定性
• 維持簡單明瞭的架構
22

23. 主要程式語言

24. 不同框架主要採用的程式語言
• Angular
– TypeScript
– Dart
• React
– JavaScript ( ES6+ )
– JSX
– TypeScript
– Flow
• Vue
– JavaScript
– TypeScript ( Vue CLI 3 對 TypeScript 支援度有顯著提升 )

25. TypeScript
語言特性
TypeScript
3.x
ES 2015+
ES5

26. 各框架寫法比較 – Vue 篇 - 1
26
• *.vue

27. 各框架寫法比較 – Vue 篇 - 2
27
• *.vue

28. 各框架寫法比較 – Vue 篇 - 3
• *.vue ( vue-loader )
28

29. 各框架寫法比較 – Vue 篇 - 4
29

30. 各框架寫法比較 – React 篇 - 1
30
• Pure Function Syntax (Dummy Component)

31. • ES2015 + extends
各框架寫法比較 – React 篇 - 2
31

32. 各框架寫法比較 – Angular 篇
32

33. 中文化資源

34. 各框架中文文件支援
• Angular
– https://angular.cn/
• Vue
– https://cn.vuejs.org/
• React
– https://doc.react-china.org/

35. 前端工程架構
Frontend Engineering Architecture

36. 前端框架評比要點 (前端工程架構)
評比項目 Angular Vue React
網站模組化架構 內建標準做法 (勝) 自行設計 自行設計
開發複雜度
小型網站/中
大型網站/中 (勝)
小型網站/低 (勝)
大型網站/高
小型網站/中
大型網站/高
網站開發架構一致性 極高 (勝) 中 (自由度高) 低 (自由度高)
開發風格方面的彈性 低 高 極高
架構成熟度/穩定度 高 高 高

37. 各框架模組化設計
• Angular
– 內建完整的 NgModule 設計架構、完整的 DI (相依注入) 架構
– 內建可「延遲載入」的路由機制、內建 Angular Library 共享函式庫
• React
– 未包含建議的模組化設計，必須自行規劃
• Vue
– 未包含建議的模組化設計，必須自行規劃

38. 各前端架構的架構成熟度/穩定度/發展重點
• Angular
– 發展過程趨於穩健、保守 (Angular 的版本與發佈)
– 近兩年的發展主要專注於工具支援與核心調整
• React
– 發展過程較會有創新想法 ( 因為隨著 JS 一同發展 )
– 近一年比較著墨在狀態管理方面 (但導致相容性問題)
• Vue
– 會主動學習其他框架優點，有不錯的都會想辦法加入
– 近期開發發展目前較為欠缺的 SSR、內部 API 架構、整合
TypeScript 與工具支援 (Roadmap)

39. 专访Vue作者尤雨溪：Vue CLI 3.0重构的原因
• 一則有趣的留言 😆
39

40. 40

41. 開發生產力
Development Productivity

42. 前端框架評比要點 (開發生產力)
評比項目 Angular Vue React
開發工具支援度 極高 (勝) 中 高
元件市場成熟度 高 高 高
程式碼產生器 Angular CLI (官方) Vue CLI (官方) umi.js (非官方)
版本升級工具 Schematics (勝) 無 無
是否容易重構 容易 (勝) 困難 困難

43. Angular 元件市場
• Angular Material ( 官方元件庫 )
• PrimeNG
• ngx-bootstrap
• NG-ZORRO ( 阿里巴巴主導 )
• Clarity Design System ( VMWare )
• DevExtreme Angular Components (DevExpress) (商用)
• Angular 2+ Components & Libraries

44. Vue 元件市場
• Vuetify.js (Vue.js Material Component Framework)
• Element (Vue.js 2.0 UI Toolkit for Web)
• Vue Material
• Keen UI
• Buefy
• Fish-UI
• Vux
• A curated list of awesome things related to Vue.js

45. React 元件市場
• Material-UI
• React Bootstrap ( bootstrap 3 )
• Ant Design React
• Grommet
• Blueprint
• Reactstrap
• React Toolbox
• React Components & Libraries

46. Vue 程式碼產生器
• Vue CLI 3
– npm i -g @vue/cli
– vue ui
– vue create vue1 -d
– npm run serve
– npm run build
– npm run lint
46

47. React 程式碼產生器
• UmiJS
– npm i -g umi
– mkdir myapp && cd myapp
– umi g page index
– umi g page users
– umi dev
– umi build
47

48. Angular 程式碼產生器
• Angular CLI
– npm i -g @angular/cli
– ng new demo1
– cd demo1
– npm start
– npm run build
– npm run lint
• Angular Console
48

49. Angular Schematics 程式碼產生器
• 替你的專案加上新功能
– ng add @angular/pwa
– ng add @angular/material
– ng add @ng-bootstrap/schematics
– ng add @angular/elements
– ng add ng-zorro-antd
– ng add ngcli-wallaby
• 升級你的 Angular 專案
– ng update
• 自訂程式碼產生器
– ng add @willh/hmr 49

50. 開發最佳實務

51. 各框架開發最佳實務
• Angular
– Angular Style Guide (官方建議)
– 擁有較為完整的風格指南，從整體架構、命名規則、編程風格、模
組化建議，可以從中學習許多知識。
• Vue
– Vue Style Guide (官方建議)
– 僅命名規則、編程風格，缺乏中大型網站的架構建議。
• React
– Airbnb React/JSX Style Guide (非官方版本)
– 僅命名規則、編程風格，缺乏中大型網站的架構建議。

52. 伺服器端渲染 / SEO
Server-side Rendering / Search Engine Optimization

53. Deprecating our AJAX crawling scheme
Wednesday, October 14, 2015
53

54. 各框架如何解決 SEO 搜尋引擎優化問題
• 通用的解決方法
– Rendertron ( 以 https://doggy8088.github.io/sb-admin-2-ng6/ 為例 )
• Angular SSR
– Angular Universal
– App Shell
• Vue SSR
– Nuxt.js
• React SSR
– Next.js
54

55. 我該如何選擇前端框架？
How do I choose a frontend framework?

56. 從職能的角度來看前端框架的選擇
個人開發者 團隊開發者
後端工程師 Angular / Vue Angular
前端設計師 Vue / Angular Vue / Angular
前端工程師 Angular / Vue / React Angular / Vue / React
56

57. 從需求的複雜度來看前端框架的選擇
個人開發者 團隊開發者
活動網站
Angular / Vue / React
jQuery
Angular / Vue / React
jQuery
小型電商 Vue / Angular / React Vue / Angular
企業應用 Angular / Vue Angular
57

58. 你也許不用這麼急著選擇前端框架
• 先講究不傷身體，再講求效果
– 有時候，在時間內能做出結果比較要緊！
– 如果一直在砍樹，卻忘了把斧頭磨利，總有一天會感到事倍功半。
• 如果沒有痛苦的感覺，可以先不用急著轉換技術
– No pain, no gain.
• 認識「微前端」( Micro Frontends )
– building a modern web app with multiple
teams using different JavaScript frameworks.
58

59. 微前端 ( Micro Frontends )
• Be Technology Agnostic
– 多個團隊中選用什麼前端技術都可以
– 只要支援 Custom Elements 就可以整合任何團隊開發的前端作品
• Isolate Team Code
– 團隊之間不共用 Runtime，所有元件各自獨立，程式碼也無相依性
– 即便多個團隊採用相同的框架，也不需要共用 Runtime
• Establish Team Prefixes
– 透過適當的命名區隔不同元件
– 元件之間的 CSS, Events, Local Storage, Cookies 都不能互相影響
• Favor Native Browser Features over Custom APIs
– 使用標準的瀏覽器事件，用來溝通不同元件之間的訊息與狀態
• Build a Resilient Site
– 即便 JS 執行失敗也不影響網頁呈現，適當的使用 SSR 與 PWA 改善效能
59

60. 相關連結
• 在 2018 年的时间点，Angular、React、Vue三选一，你更看好谁？为什么？ - 知乎
• Angular V/S Vue V/S React – Choose the Best in 2018 | Official Blog of Azilen
• Angular vs. React vs. Vue: A 2017 comparison – unicorn.supplies – Medium
• Angular 2018 roadmap includes Ivy Renderer, Angular Elements, Bazel and more
• React, Angular, and Vue: Which One Is Best and Why - DZone Web Dev
• What Is Better for Web Development, React or Angular? - DZone Web Dev
• evilpingwin comments on Vue.js or React ? Which you would chose and why?
• Angular vs React 穩定發展與創新技術的抉擇
• [JSDC2017] 從 VueJS 看前端生態圈的發展變化 - Speaker Deck
• Angular和Vue.js 深度对比 - 云+社区 - 腾讯云
• 2018年，前端开发者需要学习哪些东西？
• Vue.js 很好，但是比 Angular 或 React 更好吗？ - WEB前端 - 伯乐在线

61. 聯絡資訊
• The Will Will Web
記載著 Will 在網路世界的學習心得與技術分享
– http://blog.miniasp.com/
• Will 保哥的技術交流中心 (臉書粉絲專頁)
– http://www.facebook.com/will.fans
• Will 保哥的噗浪
– http://www.plurk.com/willh/invite
• Will 保哥的推特
– https://twitter.com/Will_Huang