位置:首页 > web前端 > javascript

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

dearweb 发布:2021-10-21 21:46:12阅读:

前端架构的发展历程。

架构是如何产生的

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

后端MVC架构

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

缺点:重度依赖开发环境,代码混淆严重

image.png

前后端分离架构

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

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

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

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

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

image.png

单页面架构

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

框架:vue\react\angular...

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

单页面架构的优势:

切换页面无刷新浏览器,用户体验好;

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

单页面架构的劣势:

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

大前端时代

后端框架:express\koa

包管理工具:npm\yarn

node版本管理:nvm

总结一下

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

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

微前端等新型架构

技术栈无关;

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

独立开发、独立部署

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

优势:

支持增量升级;

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

独立运行;

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

劣势:

接入难度较高;

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


24人点赞 返回栏目 分享一波

小礼物走一波,支持作者

还没有人赞赏,支持一波吧

留言 评论仅代表网友个人 留言列表

暂无留言,快来抢沙发吧!

手机扫码查看 手机扫码查看