前端架构演进史

1. 前端架构如何产生的?

(1). “原始时代”:

①. 前端代码内嵌到后端应用中.

(2). “石器时代” - MVC架构:

①. 视图层、数据层、控制层做分离

②. 缺点:
    a. 重度依赖开发环境,需要搭建后端环境
    b. 代码混淆严重

(3). “青铜时代” - 前后端分离架构:

①. 应用:
    a. 前后端环境分离
    b. ajax的应用促进了前后端分离的发展
    c. 多页面架构

②. 缺点:
    a. 前端缺乏独立部署能力

(4). “铁器时代” - Node.js:

①. 应用:
    a. 各种打包、构建工具
    b. 多元化前端开发方式,使前端脱离整体后端环境

(5). “蒸汽时代” - 单页面架构(SPA):

①. 打包:
    gulp、rollup、webpack、vite...

②. 框架:
    vue、react、angular...

③. UI库:
    antd、iview、elementUI...

④. 优势:
    a. 切换页面无刷新浏览器,用户体验好,以前的方案页面会有一段时间的白屏
    b. 组件化的开发方式,极大提升了代码复用率

⑤. 缺点:
    a. 不利于SEO,首次渲染会出现较长时间的白屏

以上还停留在浏览器应用

(6). 大前端时代:

①. 后端框架:express、koa

②. 包管理工具:npm、yarn

③. node版本管理:nvm

(7). 微前端:

①. 应用:
    a. 技术栈无关
    b. 主框架不限制接入应用的技术栈,微应用具备完全自主权
    c. 独立开发、独立部署、子应用独立运行
    d. 需要支持增量升级
    e. 是一种非常好的实施渐进式重构的手段和策略
    f. 微应用仓库独立,前后端可独立开发,主框架自动完成同步更新
    g. 每个微应用之间状态隔离,运行时状态不共享

②. 劣势:
    a. 接入难度较高
    b. 应用场景 - 移动端少、PC管理端多