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

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

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
    kurotanshi@gmail.com
    @kurotanshi
    Thanks !
    

    View Slide