作者:道乐技术

简介

Microfrontend? 微前端?这是什么东西?随着 Martin Fowler 博客上,那篇 Cam Jackson 写的微前端的文章发布(链接在文章末尾),到处都在讨论 Microfrontend。相对于微前端这个概念,我们更熟悉的是微服务,先恶补一下微服务的概念:

微服务是面向服务架构(SOA)的一种变体,把应用程序设计成一系列松耦合的细粒度服务,并通过轻量级的通信协议组织起来,具体地,将应用构建成一组小型服务。这些服务都能够独立部署、独立扩展,每个服务都具有稳固的模块边界,甚至允许使用不同的编程语言来编写不同服务,也可以由不同的团队来管理。

那么微前端是啥?

简单来说就是:微服务前端版

微前端其实是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。同时,它们也可以在共享组件的同时进行并行开发——这些组件可以通过 NPM 或者 Git Tag、Git Submodule 来管理。

前端的发展历史

我们回顾一下近年来前端的发展,我们从JSP 到 SPA,从前后端分离到BFF,再到微前端。我们可以得出一个结论就是:前端的同学的工作越来越多,再加一个微前端小意思…省略三百字

 (插播一下广告:后端的发展历程→ 应用又卡了?怎么扛住并发请求?)

微前端的价值是什么?

当我们接触一个新事物的时候,我们的第一反应是,这个东西有啥用?不禁想起市场同学三连问:

1、这个东西目标客户是谁?

2、这个东西的竞品分析呢?

3、这个东西的价值是啥?

1、适合什么样的项目?

微前端当然不是万金油,比如我们开发一个简单的页面,一个人开发,完事不用维护,当然是怎么快怎么来。而适合微前端的项目应该有以下几个特点

  • 多团队合作的产品
  • 后期维护多的产品
  • 大型且复杂的产品

常见的有管理中台、基金APP这些产品

2、竞品分析呢?

有人会说这东西不就是一个组件么?那么我们可以分析一下这两者的区别

3、这东西的价值呢?

说了这么多,这东西究竟价值何在呢?那么,总体上它的价值应该包含以下2方面:

  • 工程上
  • 产品上

我们可以重现一下我们现实中遇到的场景:

场景1(对应工程):老板:这个系统【已经运行了M年】缺了个XXX功能,加一下!经过开发小哥的一番折腾,老板体验一番后:

  1. 我要用新框架啊,这都是什么年代的框架【可能当时开发的时候他是最新的】了
  2. 前任的开发跑哪了,写的是什么糟糕代码,这是祖传级别的代码啊
  3. 忍了,去升级一下框架。但,框架的API 不兼容!!!(吐槽下ng的升级,比如ng1 和ng2根本就是2个不同的框架,虽然大家的名字还是那个)
  4. 升级不了那我重构去,结果2天后老板来收货了,经过一系列讨价还价,回去安心的改旧代码。

场景2(对应产品):老板:技术部开发了一个XX系统,给我加到现有的项目管理后台去!经过开发小哥的一番折腾,老板体验一番后:

  1. 添加一个XX任务怎么又打开了一个控制台?
  2. 这两个系统怎么长的不一样的?
  3. 怎么各种的流程断点的?
  4. 不都是一个系统么?怎么还要重复验证、登录?

当遇到这些场景的时候,我们就需要考虑采用微前端了。

微前端的特征、功能

微前端到底涉及到什么技术呢?有什么功能呢?

微前端这么多好处,那它是不是没有缺点呢?当然不是,人无完人,更何况一个小小的微前端。下面我们简单分析了一下它的优缺点:

方案对比

0

道乐研究院