作者：侑夕
飛豬一體化運營工作臺一期工作經過 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」
把握阿里巴巴前端新動向
