精读《现代 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

若是你想参与讨论，请点击这里，每周都有新的主题，周末或周一发布。