我们是否需要微前端?

缘由

单纯从分析系统整体布局来看,跟使用微前端改造完的项目几乎是一模一样。在入职后的一段时间内,我确实想过是否要提议内部用微前端来解决一些问题。本次调研的时间是2021年12月,是近期补充的调研文档,相关问题或许官方已完成修复。

image.png

微前端或许能给我们带来什么?

  • 只需要维护一个登录页

现在每个系统都有一个登录页,如果需要对登录页的UI、文案或功能进行修改的话,我们需要改到所有的仓库。假设使用微前端,我们可以把登录页跟导航栏放在主应用里。本地开发的时候,只需要把主应用跟需要开发的子应用跑起来,一个登录页就可以供多个子应用去使用了

  • 本地开发的时候可实现主系统、子系统之间的相互跳转,生产上不需要通过新开页面的方式

以微前端半壁江山 qiankun为例,一旦浏览器的 url 发生变化,便会自动触发 qiankun 的匹配逻辑,所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中,同时依次调用微应用暴露出的生命周期钩子。

  • 实现多个系统之间的通讯与数据共享

不管是 qiankun 还是 microApp ,或是其他的微前端框架,都会提供相应的方案让我们进行各个应用之间的通讯。比如半壁江山的initGlobalState。听起来很棒!

  • (最大卖点)用不同技术栈开发同一个系统

主应用不限制接入应用的技术栈,子应用具备完全自主权。同时也解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用后,随之而来的应用不可维护的问题。

  • 依赖共享

不少社区活跃的开发者在介绍微前端,在自己的实践经历后,都建议使用同一版本的库,并将这些公共依赖配置成 external。你看,这样一来,小而美的应用不就出来了?

  • 一个系统多个模块,支持独立部署

这个就不做多余的解释了

但或许它并不是一个完美的解决方案

  • 他可能是一个伪需求

不同团队不同技术栈开发同一个系统,这种情况会不会存在?一定会,但是普遍吗?并不普遍。 不同技术栈团队通常都是分开开发各自的系统的,然后通过子系统跳转,这已经是遍地开花的事。而且我们真的需要在一个系统的开发中,部分模块用vue+element,部分模块用react + antd 吗? 别说vuereact的两开花,要知道我们在规范里面,已经明确要统一库生态。当然这不只是我们团队这样,大多数团队也都是遵循这样的规范的

  • 并不建议依赖共享

我在一些社区看到有不少实践者提出这个依赖共享的时候,我是困惑的。在同一个项目中使用不同技术栈的解决方案里,又提出了使用同一个版本(你咋还限制版本了呢?)方便共享依赖。这不是有病吗? 查看了文档后发现,qiankun虽然是半壁江山,但是也不是肆意妄为的,人家也不建议你这样做,并表示qiankun 2.0 版本将提供一种更智能的方式使其自动化。同时也引用了微前端的官网 https://micro-frontends.org/ 里的一些想法

Don’t share a runtime, even if all teams use the same framework. Build independent apps that are self contained. Don’t rely on shared state or global variables.

  • 项目显得臃肿,也不好维护

qiankun的启动代码不少,严格来说对应用的性能是有一定的损伤的!子应用用的通用三方框架,因为应用隔离,比如三个子应用均使用了element,子应用跳转的时候都会拉取自己vendor打包的出的js,所以整个系统会显得非常臃肿。子应用的js静态资源还是通过xhr方式去拉取,看接口又不方便。所以如果不是必须得用微前端,我们真的没必要! 微前端在一定程度上还是提供了便利的,所以好多团队在引入微前端之后都开始滥用,最后用烂了!当时在询问朋友对微前端的实践有什么看法,我一个朋友跟我吐槽他们公司一个后台系统拆了18个前端工程,这一类事情在社区也确实没少见。

我们需要微前端给我们带来的便利吗

  • 取消每个子系统的登录页面

统一登录页面是我们必然要做的一件事,但是解决这个问题的办法并不是只有微前端。我们可以使用Single Sign On的方式,用户只需一次登录就可以访问所有相互信任的应用系统。SSO依然是当前比较流行的做法!

  • 数据共享/通讯

我们内部本身也没有太多的通讯困难的问题,如果哪天我们真的需要跨系统数据共享,大不了我们内部开发sdk去实现呗!

  • 主系统可以新开窗口跳去子系统,但反过来不行

如果要解决这个问题,多个系统共用同一套路由的配置即可,但是如果这样做我真的会谢!每次需要往一个系统加一个新页面路径,我就得想瓜田里的猹一样跳来跳去,发布时还得打包n次 这个是我最开始想引用微前端的原因,但其实这不是一个系统,这他喵是三个系统!把它们放到一个导航栏里面只是我们产品呈现的一种形式而已,他的本质就是多个系统! 我们不喜欢在主系统里面还要维护子系统的路由,这些都是后续可以从产品的角度上去优化的。等到哪天每个子系统的目录结构真庞大到吓人,拆开是必然的!所以咱就先不必纠结这个开发/交互体验不好的问题。

微前端会像后端的微服务一样,成为一种趋势吗

请问老师述说微前端的趋势?

程劭非(winter):微前端我觉得它其实没有太多的趋势。首先微前端就不是一个大家都要用的。微前端沾了微服务的光,但是微服务是所有后端基本上都要往架构上迁,微前端很明显不是这样的。 它更多的是单页应用并有多框架隔离的需求,然后做出微前端这样的一个技术方案。我觉得说是刷,微前端就不该这么热,包括很多学生都会问我微前端,我反问你有么有看过微前端解决什么样的内容?如果非要往这上边靠的话,就相当于没有困难创造困难也要上,举个例子,公司一共有四五个前端,就非要用微前端架构,四五个人都可以用不同框架,这其实是没必要的

写在最后

其实我不是一个微前端的仇恨者,反而我在入职最早期就提出是否要使用微前端。但只是在调研后发现,我们并不需要微前端,但很多人是为了用上微前端而使用微前端,也没理解微前端的使用场景,诶,就是滥用,甚至一知半解就开始在社区复制粘贴,以讹传讹。

微前端真正适用的是什么场景,这是今年4月 qiankun 的主要开发者在infoQ给出了回答。

InfoQ:你认为哪些场景下适合采用微前端,哪些场景不适合呢? 刘奎:回答这个问题之前,我们可能要先来回答一下微前端解决了什么问题。

从工程角度来看,微前端其实解决的是在前端技术高速迭代、组织架构频繁变更的背景下,如何通过一些物理隔离的手段降低系统组件间的耦合,从而确保每个组件的开发独立、交付独立,进而实现整个系统渐进式演进的能力。

从产品角度来看,微前端解决的是如何在技术栈无感知的情况下,实现整个产品的平台性及动态性。针对不同的场景及用户角色,动态地将来自不同系统的服务组装起来。

明白了这两个要点,我们就能回答这个问题了,简单来说就是:

如果你不是要在一个长尾应用上做持续交付,你就不需要微****前端****;如果你的产品都是同一个小的团队开发的,你就不需要微前端;如果你的产品没有集成 / 被集成的诉求,你就不需要微前端。反之亦然。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容