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