精讀《現代 js 框架存在的根本原因》

黃子毅發表於2018-05-21
JS框架

1 引言

深入思考為何前端需要框架，以及 web components 是否可以代替前端框架？

原文地址，建議先閱讀原文，或者閱讀概述。

2 概述

現在前端框架非常多了，如果讓我們回答 “為什麼要用前端框架” 這個問題，你覺得是下面這些原因嗎？

  • 元件化。
  • 擁有強大的開源社群。
  • 擁有大量第三方庫解決大部分問題。
  • 擁有大量現成的第三方元件。
  • 擁有瀏覽器擴充/工具幫助快速 debug。
  • 友好的支援單頁應用。

不，這些都不是根本原因，最多算前端框架的營銷手段。作者給出的最根本原因是：

解決 UI 與狀態同步的難題。

作者假設了一個沒有前端框架的專案，就像 Jquery 時代，我們需要手動同步狀態與 UI。就像下面的程式碼：

addAddress(address) {
  // state logic
  const id = String(Dat.now())
  this.state = this.state.concat({ address, id })

  // UI logic
  this.updateHelp()

  const li = document.createElement('li')
  const span = document.createElement('span')
  const del = document.createElement('a')
  span.innerText = address
  del.innerText = 'delete'
  del.setAttribute('data-delete-id', id)

  this.ul.appendChild(li)
  li.appendChild(del)
  li.appendChild(span)
  this.items[id] = li
}
複製程式碼

首先更新效率是個問題，最大問題還是同步問題。試想多次與伺服器互動，在同步過程中漏執行了一步，會導致之後的 UI 與狀態逐漸脫節。

因為我們只能一步步同步狀態與 UI，卻無法保證每個瞬間 UI 與狀態是完全同步的，任何一個疏忽都會導致 UI 與狀態脫節，而我們除了不斷檢查 UI 與資料是否對應，毫無辦法。

所以現代框架最重要的幫助是保持 UI 與狀態的同步。

如何做到

有兩種思路：

  1. 元件級重渲染：比如 React，當狀態改版後，對映出改變後的虛擬 DOM，最終改變當前元件對映的真實 DOM，這個過程被稱為 reconciliation。
  2. 監聽修改：比如 Angluar 和 Vue.js，狀態改變直接觸發對應 DOM 節點中 value 值的變化。

這裡稍微說明下，React 雖然是整體渲染，但在虛擬 DOM 作用下，效率不比 observable 低。observable 在值不能完整對映 UI 時，也需要做更大範圍的 rerender。另外，Vue.js 與 Angluar 也早已採用了虛擬 DOM。

這三個框架已經融會貫通，作者提到的兩種思路現在已經是一種混合技術了。

那 web components 呢？

大家經常會拿 React, Angluar, Vue.js 與 web components 做比較，可 web components 最大的問題就是，沒有解決 UI 與狀態同步。

web components 只提供了模版語法，自定義標籤解決 html 的問題，並沒有給出一套狀態與 UI 同步的方法。

所以就算使用 web components，我們可能還需要一個框架做 UI 同步，比如 Vue.js 或者 stenciljs。

作者還提供了一段簡短的 UI 狀態同步例項，這裡略過。

最後給出了四點總結：

  • 現代 js 框架主要在解決 UI 與狀態同步的問題。
  • 僅使用原生 js 難以寫出複雜、高效、又容易維護的 UI 程式碼。
  • Web components 沒有解決這個主要問題。
  • 雖然使用虛擬 DOM 庫很容易造一個解決問題的框架，但不建議你真的這麼做！

3 精讀

作者的核心觀點是，現代前端框架主要解決 UI 與狀態同步的問題，這是毫無疑問的，也提到了包括 web components 也依然沒有解決這個問題。

這可能是 web 開發最核心的問題了。

最初開發者的精力都在前端標準化上，誕生了一系列解決標準化問題的庫，最有知名度的是 jquery。當前端進入 react 時代後，可以看到精力從解決標準化到解決 web 規範與實踐的衝突，這個衝突正是作者說的問題。

前端三劍客

問題就出現在 html、js、css 三者分離上。

html、css、js 各是一套獨立的體系，但 js 又能同時控制 html 與 css，那為了解決同步問題，最好將控制權全部交給 js。

這樣 web components 的問題也就好理解了，web components 解決的是 html 問題，註定與 js 無關。

html 官方規範估計很難出現現代框架的設計了，因為官方設計中前端三劍客是相互分離的方案，為了解決現階段前端框架的問題，html 必須由 js 完全接管，這幾乎就是 jsx，或者支援 template 語法的 html，可這與最初網頁設計思路是違背的。

html 是獨立的，甚至可以不依賴 js 執行，這天然導致了 UI 與狀態同步這個難題。

為什麼一定要用 js

html 不依賴 js 的設計可能已經跟不上前端發展步伐了，也許 jsx 或者 template 才是真正的未來。

誠然，html 現在的設計可以在不支援 js 的瀏覽器執行，但就在最近，所有現代瀏覽器都支援了 service worker，它是凌駕於 html 執行時機之上的 js 指令碼，甚至可以攔截 html 請求。一個不支援 js 的瀏覽器，可能也無法支援 service worker，禁用 js 的堅持可能只剩下安全性保護。

而實際上現代 web 頁面都使用了 js 完全主導網頁渲染，所以這已經從技術問題上升到了社會問題，如今禁用 js 的瀏覽器還有多少網頁可以正常訪問？除了某些超大型網站對禁用 js 狀態做了特殊優化以外，現在幾乎沒有前端專案會考慮禁用 js 的情況了，因為我們不會假設 React、Angluar、Vue.js 框架程式碼無法執行。

所以為什麼不融合 html 與 js 呢？

既然事實上 UI 已經與 js 繫結了，那 w3c 為何不將 jsx 或者 template 列為標準呢？也許為了向前相容，規範永遠也邁不出這一步吧。

幸運的是，這並不妨礙現代前端框架的大量普及，而且勢不可擋。

4 總結

也許 UI 與狀態同步的問題是前端發展的最大阻力，雖然現代化框架已經解決了這個問題，但 w3c 標準卻一直無法往這個方向發力，導致 web 的下一個發展方向難以依靠標準規範來推動。前端日新月異的發展，很大一部分是規範的發展帶來的，而現在我們進入了一個由工業化領導的時代，規範很可能永遠也跟不上來，隨之而來的是工業化社群也難以做進一步突破。

前端不僅是 web，或者也許下一個突破並不在 web，而是 ar/vr 或者下一個人機互動場景。同樣，web 也不僅是前端三劍客，如果認為 React、Angluar、Vue.js 帶來的工業化規範就是新的規範，前端才有動力向後發展，比如基於虛擬 DOM 的新框架、新語言。

所以筆者推匯出現代前端開發的本質，是將 js、html 的平行關係變成了 js 包含 html 的關係，正如上面所說，這可能背離了 w3c 的初衷，但這就是現在的潮流。

最後總結一下觀點：

  1. 也是原作者的，現代 js 框架主要在解決 UI 與狀態同步的問題。
  2. 傳統的前端三劍客正面臨著進一步發展乏力的危機。
  3. 現代前端框架正在告訴我們新的三劍客：js（虛擬 dom、虛擬 css）。

5 更多討論

討論地址是：精讀《現代 js 框架存在的根本原因》 · Issue #84 · dt-fe/weekly

如果你想參與討論，請點選這裡，每週都有新的主題，週末或週一釋出。

相關文章