上线一个阿里 QianKun “微前端”逼走了 2 位 90后
上线一个阿里 QianKun “微前端”逼走了 2 位 90后
序言
作为一个团队领导者,需要经常帮助组员解决各类阻塞问题。
而我一直从事后端的开发,导致对前端的知识储备并没有那么丰富(实际很简陋)。
鉴于当下流行的开发模式几乎都是前后端分离的,为了组建好团队,前端、后端几乎 1 比 1 配置好像有些不太对,因此稍微倾斜了下后端,按 80%配置前端,这个比例到底是不是合适,估计每个人都有自己的见解,可以留言谈谈你们团队的人员配比问题。
我们的新的产品,后端采用微服务,前端采用微前端,感觉是绝配啊。没想到,悲剧就此拉开序幕.....
01.你好像不会哎…
为了组建团队,需要进行多轮次的面试,遴选人才从来不是一个轻松的活。
揣着一颗忐忑不安的心,在备足了前端的知识后,开始上岗面试了,碰到我这种半瓶子晃荡的面试官,诸位前端大佬们是不是很轻松的吊打面试官?
谈谈我的面试方式
我的一般步骤是:
- 进入正题前,和他们聊聊经历、离职原因以及之前的开发团队情况,聊完觉得还合适的,就再深入聊聊技术。
- 一般会问下 vue 的生命周期、vue 的路由分类、父子组件通信方式以及对象的深度拷贝,甚至会让他写个递归函数,到此基本结束。
一般在聊对象深拷贝的时候,好多前端工程师就冒出来一句:你好像不会哎,你不了解前端吧。
哎呀,妈呀!这句话简直是晴天霹雳,震得老夫虎躯一阵摇晃!
复制代码
看来我恶补的 vue 知识、typescript 基础以及当时上手的 angular 项目都是白来的了,好吧,我只好坦白,我不是很懂。
好像我终于找到了真正的前端工程师,你就是我想要的人才!
来吧,come on,baby!
这就是我被吊打的整个过程。
02.看起来不错的 90 后前端
面试的一位前端 90 后,聊的还算愉快,会的也多(⚡ 吊打后的真实反应 ⚡),看项目经验也蛮不错,我希望他来做前端组长。
毕竟对于疏于前端知识的我来说,没必要在不熟悉的领域花费太多时间。
让能干的人,把事情干好就行了。
工资我还希望能再给他多点,毕竟找个能干的人不容易,稳定的团队才能够持续发展。
也许灾难的起源就在于不了解,对前端的知识匮乏,导致了后续事件的发酵。
微前端的概念应该有好几年了,之前也和以前的同事聊过,都觉得是不错的理念。恰好我看到有介绍阿里QianKun引擎的文章,讲的非常详细,我就转发给了这位 90 后小伙子。并多次给他说我们需要微前端架构搭设我们的项目,采用阿里成熟的引擎,至少方向不会错。
不知道我的理解对不对:
微前端在我的理解是基于目前的框架,代替了 iframe 老式组织形式的变种而已。
如果没有淘汰 iframe,那么使用 iframe 做微前端,简直简单的要死。而微前端引擎就是采用新的技术替代 iframe,因此需要做到子应用的加载,甚至动态加载,并且需要解决掉 CSS、JS 的冲突,隔离开其范围。
任务已经布置了,就耐心等待结果吧,一切就交给“前端组长”吧!
03.目不暇接的 DEMO
团队的沟通永远是个问题,而日本人并不这么认为,他们有一套自己的方法。
一个问题,要想布置的很清晰,需要按五步法来进行。
- 要有一个能胜任的人
- 要有明确的完成时间 ⏱️
- 要有明确的完成标准
- 布置完任务,让员工复述一遍 ️
- 做好汇报要求,检查进展 ✅
而在此过程中,我并没有按照上述步骤实施,而我以为和他以为可能并未对齐。
当然我只是简单的跟踪下任务进度和看下最终结果,里面的代码我也没有去把控。
大概几天后,我亲爱的 90 后前端组长(手下有 2 位前端成员),就拿出来 3 个 DEMO,说都是别人基于 qiankun 或是 single-spa 做的微前端,基座和子应用都有,支持 vue、angule、react 等等。
我感觉随便一个都满足我的需求啊,这下我就更放心了。“你来定一个”,反正我们也不需要其他技术栈,只要支持 vue 就可以了。
另外一个前端工程师去做子应用,配合基座完成子应用的改造。
分工感觉很明晰了,这个迭代的目标也应该没问题了吧?每天的晨会,都有进展,就不提了。
又过了大约 1-2 周,当我再去了解的时候,前端组长说基座和子应用通信有些问题,我就大致看了下 qiankun 的介绍文档,并把文档贴到群里。

我感觉我已经看懂了,采用引擎提供的 api,就可以传递 token 过去,然后我决定和他当面沟通下。对话如下:
我:咱们这个通讯采用我发的那篇文章介绍就可以,你看看。他:嗯嗯,这个很简单,采用 localstorage 就可以。我:不行吧,子应用可能部署在不同的域下,那怎么可能呢?他:这样啊,那我们就采用那个 api,我再改改,改动比较大。我:你用的是 qiankun 几?他:别人集成的,不知道啊。我:是不是版本太低,现在好像是 2 点几。他:这个项目看不了使用的是啥版本。我:看看包里有没,我再看看官方文档去。............. 我看文档后 ,发现只需要安装 qiankun 包即可。我:yarn add qiankun 他:我这个项目好像不是 qiankuan 的,我再看看别的 demo......
此时,另外一位前端告诉我,他已经按照组长的吩咐,分别在 3 个 demo 上改了 3 版登录了,并且用的都不是 qiankun...
我的娘啊,发生了啥!

04. 闪人了
星星之火,已经燎原!
前面的错误耽搁了我们的选型时间,不过知错就改,赶快掉头仍来得及。
事情来了,稳住,别乱!
我紧急通知前端组长,尽快采用 qiankun 包,构造项目,搭建基座。
刚好公司又来了一位前端,是个老手,这里就称呼他老 A 吧,让他和前端组长一块搞。
我自己也忙着查看官方文档,试图协助他们搞定基座容器项目,毕竟迭代任务需要按时完成。
花费了几个小时,大致原理我看了一遍,觉得集成起来应该很简单,没有特别复杂的地方,当然作为技术经理,对其中的小坑还是有一定预知的。
下班时间到了,和他们一起沟通了下,哎,下班前做事情真不是我的初衷。
老 A 说,没问题,特简单,交给我搞吧,明天搞定。
前端组长说:搞不定了,让我去做子应用吧。
我就和他单独聊了下前因后果,应该没有特别重的话,只是告诉他应该采用 qiankun,而不应该采用其他的引擎,除非他有把握做的更好。这次就这样吧,让老 A 去搞基座,我们去做子应用的相关任务,并给他分了几个任务。
没想到在下班路上收到他的微信。
经理我想提离职,状态不行,平静一段时间再找工作
没适应过来
本来一号想说
状态不行,怕耽误进度
我试图挽留,毕竟仅仅遇到一个小坎坷呗,挺过去就没什么了。结果他只说了句:哎,状态没调整过来,去深圳我同学那调整一段时间,提升下技术。
好似一片雪花从头上划过,我看好的,依赖的,没有检验就依赖的前端组长,就这样闪人了。一个月,留下了 7 个 DEMO 项目。
难道这就是,传说中的这个领导不听我的....
05. 救火还需队长
除了面临前端组长留下的烂摊子以外,我也备受组建团队的打击。
我忽然明白了一个人的突然离职,对他的上级来说,也是一种额外的重击,当然,最终我又想通了,没啥大不了的,总结下教训就是了,没必要上纲上线。
第二天仍然是忙乱的一天,我一直跟踪着基座项目的进展,消息忽好忽坏。
下班的时候,前端老 A 告诉我,里面有许多问题搞不定,可能用不了,他下班了,明天再看。
虽然下班了,但我真的不能任事态发展下去了,我决心自己来试一下,看看到底卡在哪里了。
加班不分时间,好像做了领导就有了这觉悟!
我克隆下 qiankun 的官方 Demo1、我发的那篇文章的 Demo2,然后对比教程,一步步建立一个新的 vue 基座项目。
不会的就百度、谷歌。
- 建立新的 vue 项目:宇宙飞船
vue create portal-spaceShip
- 增加 element-ui
yarn install element-ui
- 增加 qiankun
yarn add qiankun
- 把 demo2 的 ts 程序翻译为 js 写到项目内
- 启动
✨ 好像成功了,我怀疑我是不是没进入新的状态,这么顺利吗?
✨ 把 demo1 的子应用启动一个,我的神啊,就这么快吗,没问题啊。
❤️ 好像有信心了:增加登录窗口、增加链接,没什么难点啊,登录 ok 了。
应该好了 70%吧,我心里想。
好像还有点小问题,加载的子应用并没渲染到指定的容器内,而是顶在了顶层容器上。一番折腾,我终于发现问题的根源。
5.1 阿里乾坤的坑 1
子应用加载会加载到顶层,是因为子应用和基座应用都使用了相同的 id,把基座的 index.html 内的 id 修改为不同的 id 即可。

5.2 坑 2 动态注册微服务
引擎注册由于生命周期缘故,需要在 vue 的周期前后启动,一般放在 main.js,注册 api registerMicroApps 也在此时调用。但由于还没登录,因此无法注册设定的服务。经过大量查询 issue,发现其已经支持动态添加子应用。只需再次调用 registerMicroApps即可。
你可以在 app.vue 内合适的地方调用,即可渲染增加新的微服务。
5.3 坑 3 子应用返回主应用
这个应该不能算是引擎的坑,应该是启用了根目录导致的,不能往上层弹出路由,仅需要使用即可。
//window.location.href = "/";
window.history.pushState(null,'','/login');
5.4 核心点 子应用无需 qiankun 包
最核心的一点是,子应用不需要关注qiankun 框架,无需引用其包,只需按照标准实现导出接口即可。
一切妥妥的,并没有那么难。
06. 绝杀技:有事不来了
当然晚上加班并没有搞完所有的,几个坑也是在加班后第二天解决的。
因为老 A 第二天没来,问起来,说是请假了,哎,这个假批还是不批...
其实既然已经开始搞了,那就搞得风生水起,当然也无需在意这些细节。
“不来就不来吧,没什么大不了。” 我只能自己安慰自己。
职场生存技能:如果搞不定手头的紧急事情,就请假吧,拖到你的上级两眼冒金星 ✨✨✨,事情自然有进展!

看起来,有必要加强前端知识了~~~
看起来,我带队伍的能力有待提高 ~~~
07. 结语
关于此事情,我和老板详谈了下,要点记录如下。
当然是他得看法和建议,值得反思,其实也有点打击我的积极性,因为我没有得到他的支持。
- 识人问题,没搞清楚,就让人担大任
- 放权问题,检验与任务布置不清晰
- 职级差别,心离得太远,很难听到实话
- 沟通占用时间过长,每个人都需要和我沟通
- 后台框架固有问题,某某的槽点
- 情商问题,情商不高
- 需要考虑轮流组长,设定中间人,来承担任务
玻璃心的我也受到 1 万点伤害,不过我需要挺过去,看到得朋友希望能帮我分析分析!
谢谢,谢谢大家了。
这也是一场难得得经历,记录下来,以后也是一串特别得足迹!
年少不识前端香, 错把后端当个宝!
例行小结,理性看待!
结的是啥啊,结的是我想你点赞而不可得的寂寞。
都看到这了,还在乎点个赞吗?
都点赞了,还在乎一个收藏吗?
都收藏了,还在乎一个评论吗?