前端架构的发展历程 微前端架构介绍

前端架构的发展历程。

架构是如何产生的

初始：无架构，前端代码内嵌到后端应用中。

后端MVC架构

将视图层、数据层、控制层分离；

缺点：重度依赖开发环境，代码混淆严重

前后端分离架构

将前端代码从后端环境中提炼出来（ajax促进了前后端分离架构的发展）多页面架构。

缺点：前端缺乏独立部署的能力，整体流程依赖后端环境。

NodeJs的广泛使用促进了前端技术的飞速发展。

各种打包、构建工具营运而生。

诞生了多元化前端开发方式，使得前端开发可以脱离整体后端环境

单页面架构

打包工具：gulp\rollup\webpack\vite...

框架：vue\react\angular...

ui库：antd\iview\elementUI\minui...

单页面架构的优势：

切换页面无刷新浏览器，用户体验好；

组件化开发方式，极大地提升了代码复用率。

单页面架构的劣势：

不利于SEO，首次渲染会出现长时间白屏（可解决）；

大前端时代

后端框架：express\koa

包管理工具：npm\yarn

node版本管理：nvm

总结一下：

过于灵活的实现也导致了前端应用拆分过多，维护困难；

往往一个功能或需求会垮两三个项目进行开发。

微前端等新型架构

技术栈无关；

主框架不限制接入应用的技术栈，微应用具备完全自主权；

独立开发、独立部署

微前端框架-天下大势合久必分分久必合

优势：

支持增量升级；

微前端是一种非常好的实施渐进式重构手段和策略；

独立运行；

每一个微应用之间的状态隔离，运行时状态不受影响。

劣势：

接入难度较高；

应用场景移动端少、管理端多。