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

9ae4f3862d4cb0771cfd36e43252f755?s=47 Kuro Hsu
November 05, 2017

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

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

9ae4f3862d4cb0771cfd36e43252f755?s=128

Kuro Hsu

November 05, 2017
Tweet

Transcript

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

  2. Web Component 
 的崛起

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

    (Components)
  4. 元件系統 UI 結構 組件樹

  5. None
  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 輸出。
  13. None
  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 的溝通

  28. None
  29. None
  30. Emit events
 to update value

  31. None
  32. None
  33. this.$parent.$parent.$emit('update')

  34. None
  35. 狀狀態統⼀一交由 $root 管理理 ?

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

  37. Event Bus

  38. None
  39. None
  40. None
  41. None
  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

  55. None
  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 !