架构是如何产生的
- 初始：无架构，前端代码内嵌到后端应用中
后端MVC架构
- 将视图层、数据层、控制层做分离
- 缺点：重度依赖开发环境，代码混淆严重
前后端分离架构
- 将前端代码从后端环境中提炼出来（ajax促进了前后端分离架构的发展）多页面架构
- 缺点：前端缺乏独立部署能力，整体流程依赖后端环境
Nodejs的广泛使用促进了前端技术的飞速发展
- 各种打包、构建工具应运而生
- 诞生了多元化前端开发方式，使得前端开发可以脱离整体后端环境
单页面架构
- 打包：gulp、rollup、webpack、vite…
- 框架：vue、react、angular…
- ui库：antd、iview、element、mintui…
- 优势：
- 切换页面无刷新浏览器，用户体验好
- 组件化开发方式，极大提高了代码复用率
- 劣势：
- 不利于SEO，首次渲染会出现较长时间的白屏（可解决）
大前端时代
- 后端框架：express、koa
- 包管理工具：npm、yarn
- node版本管理：nvm
总结
-
过于灵活的实现也导致了前端应用拆分过多，维护困难
-
往往一个功能或需求会跨两三个项目进行开发
微前端等新型架构
- 技术栈无关
- 主框架不限制接入应用的技术栈，微应用具备完全自主权
- 独立开发、独立部署
- 增量升级
- 微前端是一种非常好的实施渐进式重构的手段和策略
- 微应用仓库独立，前后端可独立开发，主框架自动完成同步更新
- 独立运行时
- 每个微应用之间状态隔离，运行时状态不共享
- 劣势：
- 接入难度较高
- 应用场景：移动端少、管理端多
