微前端架构设计和实践:由来

web1.0时代,当时是没有前端的概念的,大家都在使用jsp,php,asp。
因为jsp的强大,开发小微项目的时候可以很快的开发出来,但是相对的,编写大项目的时候问题也会明显的暴露出来
缺点:
业务体系增大,调试困难
jsp混杂业务,难以维护
前后端职责不明确(或者不区分职责)

2.后端mvc时代

由于1.0时代的问题,为了代码更好维护,为了更加明确前后端职责。这时后端出现了mvc框架(Spring,Structs等),前端则以模板的形式进行开发。然后后端去把逻辑编写到模板中。
缺点:
前后端开发效率低
前后端职责不明确

3.前后端分离

ajax时代,ajax的到来,让前后端的职责更加明确,因为前端可以通过ajax发送请求进行数据交互
前端开发的人员,只需要开发自己页面这部分的内容,数据可由后台进行提供。而且ajax可以使得页面实现部分刷新,极大的减少了之前需要反复开发的页面。前端的类库也慢慢的开始发展,最著名的就是jQuery了。

3.前端框架——MVC、MVP、MVVM

MVC

前端的MVC应该与后端类似,具备着View、Controller和Model。
Model:负责保存应用数据,与后端数据进行同步
Controller:负责业务逻辑,根据用户行为对Model数据进行修改
View:负责视图展示,将model中的数据可视化出来。

MVP

MVP与MVC很接近,P指的是Presenter,presenter可以理解为一个中间人,它负责着View和Model之间的数据流动,防止View和Model之间直接交流

MVVM

MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心,它是连接view和model的桥梁。它有两个方向:一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。这两个方向都实现的,我们称之为数据的双向绑定。现在主流的三个框架angular2、vue、react都是实现了这样的模式。

3.x微前端

由于前端开发的体量越来越庞大,内容越来越多,打包越来越慢,开发人员越来越多,产品功能复杂,代码冲突频繁,影响面积大。所以为了解决这些问题发展出了微前端架构。

二.什么是微前端

微前端,主要是把一个整体转化为多个可以独立运行、独立开发、独立部署、独立维护的服务或者应用的聚合,从而满足业务快速变化以及多个团队并行开发的需求

Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. — Micro Frontends
译:微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

  • 技术栈无关
    主框架不限制接入应用的技术栈,子应用具备完全自主权

  • 独立开发、独立部署
    子应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新

  • 增量升级
    在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略

  • 独立运行时
    每个子应用之间状态隔离,运行时状态不共享

可参考: 可能是你见过最完善的微前端解决方案

原文 

https://juejin.im/post/5e8077caf265da47c916ead3

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » 微前端架构设计和实践:由来

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址