資訊專欄INFORMATION COLUMN
摘要：官方規范估計很難出現現代框架的設計了，因為官方設計中前端三劍客是相互分離的方案，為了解決現階段前端框架的問題，必須由完全接管，這幾乎就是，或者支持語法的，可這與最初網頁設計思路是違背的。現代前端框架正在告訴我們新的三劍客虛擬虛擬。
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 與狀態的同步。
如何做到有兩種思路：
組件級重渲染：比如 React，當狀態改版后，映射出改變后的虛擬 DOM，最終改變當前組件映射的真實 DOM，這個過程被稱為 reconciliation。
監聽修改：比如 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 與狀態同步這個難題。
為什么一定要用 jshtml 不依賴 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 的初衷，但這就是現在的潮流。
最后總結一下觀點：
也是原作者的，現代 js 框架主要在解決 UI 與狀態同步的問題。
傳統的前端三劍客正面臨著進一步發展乏力的危機。
現代前端框架正在告訴我們新的三劍客：js（虛擬 dom、虛擬 css）。
5 更多討論討論地址是：精讀《現代 js 框架存在的根本原因》 · Issue #84 · dt-fe/weekly
如果你想參與討論，請點擊這里，每周都有新的主題，周末或周一發布。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95127.html
摘要：我是這一期的主持人黃子毅本期精讀的文章是。模塊化需要保證全局變量盡量干凈，目前為止的模塊化方案都沒有很好的做到這一點。精讀本次提出獨到觀點的同學有流形，黃子毅，蘇里約，，楊森，淡蒼，留影，精讀由此歸納。 這次是前端精讀期刊與大家第一次正式碰面，我們每周會精讀并分析若干篇精品好文，試圖討論出結論性觀點。沒錯，我們試圖通過觀點的碰撞，爭做無主觀精品好文的意見領袖。 我是這一期的主持人 ——...
摘要：拿到的都是而不是原始值，且這個值會動態變化。精讀對于的與，筆者做一些對比。因此采取了作為優化方案只有當第二個依賴參數變化時才返回新引用。不需要使用等進行性能優化，所有性能優化都是自動的。前端精讀幫你篩選靠譜的內容。 1. 引言 Vue 3.0 的發布引起了軒然大波，讓我們解讀下它的 function api RFC 詳細了解一下 Vue 團隊是怎么想的吧！ 首先官方回答了幾個最受關注的...
摘要：目前我們的業務項目采用的來進行優化和首屏性能提升。可變性需要讓開發人員降低開發時的基準線，來保證每一個用戶的體驗。對于路由的切分以及庫的引入來說，這一個原則至關重要。快速生成一份站點的性能審查報告。 The Cost Of JavaScript 2018 關于原文 原文是在Medium上面看到的，Chrome工程師Addy Osmani發布的一篇文章，這位的Medium上面的自我介紹里...
摘要：由于具備一定的使用場景，而且支持方式零成本改寫為即可，所以就支持它吧不支持的特性下面三個特性不支持，原因是沒什么使用場景安全的安全的上面兩者的結合首先看一個對象，如果出來的結果是，那這個返回值使用起來也沒有意義。 1. 引言 備受開發者喜愛的特性 Optional chaining 在 2019.6.5 進入了 stage2，讓我們詳細讀一下草案，了解一下這個特性的用法以及討論要點。 ...
閱讀 2715·2021-11-22 13:52
閱讀 1184·2021-10-14 09:43
閱讀 3637·2019-08-30 15:56
閱讀 2952·2019-08-30 13:22
閱讀 3269·2019-08-30 13:10
閱讀 1563·2019-08-26 13:45
閱讀 1102·2019-08-26 11:47
閱讀 2788·2019-08-23 18:13
