架构是如何产生的？

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

后端mvc架构

• 将视图层、数据层、控制层做分离
• 缺点:重度依赖开发环境,代码混淆严重

前后端分离架构

• 将前端代码从后端环境中提炼出来( ajax促进了前后端分离架构的发展)多页面架构
• 缺点：前端缺乏独立部署能力, 整体流程依赖后端环境

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

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

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

  单页面架构

  打包 : gulp , rollup , webpack，vite….
  框架: vue/react/angular/….
  ui库: antd/iview/elementui/mintui……

• 优势

  • 切换页面无刷新浏览器，用户体验好
  • 组件化开发方式，极大提升了代码复用率

• 劣势

  • 不利于SEO ,首次渲染会出现较长时间的白屏(可解决)

    大前端时代

• 后端框架: exporess , koa

• 包管理工具: npm , yarn、pnpm

• node版本管理: nvm、volta

  总结

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

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

  微前端等新型架构

• 优势

  • 技术栈无关
  • 主框架不限制接入应用的技术栈，微应用具备完全自主权
  • 独立开发、独立部署
• 微前端架构-天下大势合久必分分久必合
  • 增量升级
  • 微前端是一种非常好的实施渐进式重构的手段和策略
  • 微应用仓库独立,前后端可独立开发,主框架自动完成同步更新
  • 独立运行时
  • 每个微应用之间状态隔离, 运行时状态不共享
• 劣势
  • 接入难度比较高
  • 应用场景-移动端少、管理端多