作者：侑夕
飛豬一體化營運工作台一期工作經過 3 個月的開發終于内部開始使用，期間我們面向營運場景，基于微前端與 SDK 化的一體化內建方案，完成 4 大場景 10 餘個平台的接入和配置打通，并對數百處視覺和互動體驗進行了優化 ，在後期體驗度量和使用者回報跟蹤能力接入後，整體已達可用狀态。
借此總結，希望和大夥一起交流下做飛豬微前端營運一體化平台的背景緣由、目标和方案、過程和效果，展望，希望可以給類似場景的同學一些輸入，歡迎大家一起交流。
背景緣由
伴随飛豬業務的發展，我們在近兩年為提升營運效率建立了多種場景的營運類平台，可滿足營運完成業務訴求。
但随着産品本身業務複雜度在不斷提高，隻能給營運解決溫飽問題，加上各平台需要互投互通訴求逐漸強烈，在此體系下無法給業務帶來 1 + 1 > 2 的價值，面臨如下急需解決的痛點：
- 入口分散導緻配置成本高
- 平台互相之間沒有打通，導緻無法有效形成合力
- 缺乏上層場景解決方案來形成營運最佳實踐
目标和方案
為解決痛點，我們啟動<環球影城-一體化營運工作台>建設項目，旨在借助新技術探索和更新給營運同學提供更好更高效的營運平台解決方案，一期目标為技術側的探通，完成工作台架構的搭建，滿足多平台場景使用，沉澱一套以現有業務為基礎的泛營運平台微前端解決方案。
基于此我們從實際業務營運配置場景入手，結合現有中背景技術和微前端解決方案，産出如下方案架構圖：
過程和效果
我們做了一個帶前後端(Ant Design Pro + Midway)的營運平台主應用，同時設計好整體平台架構包括産品功能和互動，将現有各子營運平台通過微前端方案和主應用打通，後續營運同學隻需要進入一個統一平台操作即可。
點選檢視視訊
标泛導購域微前端解決方案
這一塊的方案是營運工作台的技術架構核心部分，需要解決各子應用平台前後端能力可以很簡單輕巧地接入到營運主工作台，支援 App 級别隔離與無縫切換的能力。對于前端側來說需要對子應用注冊、路由、資源加載、通信、生命周期、隔離沙箱機制有對應的政策，對于後端側來說需要解決主子應用之間内網登入權限打通免登、跨域問題、接口請求路徑正确、post 接口安全校驗這一系列難題。
微前端是一種類似于微服務的架構，它将微服務的理念應用于浏覽器端，即将 Web 應用由單一的單體應用轉變為多個小型前端應用聚合為一的應用。
基于此，前端側基礎方案我們有調研過
single-spa、
ice-stark qiankun；single-spa 隻解決了應用之間的加載方案，沒有考慮其他的周邊問題；ice-stark 通過劫持 history 實作應⽤加載，通過規範隔離應⽤稍許不夠精細，和現有營運子平台幾乎全部為 umi 體系也不太符合；而 qiankun 底層應⽤之間的加載使⽤ single-spa，上層實作樣式隔離、js 沙箱、預加載等上層能⼒，同時提供
umi-plugin-qiankun來解決 umi 下的快速使用，成為我們前端側的選擇方案。
在後端側，我們在營運工作台 Node 側自建了 Gateway 網關 middleware，底層依賴
http-proxy-middleware能力實作，借用服務端 proxy 轉發接口同時在請求上加上 token 來解決接口登入權限以及跨域的問題，同時對于主子應用直接接入會出現内網登入登入權限不通的問題，此處我們使用的 免登授權 的能力，讓子應用的登入讓主應用本身來提供，這樣通過中間網關層配合我們給 qiankun pr 的 Fetch 自定義能力和 Slave Namebase 可解決請求和路由跳轉的相容問題。
方案跑通後，我們在子應用的接入簡化上做了很多優化，包括将初次使用了解成本降到最低，目前 主應用隻需要分别配置前後端的 conifg 即可，對于子應用假如是使用 antd pro 體系僅半小時即可完成代碼改造，額外場景也有對應文檔可快速改造，同時不影響現有子應用平台自己的代碼和正常使用，後面考慮将子應用接入邏輯整合到管理平台側，進一步減少接入成本。
業務元件化 Widget 內建方案
上述微前端方案用于解決主子應用的接入問題，但是對于一個更完善的一體化系統，還需要打通平台業務 Widget 子應用之間的配置互通。
比如說飛豬場景的會場裡面配置互動玩法，營運在在搭建系統中進行會場搭建投放配置，但是涉及到互動子產品配置之前需要到互動平台完成，再通過對應的 id 來關聯這兩配置，連貫性上很不優雅。
基于此，我們啟動了 Widget 內建子事項，并形成統一開發規範，包括統一的參數定制、回調事件、open api 服務，将基礎業務配置能力下沉澱成 Widget SDK，并在業務資料層打通，以便可以達到一體化配置的效果，也即可以滿足任一SDK可以插入到任一營運系統中的作用，這樣可以很好實作子系統之間一體化配置能力的打通，并逐漸開始在起到作用。
營運平台視覺互動統一和性能優化
說到中背景的的前端側展示，大部分場景都沒有設計互動同學支援，加上一線研發同學對互動視覺标準的了解不同，導緻不少頁面的使用體驗勉強隻能達到能用的狀态，距離好看好用還有很大距離。
包括在性能上，很容易出現資源包很大，接口很慢導緻回報速度不行的問題，都是表面看起來不重要，但是很影響營運同學的開心的使用平台來工作，也不太像一個前端做的平台。
基于此，我們花了 4 周時間将泛導購側的所有接入的平台進行産品視覺互動優化統一以及二次Review，同時制定中背景産品定期 Review 的制度，防止讓不好用不好看的頁面上線。
同時還有一塊使用者看不見地方的優化，我們對 antd pro 在微前端體系下的中背景頁面沉澱出一套符合目前場景的性能優化方案，包含更新到 antd4、移除多語言、替換 moment、開啟 treeShaking、鎖版本、按需加載、公共的依賴 externals cdn 方式，累計省去了近 1/3 的資源加載。
中背景體驗度量和使用者回報跟蹤
談到中背景體系體驗和資料度量，之前普遍使用普通資料埋點方式，但是普遍不夠完善同時度量深度不夠，導緻很難去更好的管理。
通過調研已有方案，我們接入了中背景體驗度量解決方案，并沉澱全家桶sdk，一行代碼即可解決内網體系下微前端中背景的接入，基于平台通路資料、性能體驗、訪客畫像、錯誤監控解決方案，後續再借助資料開放能力和營運度量打通，更好的輔助營運提效。
同時為了更好的收取跟蹤使用者回報，包括持續讓使用同學給平台提供回報建議，我們也接入回報跟蹤方案，讓項目同學可以第一時間去修複優化。
共建和反哺
在做營運工作台的期間，有不少基礎能力直接複用的集團和螞蟻建設的底層基礎能力，包括引入微前端架構 qiankun、中背景體驗度量方案、使用者回報 跟蹤能力的使用，給我們業務平台開發帶來了很大的便利性，也很好的诠釋了基礎設施和上層使用方相輔相成互相促進的關系。
在使用過程中我們結合我們的業務使用場景給 qiankun 送出累次 3 次 PR，分别用于解決路由 base 字首、Fetch 支援自定義、清晰使用文檔，為了解決 antd icon 的 cdn 抽取我們給其送出 Min File PR；在體驗度量使用上也是屬于初始天使使用者，同時回報一些使用上面的建議，後續通過抽離度量sdk可一行代碼解決内網賬号體系下中背景應用的快捷使用；使用 feedback 回報的時候，幫忙一起解決微前端體系下樣式被剔除的問題，包括提供一些使用優化建議落地，包括後續約好的前端技術交流。
Last But Not Least
以上即我們這三個月的建設總結，更多的是在營運一體化技術方案上面的探通，以及對現有平台整體的優化，具體真正的一體化營運工作台還需要後面的繼續疊代以及更多同學的參與進來，讓技術給業務帶來更大的差異化的價值。
目前我們在 Serverless 、微前端營運工作台等方面都有不少建設，歡迎感興趣的同學郵件聯系@侑夕 [email protected] 一起交流。
福利來了！
重磅下載下傳！《2020 前端工程師必讀手冊》
阿裡巴巴前端委員會推薦！覆寫語言架構、前端智能化、微前端、Serverless及工程化 5 大熱點前端技術方向、10+ 核心實戰的前端手冊，解鎖前端新方式，挖掘前端新思路，盡在此刻，趕緊來先睹為快！關注 alibabaf2e 微信公衆号回複 必讀手冊 立即擷取下載下傳連結。
關注「Alibaba F2E」
把握阿裡巴巴前端新動向