[JSDC2017] 從 VueJS 看前端生態圈的發展變化

近年來前端工具的演進變化快速，這場分享將由 VueJS 出發，除了針對 VueJS 新特性的介紹外，也簡單分析現代前端框架與前端開發生態圈的變化與演進。希望透過這樣概觀性的介紹，能讓初入前端領域的朋友更快上手，不會感到迷惘。

Transcript

1. 從 VueJS 看前端 ⽣生態圈的發展變化 Kuro Hsu @ JSDC 2017
2. Web Component 
 的崛起
3. Why Web Component • 專案複雜度提升，前端需求從早期的獨立⾴頁 ⾯面漸漸轉變為應⽤用的開發模式 • 模組化：封裝、分割以及重複使⽤用 • 進⼀一步抽象成⼀一個個組件 (Components)
4. 元件系統 UI 結構 組件樹
6. Header Main Aside Block
7. MVVM (Model-View-ViewModel)
8. 切分組件的邏輯？ • 單⼀一組件太過龐⼤大 • 拆分後組件的數量量太多，且同類型多 • 組件之間彼此耦合程度⾼高，不容易易維護
9. 組件的分類 • Presentation 展⽰示型組件 • Container 接入型組件 • Interactive 互動型組件 • Functions 功能型組件
10. 網⾴頁模版渲染
 差異異比較
11. 指令式渲染 • 如 jQuery，以操作 DOM Node 為基礎的開 發模式 • 開發⽅方式直覺，透過 Selector 取得 DOM 就 開始操作 • 優點就是爽，但程式架構擴⼤大複雜後，程式 碼混雜不易易維護
12. 宣告式渲染 • 以操作物件模型為基礎的開發模式。 • ⾏行行為關注點放在資料 ( Model ) 與狀狀態 • 直接描述 狀狀態 與 DOM 的映射關係，⽽而不 是直接操作 DOM • view = render(state) 
 state 輸入， DOM 輸出。
14. Vue 如何將網⾴頁模板封 裝成 Component
15. HTML 標籤
16. X-Templates
17. render function
18. JSX
19. 資料的偵測機制與同步
20. 追蹤物件變化 Object.defineProperty https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
21. 資料的變動偵測
22. Source: Reactivity in Frontend JavaScript Frameworks
 https://docs.google.com/presentation/d/1_BlJxudppfKmAtfbNIcqNwzrC5vLrR_h1e09apcpdNY/edit?usp=sharing
23. Source: Reactivity in Frontend JavaScript Frameworks
 https://docs.google.com/presentation/d/1_BlJxudppfKmAtfbNIcqNwzrC5vLrR_h1e09apcpdNY/edit?usp=sharing
24. Source: Reactivity in Frontend JavaScript Frameworks
 https://docs.google.com/presentation/d/1_BlJxudppfKmAtfbNIcqNwzrC5vLrR_h1e09apcpdNY/edit?usp=sharing
25. Source: Reactivity in Frontend JavaScript Frameworks
 https://docs.google.com/presentation/d/1_BlJxudppfKmAtfbNIcqNwzrC5vLrR_h1e09apcpdNY/edit?usp=sharing
26. 與其他主流框架的差異異：Push & Pull • 資料的變化偵測主要分為 Push 與 Pull • Pull: 如 React 的 setState、Angular 的 dirty check • Push: 如 Vue 的響應式更更新、RxJS 的 observable • 不管哪⼀一種都會有對應的成本，沒有絕對好或不 好。
27. Component 的溝通
30. Emit events
 to update value
33. this.$parent.$parent.$emit('update')
35. 狀狀態統⼀一交由 $root 管理理 ?
36. 衍⽣生問題 • 資料更更新時難以追蹤資料流 • 非同步操作時更更加明顯 • .sync 操作時甚⾄至會汙染其他組件狀狀態 (v1)
37. Event Bus
42. • state: 存放資料的地⽅方，可視為 Vue 元件的 Data • getters: 由 state 衍⽣生出來來的狀狀態，可視為 Vue 元 件的 Computed 屬性 • actions: ⽤用來來呼叫 mutations 的入⼝口，由於單⼀一資 料流的限制，不可從外部直接呼叫 mutations，與外部 的資料操作也在這裡完成 (非同步) • mutations: 更更改 state 的操作都會放在這裡 (同步)
43. CSS 管理理⽅方案
44. • 與 JS 完全解耦，透過命名規範來來管理理：如 BEM、SMACSS、OOCSS 等 • CSS Modules，透過 Webpack 編譯 • 各種 CSS in JS 解決⽅方案 ( React ) • 寫在 .vue 中的 CSS 、 Angular 裝飾⼦子的 CSS
45. CSS in JS • 限定 CSS 的有效範圍 (scope) • Critical CSS (⾸首屏 server 端渲染) • Atomic CSS 優化 • 打包管理理，⽅方便便 re-use
46. Scoped CSS in Vue
47. Scoped CSS in Vue
48. SPA 與 Routing
49. Vue-router 路路由管理理
50. Vue-router 路路由管理理
51. • 最早提出前端 Routing 概念念的是 Ember.js • 早期會⽤用 # (URL hash) 來來模擬，現今主流⼯工具多 以操作 History API ⽅方式來來處理理路路由 • 從組件出發來來思考 Routing 規則，其實就是將 URL 對應⾄至組件樹結構的過程 • 從 URL 到組件映射的分歧點思考：
 以 URL 規則為主？ 或是以組件的狀狀態為主？
52. 建構⼯工具與 Vue 開發 ⽣生態圈
53. Vue-loader
54. HTML Script Style
56. 編譯時優化 • Treeshaking • webpack code-splitting • Prepack • SSR: inlining Critical CSS • Custom Modules for Vue Template Compiler Compile-time Optimizations in JavaScript Applications
 https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p
57. Treeshaking Compile-time Optimizations in JavaScript Applications
 https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p
58. Treeshaking Compile-time Optimizations in JavaScript Applications
 https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p
59. Treeshaking Compile-time Optimizations in JavaScript Applications
 https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p
60. Treeshaking Compile-time Optimizations in JavaScript Applications
 https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p
61. Compile-time Optimizations in JavaScript Applications
 https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p
62. Prepack Compile-time Optimizations in JavaScript Applications
 https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p
63. SSR: inlining Critical CSS Compile-time Optimizations in JavaScript Applications
 https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p
64. SSR: inlining Critical CSS Compile-time Optimizations in JavaScript Applications
 https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p
65. Custom Modules for Vue Template Compiler Compile-time Optimizations in JavaScript Applications
 https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p
66. Custom Modules for Vue Template Compiler Compile-time Optimizations in JavaScript Applications
 https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p
67. 結語
68. – 赫⻔门 《前端服务化之路路》 @ 2015 shenJS 「每 18 ⾄至 24 個⽉月，前端都會難⼀一倍」
69. 反正 18 個⽉月之後你⼜又會想學新的了了， 要是覺得跟不上，安⼼心放⽣生也無所謂
70. • 框架本⾝身的限制，以及適合的場景 • ⼯工具的學習成本 • 開發速度，執⾏行行效率？ • 限制⽽而降低開發速度，因為限制⽽而減少錯誤 • 犧牲個⼈人的開發效率，來來換取團隊的開發效率 選擇⼯工具的決策點
71. • 框架、⼯工具都是因應問題⽽而⽣生，在不考慮場景的 情況下尋找解法都是無意義的 • 各⼤大框架實作⽅方式不同，但理理念念卻很多類似 • 保持開放技術的多樣性是有益的，雖然未來來不可 能全都納入網⾴頁標準，但優良的部分仍會在其他 框架被保留留。 未來來？
72. VueJS: 漸進式框架 Source: Vue.js: The Progressive Framework
 https://docs.google.com/presentation/d/1WnYsxRMiNEArT3xz7xXHdKeH1C-jT92VxmptghJb5Es/
73. VueJS 台灣社團 http://vue.tw
74. Kuro Hsu http://kuro.tw kurotanshi@gmail.com @kurotanshi Thanks !