$30 off During Our Annual Pro Sale. View Details »

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

Kuro Hsu
November 05, 2017

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

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

Kuro Hsu

November 05, 2017
Tweet

More Decks by Kuro Hsu

Other Decks in Technology

Transcript

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

    View Slide

  2. Web Component 

    的崛起

    View Slide

  3. Why Web Component
    • 專案複雜度提升,前端需求從早期的獨立⾴頁
    ⾯面漸漸轉變為應⽤用的開發模式

    • 模組化:封裝、分割以及重複使⽤用

    • 進⼀一步抽象成⼀一個個組件 (Components)

    View Slide

  4. 元件系統
    UI 結構 組件樹

    View Slide

  5. View Slide

  6. Header
    Main
    Aside
    Block

    View Slide

  7. MVVM (Model-View-ViewModel)

    View Slide

  8. 切分組件的邏輯?
    • 單⼀一組件太過龐⼤大

    • 拆分後組件的數量量太多,且同類型多

    • 組件之間彼此耦合程度⾼高,不容易易維護

    View Slide

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

    View Slide

  10. 網⾴頁模版渲染

    差異異比較

    View Slide

  11. 指令式渲染
    • 如 jQuery,以操作 DOM Node 為基礎的開
    發模式

    • 開發⽅方式直覺,透過 Selector 取得 DOM 就
    開始操作

    • 優點就是爽,但程式架構擴⼤大複雜後,程式
    碼混雜不易易維護

    View Slide

  12. 宣告式渲染
    • 以操作物件模型為基礎的開發模式。

    • ⾏行行為關注點放在資料 ( Model ) 與狀狀態

    • 直接描述 狀狀態 與 DOM 的映射關係,⽽而不
    是直接操作 DOM

    • view = render(state) 

    state 輸入, DOM 輸出。

    View Slide

  13. View Slide

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

    View Slide

  15. HTML 標籤

    View Slide

  16. X-Templates

    View Slide

  17. render function

    View Slide

  18. JSX

    View Slide

  19. 資料的偵測機制與同步

    View Slide

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

    View Slide

  21. 資料的變動偵測

    View Slide

  22. Source: Reactivity in Frontend JavaScript Frameworks

    https://docs.google.com/presentation/d/1_BlJxudppfKmAtfbNIcqNwzrC5vLrR_h1e09apcpdNY/edit?usp=sharing

    View Slide

  23. Source: Reactivity in Frontend JavaScript Frameworks

    https://docs.google.com/presentation/d/1_BlJxudppfKmAtfbNIcqNwzrC5vLrR_h1e09apcpdNY/edit?usp=sharing

    View Slide

  24. Source: Reactivity in Frontend JavaScript Frameworks

    https://docs.google.com/presentation/d/1_BlJxudppfKmAtfbNIcqNwzrC5vLrR_h1e09apcpdNY/edit?usp=sharing

    View Slide

  25. Source: Reactivity in Frontend JavaScript Frameworks

    https://docs.google.com/presentation/d/1_BlJxudppfKmAtfbNIcqNwzrC5vLrR_h1e09apcpdNY/edit?usp=sharing

    View Slide

  26. 與其他主流框架的差異異:Push & Pull
    • 資料的變化偵測主要分為 Push 與 Pull

    • Pull: 如 React 的 setState、Angular 的 dirty
    check

    • Push: 如 Vue 的響應式更更新、RxJS 的 observable

    • 不管哪⼀一種都會有對應的成本,沒有絕對好或不
    好。

    View Slide

  27. Component 的溝通

    View Slide

  28. View Slide

  29. View Slide

  30. Emit events

    to update value

    View Slide

  31. View Slide

  32. View Slide

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

    View Slide

  34. View Slide

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

    View Slide

  36. 衍⽣生問題
    • 資料更更新時難以追蹤資料流

    • 非同步操作時更更加明顯

    • .sync 操作時甚⾄至會汙染其他組件狀狀態 (v1)

    View Slide

  37. Event Bus

    View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

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

    View Slide

  43. CSS 管理理⽅方案

    View Slide

  44. • 與 JS 完全解耦,透過命名規範來來管理理:如
    BEM、SMACSS、OOCSS 等

    • CSS Modules,透過 Webpack 編譯

    • 各種 CSS in JS 解決⽅方案 ( React )

    • 寫在 .vue 中的 CSS 、 Angular 裝飾⼦子的 CSS

    View Slide

  45. CSS in JS
    • 限定 CSS 的有效範圍 (scope)

    • Critical CSS (⾸首屏 server 端渲染)

    • Atomic CSS 優化

    • 打包管理理,⽅方便便 re-use

    View Slide

  46. Scoped CSS in Vue

    View Slide

  47. Scoped CSS in Vue

    View Slide

  48. SPA 與 Routing

    View Slide

  49. Vue-router 路路由管理理

    View Slide

  50. Vue-router 路路由管理理

    View Slide

  51. • 最早提出前端 Routing 概念念的是 Ember.js

    • 早期會⽤用 # (URL hash) 來來模擬,現今主流⼯工具多
    以操作 History API ⽅方式來來處理理路路由

    • 從組件出發來來思考 Routing 規則,其實就是將
    URL 對應⾄至組件樹結構的過程

    • 從 URL 到組件映射的分歧點思考:

    以 URL 規則為主? 或是以組件的狀狀態為主?

    View Slide

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

    View Slide

  53. Vue-loader

    View Slide

  54. HTML
    Script
    Style

    View Slide

  55. View Slide

  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

    View Slide

  57. Treeshaking
    Compile-time Optimizations in JavaScript Applications

    https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p

    View Slide

  58. Treeshaking
    Compile-time Optimizations in JavaScript Applications

    https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p

    View Slide

  59. Treeshaking
    Compile-time Optimizations in JavaScript Applications

    https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p

    View Slide

  60. Treeshaking
    Compile-time Optimizations in JavaScript Applications

    https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p

    View Slide

  61. Compile-time Optimizations in JavaScript Applications

    https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p

    View Slide

  62. Prepack
    Compile-time Optimizations in JavaScript Applications

    https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p

    View Slide

  63. SSR: inlining Critical CSS
    Compile-time Optimizations in JavaScript Applications

    https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p

    View Slide

  64. SSR: inlining Critical CSS
    Compile-time Optimizations in JavaScript Applications

    https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p

    View Slide

  65. Custom Modules for Vue
    Template Compiler
    Compile-time Optimizations in JavaScript Applications

    https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p

    View Slide

  66. Custom Modules for Vue
    Template Compiler
    Compile-time Optimizations in JavaScript Applications

    https://docs.google.com/presentation/d/1AjT8HeXFeAO61voCsyAEM7UnjjjeY8rHumyVlxs7YbY/edit#slide=id.p

    View Slide

  67. 結語

    View Slide

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

    View Slide

  69. 反正 18 個⽉月之後你⼜又會想學新的了了,

    要是覺得跟不上,安⼼心放⽣生也無所謂

    View Slide

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

    View Slide

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

    View Slide

  72. VueJS: 漸進式框架
    Source: Vue.js: The Progressive Framework

    https://docs.google.com/presentation/d/1WnYsxRMiNEArT3xz7xXHdKeH1C-jT92VxmptghJb5Es/

    View Slide

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

    View Slide

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

    View Slide