Tweet
Tweet

Slide 1

Slide 1 text

從 VueJS 看前端 ⽣生態圈的發展變化 Kuro Hsu @ JSDC 2017

Slide 2

Slide 2 text

Web Component 
 的崛起

Slide 3

Slide 3 text

Why Web Component • 專案複雜度提升，前端需求從早期的獨立⾴頁 ⾯面漸漸轉變為應⽤用的開發模式 • 模組化：封裝、分割以及重複使⽤用 • 進⼀一步抽象成⼀一個個組件 (Components)

Slide 4

Slide 4 text

元件系統 UI 結構 組件樹

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Header Main Aside Block

Slide 7

Slide 7 text

MVVM (Model-View-ViewModel)

Slide 8

Slide 8 text

切分組件的邏輯？ • 單⼀一組件太過龐⼤大 • 拆分後組件的數量量太多，且同類型多 • 組件之間彼此耦合程度⾼高，不容易易維護

Slide 9

Slide 9 text

組件的分類 • Presentation 展⽰示型組件 • Container 接入型組件 • Interactive 互動型組件 • Functions 功能型組件

Slide 10

Slide 10 text

網⾴頁模版渲染
 差異異比較

Slide 11

Slide 11 text

指令式渲染 • 如 jQuery，以操作 DOM Node 為基礎的開 發模式 • 開發⽅方式直覺，透過 Selector 取得 DOM 就 開始操作 • 優點就是爽，但程式架構擴⼤大複雜後，程式 碼混雜不易易維護

Slide 12

Slide 12 text

宣告式渲染 • 以操作物件模型為基礎的開發模式。 • ⾏行行為關注點放在資料 ( Model ) 與狀狀態 • 直接描述 狀狀態 與 DOM 的映射關係，⽽而不 是直接操作 DOM • view = render(state) 
 state 輸入， DOM 輸出。

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Vue 如何將網⾴頁模板封 裝成 Component

Slide 15

Slide 15 text

HTML 標籤

Slide 16

Slide 16 text

X-Templates

Slide 17

Slide 17 text

render function

Slide 18

Slide 18 text

JSX

Slide 19

Slide 19 text

資料的偵測機制與同步

Slide 20

Slide 20 text

追蹤物件變化 Object.defineProperty https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

Slide 21

Slide 21 text

資料的變動偵測

Slide 22

Slide 22 text

Source: Reactivity in Frontend JavaScript Frameworks
 https://docs.google.com/presentation/d/1_BlJxudppfKmAtfbNIcqNwzrC5vLrR_h1e09apcpdNY/edit?usp=sharing

Slide 23

Slide 23 text

Source: Reactivity in Frontend JavaScript Frameworks
 https://docs.google.com/presentation/d/1_BlJxudppfKmAtfbNIcqNwzrC5vLrR_h1e09apcpdNY/edit?usp=sharing

Slide 24

Slide 24 text

Source: Reactivity in Frontend JavaScript Frameworks
 https://docs.google.com/presentation/d/1_BlJxudppfKmAtfbNIcqNwzrC5vLrR_h1e09apcpdNY/edit?usp=sharing

Slide 25

Slide 25 text

Source: Reactivity in Frontend JavaScript Frameworks
 https://docs.google.com/presentation/d/1_BlJxudppfKmAtfbNIcqNwzrC5vLrR_h1e09apcpdNY/edit?usp=sharing

Slide 26

Slide 26 text

與其他主流框架的差異異：Push & Pull • 資料的變化偵測主要分為 Push 與 Pull • Pull: 如 React 的 setState、Angular 的 dirty check • Push: 如 Vue 的響應式更更新、RxJS 的 observable • 不管哪⼀一種都會有對應的成本，沒有絕對好或不 好。

Slide 27

Slide 27 text

Component 的溝通

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Emit events
 to update value

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

this.$parent.$parent.$emit('update')

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

狀狀態統⼀一交由 $root 管理理 ?

Slide 36

Slide 36 text

衍⽣生問題 • 資料更更新時難以追蹤資料流 • 非同步操作時更更加明顯 • .sync 操作時甚⾄至會汙染其他組件狀狀態 (v1)

Slide 37

Slide 37 text

Event Bus

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

• state: 存放資料的地⽅方，可視為 Vue 元件的 Data • getters: 由 state 衍⽣生出來來的狀狀態，可視為 Vue 元 件的 Computed 屬性 • actions: ⽤用來來呼叫 mutations 的入⼝口，由於單⼀一資 料流的限制，不可從外部直接呼叫 mutations，與外部 的資料操作也在這裡完成 (非同步) • mutations: 更更改 state 的操作都會放在這裡 (同步)

Slide 43

Slide 43 text

CSS 管理理⽅方案

Slide 44

Slide 44 text

• 與 JS 完全解耦，透過命名規範來來管理理：如 BEM、SMACSS、OOCSS 等 • CSS Modules，透過 Webpack 編譯 • 各種 CSS in JS 解決⽅方案 ( React ) • 寫在 .vue 中的 CSS 、 Angular 裝飾⼦子的 CSS

Slide 45

Slide 45 text

CSS in JS • 限定 CSS 的有效範圍 (scope) • Critical CSS (⾸首屏 server 端渲染) • Atomic CSS 優化 • 打包管理理，⽅方便便 re-use

Slide 46

Slide 46 text

Scoped CSS in Vue

Slide 47

Slide 47 text

Scoped CSS in Vue

Slide 48

Slide 48 text

SPA 與 Routing

Slide 49

Slide 49 text

Vue-router 路路由管理理

Slide 50

Slide 50 text

Vue-router 路路由管理理

Slide 51

Slide 51 text

• 最早提出前端 Routing 概念念的是 Ember.js • 早期會⽤用 # (URL hash) 來來模擬，現今主流⼯工具多 以操作 History API ⽅方式來來處理理路路由 • 從組件出發來來思考 Routing 規則，其實就是將 URL 對應⾄至組件樹結構的過程 • 從 URL 到組件映射的分歧點思考：
 以 URL 規則為主？ 或是以組件的狀狀態為主？

Slide 52

Slide 52 text

建構⼯工具與 Vue 開發 ⽣生態圈

Slide 53

Slide 53 text

Vue-loader

Slide 54

Slide 54 text

HTML Script Style

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

編譯時優化 • 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

Slide 57

Slide 57 text

Treeshaking Compile-time Optimizations in JavaScript Applications
 https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p

Slide 58

Slide 58 text

Treeshaking Compile-time Optimizations in JavaScript Applications
 https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p

Slide 59

Slide 59 text

Treeshaking Compile-time Optimizations in JavaScript Applications
 https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p

Slide 60

Slide 60 text

Treeshaking Compile-time Optimizations in JavaScript Applications
 https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p

Slide 61

Slide 61 text

Compile-time Optimizations in JavaScript Applications
 https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p

Slide 62

Slide 62 text

Prepack Compile-time Optimizations in JavaScript Applications
 https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p

Slide 63

Slide 63 text

SSR: inlining Critical CSS Compile-time Optimizations in JavaScript Applications
 https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p

Slide 64

Slide 64 text

SSR: inlining Critical CSS Compile-time Optimizations in JavaScript Applications
 https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p

Slide 65

Slide 65 text

Custom Modules for Vue Template Compiler Compile-time Optimizations in JavaScript Applications
 https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p

Slide 66

Slide 66 text

Custom Modules for Vue Template Compiler Compile-time Optimizations in JavaScript Applications
 https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p

Slide 67

Slide 67 text

結語

Slide 68

Slide 68 text

– 赫⻔门 《前端服务化之路路》 @ 2015 shenJS 「每 18 ⾄至 24 個⽉月，前端都會難⼀一倍」

Slide 69

Slide 69 text

反正 18 個⽉月之後你⼜又會想學新的了了， 要是覺得跟不上，安⼼心放⽣生也無所謂

Slide 70

Slide 70 text

• 框架本⾝身的限制，以及適合的場景 • ⼯工具的學習成本 • 開發速度，執⾏行行效率？ • 限制⽽而降低開發速度，因為限制⽽而減少錯誤 • 犧牲個⼈人的開發效率，來來換取團隊的開發效率 選擇⼯工具的決策點

Slide 71

Slide 71 text

• 框架、⼯工具都是因應問題⽽而⽣生，在不考慮場景的 情況下尋找解法都是無意義的 • 各⼤大框架實作⽅方式不同，但理理念念卻很多類似 • 保持開放技術的多樣性是有益的，雖然未來來不可 能全都納入網⾴頁標準，但優良的部分仍會在其他 框架被保留留。 未來來？

Slide 72

Slide 72 text

VueJS: 漸進式框架 Source: Vue.js: The Progressive Framework
 https://docs.google.com/presentation/d/1WnYsxRMiNEArT3xz7xXHdKeH1C-jT92VxmptghJb5Es/

Slide 73

Slide 73 text

VueJS 台灣社團 http://vue.tw

Slide 74

Slide 74 text

Kuro Hsu http://kuro.tw [email protected] @kurotanshi Thanks !