關於微前端(阿里QianKun)的那點事——上線一個「微前端」逼走了2位90後

「本文已參與好文召集令活動，點擊查看：後端、大前端雙賽道投稿，2萬元獎池等你挑戰！」

• 📢歡迎點贊 ：👍 收藏 ⭐留言 📝 若有錯誤敬請指正，賜人玫瑰，手留餘香！
• 📢本文做者：由webmote 原創，首發於 C🙉
• 📢做者格言： 生活在於折騰，當你不折騰生活時，生活就開始折騰你，讓咱們一塊兒加油！💪💪💪

🎏 序言

做爲一個團隊領導者，須要常常幫助組員解決各種阻塞問題。🎎🎎🎎

而我一直從過後端的開發，致使對前端的知識儲備並無那麼豐富（實際很簡陋）。

鑑於當下流行的開發模式幾乎都是先後端分離的，爲了組建好團隊，前端、後端幾乎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

團隊的溝通永遠是個問題，而日本人並不這麼認爲，他們有一套本身的方法。

一個問題，要想佈置的很清晰，須要按五步法來進行。

1. 要有一個能勝任的人 🕺
2. 要有明確的完成時間 ⏱️
3. 要有明確的完成標準 🚩
4. 佈置完任務，讓員工複述一遍🗣️
5. 作好彙報要求，檢查進展✅

而在此過程當中，我並無按照上述步驟實施，而我覺得和他覺得可能並未對齊。

固然我只是簡單的跟蹤下任務進度和看下最終結果，裏面的代碼我也沒有去把控。

大概幾天後，我親愛的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的官方Demo一、我發的那篇文章的Demo2，而後對比教程，一步步創建一個新的vue基座項目。

不會的就百度、谷歌。

1. 創建新的vue項目:宇宙飛船

vue create portal-spaceShip

2. 增長element-ui

yarn install element-ui

3. 增長qiankun

yarn add qiankun

4. 把demo2的ts程序翻譯爲js寫到項目內
5. 啓動

✨好像成功了，我懷疑我是否是沒進入新的狀態，這麼順利嗎？

✨把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萬點傷害，不過我須要挺過去，看到得朋友但願能幫我分析分析！

謝謝，謝謝你們了。

這也是一場可貴得經歷，記錄下來，之後也是一串特別得足跡！

年少不識前端香，🕺🕺🕺 錯把後端當個寶！

例行小結，理性看待！

結的是啥啊，結的是我想你點贊而不可得的寂寞。😳😳😳

👓都看到這了，還在意點個贊嗎？

👓都點讚了，還在意一個收藏嗎？

👓都收藏了，還在意一個評論嗎？

還有系列前端文章，客官，你不瞧瞧？

👉前端項目，看我在這裏管理全局後臺初始化的數據，就問你颯不颯？

👉Vue中路由到一個公共組件，而後根據路徑中是否存在文件動態加載組件

👉解放前端工程師——手把手教你開發本身的自定義列表和自定義表單系列之一緣起

👉解放前端工程師——手把手教你開發本身的自定義列表和自定義表單系列之二接口

👉解放前端工程師——手把手教你開發本身的自定義列表和自定義表單系列之三表格