57.精读《现代 js 框架存在的根本原因》.md

57.精读《现代 js 框架存在的根本原因》

初步使用前端框架原因:

1. 组件化

2. 拥有强大的开源社区

3. 拥有大量第三方库解决大部分问题

4. 拥有浏览器拓展/工具帮助快速 debug

5. 友好的支持单页应用

• 作者给出的核心观点: 解决 UI 与状态同步问题

概述

• 假设没有前端框架的 JQ 时代，需要手动同步状态和 UI，需要这样编写代码:

  addAddress(address) {
    // state logic
    const id = String(Date.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 同步就会脱节

• 如何做到二者同步：

  1. 组件级重渲染：React 状态改变后，映射出改变后的 Virtual-DOM，最终改变组件映射的真实 DOM，过程称为 reconciliation
  2. 监听修改： Vue 和 ng，监听收集到依赖变化后自动刷新 DOM 节点中 value 值的变化

• web components？

  • 最大问题： 还是没有解决 UI 和状态同步
  • 其只提供了模板语法，自定义标签解决 html 拓展性问题，但是没有给出一套sync with UI and state的方案

• 四点结论：

  1. 现代 js 框架主要解决了状态和 UI 同步的问题
  2. 仅仅使用原生 js 难以写出复杂高效简单维护的 UI
  3. web components 没有解决状态同步的问题，本质上只是一个纯 UI 组合方案
  4. 使用虚拟 DOM 库很容易早一个解决问题的框架，但不建议，因为生态

精读

• 问题还是在前端框架解决的 UI 和状态同步的问题，前期开发者主要精力在前端标准化也就是规范上，react 后时代这时候主要精力是解决标准化到解决 web 规范与实践的冲突
• 问题出自 html、js、css 三者分离上，三者各是一套独立的体系，但是 js 又能操作 html 和 css，所以为了解决状态问题，所有权最好全部交给 js
• web components 就是解决 html 的问题，注定 js 无关
• 为了解决现阶段前端框架的问题，html 都是由 js 完全接管，几乎就是 jsx，或者 template 语法的 html，与以前的网页设计完全背离
• html 的设计可以在不支持 js 的浏览器执行，现代浏览器都支持了 service worker，凌驾于 html 执行时机之上的 js 脚本，甚至可以拦截 html 请求，禁止 js 这种做法只剩下安全性保护。实际上现代 web 全是用 js 主导页面渲染，如今禁用 js 的浏览器根本不入流，就目前的事实思考，UI 和 js 已经强绑定了，为了向前兼容特性，可能规范不会如此激进。

summary

• 现代前端框架脱离了规范进步速度才如此的快，带来的新工业化规范，现代前端开发的本质，js、html 的平行关系变成了 js 包含 html 的关系，可能背离了 w3c 的初衷，但是促进了历史潮流的变更。
  • 观念：
    • 现代 js 框架解决 UI 和状态同步的问题
    • 传统三剑客并行的发展较弱
    • 新三剑客： js （Virtual-DOM，Virtual-CSS）