1 引言
深入思考為何前端需要框架，以及 web components 是否可以代替前端框架糖荒？
原文地址，建議先閱讀原文模捂，或者閱讀概述捶朵。
2 概述
現(xiàn)在前端框架非常多了，如果讓我們回答 “為什么要用前端框架” 這個問題狂男，你覺得是下面這些原因嗎综看？
- 組件化。
- 擁有強大的開源社區(qū)岖食。
- 擁有大量第三方庫解決大部分問題红碑。
- 擁有大量現(xiàn)成的第三方組件。
- 擁有瀏覽器拓展/工具幫助快速 debug。
- 友好的支持單頁應用析珊。
不羡鸥，這些都不是根本原因，最多算前端框架的營銷手段忠寻。作者給出的最根本原因是：
解決 UI 與狀態(tài)同步的難題惧浴。
作者假設了一個沒有前端框架的項目，就像 Jquery 時代奕剃，我們需要手動同步狀態(tài)與 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
}
首先更新效率是個問題，最大問題還是同步問題祭饭。試想多次與服務器交互芜茵，在同步過程中漏執(zhí)行了一步，會導致之后的 UI 與狀態(tài)逐漸脫節(jié)倡蝙。
因為我們只能一步步同步狀態(tài)與 UI九串，卻無法保證每個瞬間 UI 與狀態(tài)是完全同步的，任何一個疏忽都會導致 UI 與狀態(tài)脫節(jié)寺鸥，而我們除了不斷檢查 UI 與數(shù)據(jù)是否對應猪钮，毫無辦法。
所以現(xiàn)代框架最重要的幫助是保持 UI 與狀態(tài)的同步胆建。
如何做到
有兩種思路：
- 組件級重渲染：比如 React烤低，當狀態(tài)改版后，映射出改變后的虛擬 DOM笆载，最終改變當前組件映射的真實 DOM扑馁，這個過程被稱為 reconciliation。
- 監(jiān)聽修改：比如 Angluar 和 Vue.js凉驻，狀態(tài)改變直接觸發(fā)對應 DOM 節(jié)點中 value 值的變化腻要。
這里稍微說明下，React 雖然是整體渲染涝登，但在虛擬 DOM 作用下雄家，效率不比 observable 低。observable 在值不能完整映射 UI 時胀滚，也需要做更大范圍的 rerender趟济。另外，Vue.js 與 Angluar 也早已采用了虛擬 DOM咽笼。
這三個框架已經(jīng)融會貫通顷编，作者提到的兩種思路現(xiàn)在已經(jīng)是一種混合技術了。
那 web components 呢剑刑？
大家經(jīng)常會拿 React, Angluar, Vue.js 與 web components 做比較勾效，可 web components 最大的問題就是，沒有解決 UI 與狀態(tài)同步。
web components 只提供了模版語法层宫，自定義標簽解決 html 的問題杨伙，并沒有給出一套狀態(tài)與 UI 同步的方法。
所以就算使用 web components萌腿，我們可能還需要一個框架做 UI 同步限匣，比如 Vue.js 或者 stenciljs。
作者還提供了一段簡短的 UI 狀態(tài)同步實例毁菱，這里略過米死。
最后給出了四點總結：
- 現(xiàn)代 js 框架主要在解決 UI 與狀態(tài)同步的問題。
- 僅使用原生 js 難以寫出復雜贮庞、高效峦筒、又容易維護的 UI 代碼。
- Web components 沒有解決這個主要問題窗慎。
- 雖然使用虛擬 DOM 庫很容易造一個解決問題的框架物喷，但不建議你真的這么做！
3 精讀
作者的核心觀點是遮斥，現(xiàn)代前端框架主要解決 UI 與狀態(tài)同步的問題峦失，這是毫無疑問的，也提到了包括 web components 也依然沒有解決這個問題术吗。
這可能是 web 開發(fā)最核心的問題了尉辑。
最初開發(fā)者的精力都在前端標準化上，誕生了一系列解決標準化問題的庫较屿，最有知名度的是 jquery隧魄。當前端進入 react 時代后，可以看到精力從解決標準化到解決 web 規(guī)范與實踐的沖突隘蝎，這個沖突正是作者說的問題堤器。
前端三劍客
問題就出現(xiàn)在 html、js末贾、css 三者分離上。
html整吆、css拱撵、js 各是一套獨立的體系，但 js 又能同時控制 html 與 css表蝙，那為了解決同步問題拴测，最好將控制權全部交給 js。
這樣 web components 的問題也就好理解了府蛇，web components 解決的是 html 問題集索，注定與 js 無關。
html 官方規(guī)范估計很難出現(xiàn)現(xiàn)代框架的設計了，因為官方設計中前端三劍客是相互分離的方案务荆，為了解決現(xiàn)階段前端框架的問題妆距，html 必須由 js 完全接管，這幾乎就是 jsx函匕，或者支持 template 語法的 html娱据，可這與最初網(wǎng)頁設計思路是違背的。
html 是獨立的盅惜，甚至可以不依賴 js 運行中剩，這天然導致了 UI 與狀態(tài)同步這個難題。
為什么一定要用 js
html 不依賴 js 的設計可能已經(jīng)跟不上前端發(fā)展步伐了抒寂，也許 jsx 或者 template 才是真正的未來结啼。
誠然，html 現(xiàn)在的設計可以在不支持 js 的瀏覽器執(zhí)行屈芜，但就在最近郊愧，所有現(xiàn)代瀏覽器都支持了 service worker，它是凌駕于 html 執(zhí)行時機之上的 js 腳本沸伏，甚至可以攔截 html 請求糕珊。一個不支持 js 的瀏覽器，可能也無法支持 service worker毅糟，禁用 js 的堅持可能只剩下安全性保護红选。
而實際上現(xiàn)代 web 頁面都使用了 js 完全主導網(wǎng)頁渲染，所以這已經(jīng)從技術問題上升到了社會問題姆另，如今禁用 js 的瀏覽器還有多少網(wǎng)頁可以正常訪問喇肋？除了某些超大型網(wǎng)站對禁用 js 狀態(tài)做了特殊優(yōu)化以外，現(xiàn)在幾乎沒有前端項目會考慮禁用 js 的情況了迹辐，因為我們不會假設 React蝶防、Angluar、Vue.js 框架代碼無法運行明吩。
所以為什么不融合 html 與 js 呢间学？
既然事實上 UI 已經(jīng)與 js 綁定了，那 w3c 為何不將 jsx 或者 template 列為標準呢印荔？也許為了向前兼容低葫，規(guī)范永遠也邁不出這一步吧。
幸運的是仍律，這并不妨礙現(xiàn)代前端框架的大量普及嘿悬，而且勢不可擋。
4 總結
也許 UI 與狀態(tài)同步的問題是前端發(fā)展的最大阻力水泉，雖然現(xiàn)代化框架已經(jīng)解決了這個問題善涨，但 w3c 標準卻一直無法往這個方向發(fā)力窒盐，導致 web 的下一個發(fā)展方向難以依靠標準規(guī)范來推動。前端日新月異的發(fā)展钢拧，很大一部分是規(guī)范的發(fā)展帶來的蟹漓，而現(xiàn)在我們進入了一個由工業(yè)化領導的時代，規(guī)范很可能永遠也跟不上來娶靡，隨之而來的是工業(yè)化社區(qū)也難以做進一步突破牧牢。
前端不僅是 web，或者也許下一個突破并不在 web姿锭，而是 ar/vr 或者下一個人機交互場景塔鳍。同樣，web 也不僅是前端三劍客呻此，如果認為 React轮纫、Angluar、Vue.js 帶來的工業(yè)化規(guī)范就是新的規(guī)范焚鲜，前端才有動力向后發(fā)展掌唾，比如基于虛擬 DOM 的新框架、新語言忿磅。
所以筆者推導出現(xiàn)代前端開發(fā)的本質(zhì)糯彬，是將 js、html 的平行關系變成了 js 包含 html 的關系葱她，正如上面所說撩扒，這可能背離了 w3c 的初衷，但這就是現(xiàn)在的潮流吨些。
最后總結一下觀點：
- 也是原作者的搓谆，現(xiàn)代 js 框架主要在解決 UI 與狀態(tài)同步的問題。
- 傳統(tǒng)的前端三劍客正面臨著進一步發(fā)展乏力的危機豪墅。
- 現(xiàn)代前端框架正在告訴我們新的三劍客：js（虛擬 dom泉手、虛擬 css）。
5 更多討論
如果你想?yún)⑴c討論偶器，請點擊這里斩萌，每周都有新的主題，周末或周一發(fā)布屏轰。
