前端技术发展回顾和架构升级之路

前端技术发展轨迹

• 后端MVC模式 + 前端静态页面

• ajax技术出现后，前后端分离 + 前端MVC框架

• 前后端分离 + 前端MVVM框架

  • 双向绑定，数据自动渲染到视图
  • 虚拟DOM，解决数据频繁更新的问题
  • Angular/React/Vue

• 前后端分离 + SPA单页面应用

• NodeJs技术发展， 前后端同构 + SSR

  前端实现BFF（ Backends For Frontends(服务于前端的后端)）层，该架构设计的好处在于：

  • 前端可以自行编写后端服务，实现数据的适配
  • 前端可以实现SSR技术
  • 前端可以实现各种后端服务

• serverless技术发展， 前端向后工程化、基础设施完善的开发体系

  将服务器的运维功能交给Serverless平台进行管理，研发人员只专注于实现云函数即可完成功能开发。

现代化的前端技术架构

• 组件化是基本UI架构
• 依托于SSR同构技术以及心智负担的最小化
• 数据状态管理方案将会以职责单一、minimal necessary为目标
• 前端向传统后端领域进军，CSR+SSR切换

SSR的特点：

• 流式渲染

  允许服务端同构stream的方式想浏览器发送HTML内容。

• 渐进式渲染

  允许在hydrating（注水）没有完全结束前，部分已经渲染并注水完成的页面内容，可以优先完成交互响应。

NSR特点：

• 通过Native渲染生成HTML数据，并缓存在客户端。
• 将服务端的渲染工作放在一个个独立的移动设备中，并借助离线存储技术实现页面的预加载，同时不会增加额外的服务器压力。

ESR特点：

• 借助了“边缘计算”的能力

• 在CDN上缓存页面的静态部分，可以快速返回给用户静态内容

• 在CDN节点上也可以发起动态部分内容请求，利用流的方式返回给用户