1 of 23

2024 WebConf – React & Vue & Angular

產品部 / 上德 / 2025-1-17

RD會

不是我想忽略他，只是剛好我沒聽這場

B L U E P L A N E T

2 of 23

前端框架議程

  • React：十年回首：React 的過去、現在與未來發展 - Zet
  • Vue：當 Vue 與 View 分手之後⋯ - Kuro Hsu
  • Angular：這些年，你所不知道的 Angular - Leo 李歐

2

B L U E P L A N E T

3 of 23

簡報重點

  • 介紹 React 和 Vue 這兩場議程的內容
  • 我自己觀察到的趨勢：
    1. Vue 和 Angular 開始發展移除 Virtual DOM 的技術和 API，而 React 則是在 Compiler 上進行突破。
    2. 各前端框架都在 Server-Side 的渲染機制上都有持續的發展並優化「效能」及「使用者體驗」。
  • 基於我的觀察，按照這個脈絡整理成本次簡報的內容，所以簡報內容不完全出自講者的簡報，有加入一些額外補充的資訊以及我自己的觀點

3

B L U E P L A N E T

4 of 23

先丟問題（可能不會有解答）

  • 移除掉 Virtual DOM 會是未來的前端趨勢嗎？
  • 移除不掉 Virtual DOM 的 React 能夠透過新的 Compiler 來根本解決效能問題嗎（或者實際上問題不大）？
  • 以 Virtual DOM 為基礎的跨平台框架（比如 React Native）在未來還能有更突破性的發展嗎？
  • Server Component 的發展會使得前端開發領域，擴展至更多的後端技術嗎？

​

4

B L U E P L A N E T

5 of 23

React

十年回首：React 的過去、現在與未來發展 - Zet

5

B L U E P L A N E T

6 of 23

基礎概念(1) Component-Based

  • 現代主流前端框架皆以 Component 作為程式模組的基本架構，不過各個框架對於渲染 DOM 的策略上各有不同。
  • React 的設計範式是以 Function Programing 為核心，狀態具有「不可變性」(Immutability)，當狀態被「替換」時，Component 會「全部重繪」。

6

https://www.scholarhat.com/tutorial/react/react-js-components

B L U E P L A N E T

7 of 23

基礎概念(2) Virtual DOM

  • Virtual DOM 的設計可以避免 React 的「一律重新渲染策略」 造成不必要的效能浪費。
  • 使用 diff 演算法計算需要變動的 DOM 後再進行渲染。
  • 即使 React 有編譯器及演算法上的效能優化，通常還是會需要開發者自行「手動」進行程式上的優化來減少不必要的計算。

​

7

B L U E P L A N E T

8 of 23

近年的重要更新

  • React Fiber (2017)
  • Concurrent Mode (2018)
  • React Hooks (2019)
  • Streaming SSR & Selective Hydration (2019)
  • Concurrent Features (2021)
  • Server Components
  • Meta Framework
  • React Compiler (2024)

* 灰字是不在本次討論範圍內所以跳過的部份，跟重要性與否無關（實際上很重要）

8

B L U E P L A N E T

9 of 23

React Fiber (2017)

  • JSX -> React Element -> Fiber Node
  • React Element是樹狀結構，在 Fiber 架構出現以前 React 以遞迴方式創建 Virtual DOM，而遞迴過程是不能中斷且同步的，在樹的層級很深的情況下有可能會因計算時間過長造成頁面卡頓。
  • Fiber使用 Linked List 資料結構來遍歷 Component Tree，並且多一個 Scheduler 的機制，讓任務可以切分成 chunks 並且可以區分優先級，以 Scheduler 來調度工作。

9

Fiber Linked List traversal

B L U E P L A N E T

10 of 23

Concurrent Mode（並行渲染）

  • 將渲染任務拆分為多個可以中斷的小片段，可以優先執行重要任務（例如用戶輸入），並利用瀏覽器的空閒時間(Idol Time)執行低優先級的任務
  • Suspense
    • Render-as-You-Fetch 取代 Fetch-on-Render 和 Fetch-Then-Render
    • 儘早的抓資料並 throw Promise 進入 Suspense 的狀態
    • 解決 Race Condition（Promise Resolve 之後才進行下一次的 Render）
  • Transition
    • 可以標記某些行為為「可延遲的狀態」（較低優先度）

10

理解 React 的下一步：Concurrent Mode 與 Suspense

B L U E P L A N E T

11 of 23

Streaming SSR (Server-Side Rendering)

  • 傳統的 SSR 必須在 Server-Side 獲取所有資料 → 渲染 HTML → response 回瀏覽器端 → 載入所有 Javascript →「hydrate」完之後，才能夠允許使用 UI。
    • 註： 「hydrate」是一種實作 Universal Rendering（讓 Client-Side 和 Server-Side 渲染出相同的結果）一個必要的動作，主要的動作是將 event handler 綁定在 DOM 元素上。
  • React 18 之後的 Suspense 支援 SSR，允許 Server-Side 以增量方式渲染完後回傳瀏覽器端。

11

https://x.com/theo/status/1551354090675773440

Staying Hydrated with JavaScript

B L U E P L A N E T

12 of 23

Server Component

  • 只在 Server-Side 渲染，也不需要在 Client-Side「hydration」，所以也無法做事件綁定。
  • 可直接連接 DB。
  • 減少 bundle size、自動化 Code Splitting，優化效能。

​

​

12

混合式渲染，橘色為 Server Components，藍色為 Client Compoinents

從 Next.js 13 認識 React Server Components

B L U E P L A N E T

13 of 23

React Compiler

  • 新的 built-time 編譯器，目前仍在 beta 版，meta 已在內部應用於 Instagram 上。
  • 最重要的改變是可以在編譯時優化原本需要在程式裡自行優化的程式：
    • 自動化 memo component 或 hooks 的值
    • 自動化 memo useEffect 的 dependencies
    • 自動辨識可以優化的程式碼
  • 可能還是有一些問題尚未解決，建議還是先保留原本 useMemo 或 useCallback 程式碼

13

B L U E P L A N E T

14 of 23

Vue

當 Vue 與 View 分手之後⋯ - Kuro Hsu

14

B L U E P L A N E T

15 of 23

基礎概念 – 響應式資料

  • 以「雙向資料流」實作「MVVM」設計模式，將畫面和資料分開，具有「關注點分離」的優點。
  • 「Push 更新」：
    • 依賴收集的訂閱式機制，Vue 能夠知道是哪些元件的 value 發生變化，以局部方式更新元件
    • 不需手動優化效能。

​

15

參考：Vue和React的檢視更新機制對比

​

React 的「Pull」更新

Vue 的「Push」更新

B L U E P L A N E T

16 of 23

Vue Vapor

  • Vue Vapor 是一種新的編譯策略，省略了 Virtual DOM 的計算直接操作 DOM，可以減小體積並提升效能。
  • 使用核心部份 @vue/reactivity 可以單獨使用響應式功能的 API，而不再受限於 Vue 的框架結構。
  • Vue Vapor SFC Playground
  • 目前要啟用 Vue Vapor 版本需要在 package.json 修改：

​

16

"dependencies": {

"vue": "npm:@vue-vapor/vue@latest"

},

"devDependencies": {

"@vitejs/plugin-vue": "npm:@vue-vapor/vite-plugin-vue@latest"

}

B L U E P L A N E T

17 of 23

範例 1：原生 JavaScript

好久不見的 Vallina JS

17

B L U E P L A N E T

18 of 23

範例 2：Vue Vapor

和一般的 Vue 寫法沒什麼差異

18

B L U E P L A N E T

19 of 23

範例 3：原生 + Vue Vapor

解除和「View」的偶合

19

B L U E P L A N E T

20 of 23

範例 4：Vue Vapor 與 React 結合

硬要寫的寫法，可以在 React 中使用 Vue 特有的一些響應式 API

20

B L U E P L A N E T

21 of 23

Benchmark

21

B L U E P L A N E T

22 of 23

Reference

  1. 十年回首：React 的過去、現在與未來發展簡報-Slides
  2. React 開發者一定要知道的底層機制 — React Fiber Reconciler
  3. React中的優先級
  4. 理解 React 的下一步：Concurrent Mode 與 Suspense
  5. SPA vs SSR vs Streaming @theo
  6. Staying Hydrated with JavaScript
  7. 從 Next.js 13 認識 React Server Components
  8. Vue和React的檢視更新機制對比
  9. Vue Vapor Mode深度解析：開啟無虛擬DOM的高效JavaScript編譯策略

23 of 23

Thank you