微前端基本概念

书中仙
2020.01.12 22:59 字数 1120 阅读 94 评论 0 喜欢 0

什么是微前端?

微前端这个术语最初来自 2016 年的 ThoughtWorks 技术雷达[ https://www.thoughtworks.com/radar/techniques/micro-frontends ],它将微服务的概念扩展到了前端领域。目前的趋势是构建一个功能丰富且强大的前端应用,即单页面应用(SPA)。前端层通常由一个单独的团队开发,随着时间的推移,会变得越来越庞大而难以维护。这就是传说中的前端巨无霸(Frontend Monolith) [ https://www.youtube.com/watch?v=pU1gXA0rfwc ]。

微前端背后的理念是将一个网站或者 Web App 当成特性的组合体,每个特性都由一个独立的团队负责。每个团队都有擅长的特定业务领域或是它关心的任务。这里,一个团队是跨职能的,它可以端到端,从数据库到用户界面完整的开发它所负责的功能。

然而,这个概念并不新鲜,过去它叫针对垂直系统的前端一体化或独立系统。不过微前端显然是一个更加友好并且不那么笨重的术语。

微前端的优势

  • 复杂度可控:  每一个UI业务模块由独立的前端团队开发,避免代码巨无霸,保持开发时的高速编译,保持较低的复杂度,便于维护与开发效率。
  • 独立部署:  每一个模块可单独存放,单独部署, 不对其他模块有任何影响。
  • 技术选型灵活:  也是最具吸引力的,在同一项目下可以使用如今市面上所有前端技术栈,也包括未来的前端技术栈。
  • 容错:  单个模块发生错误,不影响全局。
  • 扩展:  每一个服务可以独立横向扩展以满足业务伸缩性,与资源的不必要消耗

我们何时需要前端微服务化?

  • 项目技术栈过于老旧,相关技能的开发人员少,功能扩展吃力,重构成本高,维护成本高.
  • 项目过于庞大,代码编译慢,开发体差,需要一种更高维度的解耦方案.
  • 单一技术栈无法满足你的业务需求
  • 需要将其它现有项目整合到主项目中

实现微前端的几种方式

  • iframe:iframe是最简单也是最直接的办法,iframe自带沙箱隔离,可使多个应用同时运行在一个用户界面上
  • 路由分发式微前端:即通过路由将不同的业务分发到不同、独立前端应用上,典型代表阿里云
  • 结合 Web Components 技术构建:使用 Web Components 构建独立于框架的组件,随后在对应的框架中引入这些组件,适合较小的模块
  • 自制框架兼容应用:代表框架有 single-spa、阿里的qiankun 在页面合适的地方引入或者创建 DOM,用户操作时,加载对应的应用(触发应用的启动),并能卸载应用。

单体应用对比微前端

单体应用

微前端应用




支付二维码
登录 后发表评论
${comment_count}条评论 评论

智慧如你,不想发表一点想法咩~

推荐阅读
更多精彩内容