<del id="nnjnj"></del><track id="nnjnj"></track>

<p id="nnjnj"></p>

<address id="nnjnj"></address>

    <pre id="nnjnj"><pre id="nnjnj"></pre></pre>

      <noframes id="nnjnj"><ruby id="nnjnj"><ruby id="nnjnj"></ruby></ruby>

      • 自動秒收錄
      • 軟件:1973
      • 資訊:57811|
      • 收錄網站:279872|

      IT精英團

      基于iframe的微前端框架——青田

      基于iframe的微前端框架——青田

      瀏覽次數:
      評論次數:
      編輯: 樂詠
      信息來源: ITPUB
      更新日期: 2022-09-08 21:22:29
      摘要

      vivo互聯網前端團隊-JiangZuohan一、背景VAPD是一款專為團隊協作辦公場景設計的項目管理工具,實踐敏捷開發與持續交付,以「項目」為核心,融合需求、任務、缺陷等應用,使用敏捷迭代、小

      • 正文開始
      • 相關閱讀
      • 推薦作品

      Vivo互聯網前端團隊——蔣作漢

      一.背景

      VAPD是一款專為團隊協作辦公場景設計的項目管理工具。它實踐敏捷開發和持續交付,以“項目”為核心,整合需求、任務、缺陷等應用,利用敏捷迭代和小步驟進行開發和質量跟蹤,簡化工作流程,幫助團隊快速迭代、高效完成產品開發和交付。

      但是早期的VAPD是以“什么都可以配置”的設計理念開發運營了兩年,整個前端代碼復雜混亂,組件龐大(需要支持多種配置),狀態混亂,前端代碼封裝大到50M。這個項目不可持續,bug多,維護難,新功能有限。簡而言之,產品不滿意,測試不滿意,用戶不滿意。

      所以改版是必然的選擇,而改版的要求是用戶不能繼續使用,網站必須是可用的,并且是逐步更新的,所以微前端是必然的選擇。

      VAPD修改的想法是:

      使用微前端框架,未修改部分作為子應用存在繼續服務用戶;

      對項目模塊進行系統化應用,逐一修改,降低項目復雜度;

      逐步拋棄舊的項目代碼,將功能轉移到新的項目中,提高項目的整體性能,提高代碼的可維護性。

      二、什么是微前端?

      技術,戰略和食譜建立一個modern web appmultiple teams,可以ship features independently?!⑶岸?。

      微前端是多個團隊通過獨立發布功能,共同構建現代web應用的技術手段和方法策略。

      微前端將微服務的概念應用到瀏覽器中,即單個頁面前端應用由單一的單一應用變為聚合多個小型前端應用的應用,每個前端應用獨立開發部署。

      微前端架構旨在解決單個應用在相對較長的時間跨度內,由于參與者和團隊的增加和變化,從普通應用演變為巨石應用后無法維護的問題。這種問題在企業Web應用中尤其常見。

      目前微前端最著名的是錢坤,阿里的錢坤。

      是一個基于 single-spa 的微前端實現庫,旨在幫助大家能更簡單、無痛的構建一個生產可用微前端架構系統。



      但我嘗試試用qiankun后發現qiankun 的npm包常常滯后于qiankun源碼,有些issue解決了但還要等待其發版;首次加載子應用頁面出現抖動;子應用更新后報 ChunkLoadError 問題 。 


      同時它存在微前端框架常有的性能問題及沖突問題:


      1、加載慢

      基本上所有的微前端框架都需要先加載父框架,再加載子應用,都要經歷如下圖的流程。整個流程是串行的,相同流程需要走兩遍,也就比普通的非微前端框架要慢1倍左右,直接影響了用戶體驗。



       2、切換慢,每次切換都要重新走一次流程

      微前端框架中不同子應用切換,需要銷毀當前子應用,然后加載其他子應用。子應用又需要進行“下載html --> 下載javascript文件 --> 運行javascript代碼 --> 請求服務端數據 --> 頁面展示"整個流程,導致微前端框架切換應用卡頓不流暢。


       3、容易出現樣式沖突,不同子應用容易影響

      傳統微前端框架中所有子應用都在同一上下文中,如出現全局樣式、全局監聽、全局變量,便會對其他子應用有影響,容易出現樣式沖突,內存泄漏,或者不可預知的bug。


      三、Why Not Iframe


      iframe 最大的特性就是提供了瀏覽器原生的硬隔離方案,不論是樣式隔離、JS隔離這類問題統統都能被完美解決。


      那為啥不使用iframe呢?


      qiankun 團隊也給出了原因:看這里 Why Not Iframe。


      總結起來就是:

      • url 不同步。瀏覽器刷新 iframe url 狀態丟失、后退前進按鈕無法使用。

      • UI 不同步,DOM 結構不共享。想象一下屏幕右下角 1/4 的 iframe 里來一個帶遮罩層的彈框,同時我們要求這個彈框要瀏覽器居中顯示,還要瀏覽器 resize 時自動居中..

      • 全局上下文完全隔離,內存變量不共享。iframe 內外系統的通信、數據同步等需求,主應用的 cookie 要透傳到根域名都不同的子應用中實現免登效果。

      • 慢。每次子應用進入都是一次瀏覽器上下文重建、資源重新加載的過程。


      其中有的問題比較好解決(問題1),有的問題我們可以睜一只眼閉一只眼(問題4),但有的問題我們則很難解決(問題3)甚至無法解決(問題2),而這些無法解決的問題恰恰又會給產品帶來非常嚴重的體驗問題, 最終導致我們舍棄了 iframe 方案。


      四、擎天框架設計


      4.1 設計理論


      基于以上微前端缺陷,設計新型的微前端框架需要滿足以下要求:

      • —— 頁面加載速度、應用切換速度是前端極致的追求,用戶操作的響應速度永遠是第一體驗。

      • 完全隔離—— 不同子應用完全隔離,只在子應用項目初始化時設置一次,之后不需要在后續開發中及后期維護中考慮,降低開發的心智負擔。


      4.2 架構設計


      擎天框架架構分為三層,分別是用戶入口(瀏覽器地址欄),主應用層以及子應用集合層。


      (1)瀏覽器(地址欄)是用戶入口,用戶通過輸入URL進入該系統,同時瀏覽器地址欄URL根據應用頁面進行變化,方便用戶復制分享二次進入。


      (2)主應用是擎天框架的關鍵部分,主要是由以下兩部分組成:

      • 路由引擎:實現瀏覽器地址欄與子應用展示隱藏的協調控制,用來控制用戶第一次進入展示某個應用,當用戶切換頁面時需同步瀏覽器地址欄(方便用戶復制,再次進入同一頁面),并根據頁面URL展示隱藏子應用。

      • 數據共享引擎:實現子應用間的數據共享,保證各個應用間數據統一,如登錄信息,用戶信息等。用戶在某個應用修改共享數據后,會同步到數據共享引擎,再分發給其他應用,從而保證共享數據一致。


      (3)子應用集合層


      該層為系統提前設置好的子應用集合,子應用由全屏iframe加載,同一時刻僅有一個子應用處于可視狀態,其他子應用隱藏。當需要應用切換時,隱藏當前應用,顯示需要展示的應用,瞬間切換。


      子應用響應擎天的路由引擎及數據共享引擎,做到實時的路由同步與數據同步,保證整個微前端項目路由及數據統一。


      五、擎天框架實現


      擎天框架突破了 iframe UI不同步、URL不同步、數據不共享以及加載慢等問題,并將iframe作為頁面容器存在,在實現硬隔離的同時做到了子應用瞬間切換,解決了微前端框架一直以來的通病,從而實現單應用級別的操作體驗。


      5.1全屏iframe、共同組件


      解決問題:UI 不同步

      全屏iframe是指整個瀏覽器窗口全部給子應用iframe,子應用接管瀏覽器所有功能,無論是全局拖動、全部蒙層、resizie等,由此UI不同步的問題便不存在了。

      但不同應用有個相同的公用部分,因此需要把公共部分做成統一組件,發到npm包中,在每一個應用中引入就行。


      5.2 父子應用異步加載


      解決問題:加載慢

      在前端靜態頁面中預留子應用dom節點,如下圖 所示,每一個div有唯一id,代表一個預制子應用。同時該id對應子應用路由pathname,如New對應/New/*路由,即以New開頭的路由全部對應id為"New"的子應用。


      當用戶進入頁面后,父框架拿到瀏覽器url,并獲取到pathname,從而知道需要首先加載那個子應用。并且直接創建iframe,并直接掛到對應的dom節點中,父應用和子應用異步加載。



      加載完首個子應用后,開始加載其他子應用,并使用display: none將它們隱藏到頁面dom結構中。最終dom節點如下圖所示。



      5.3 子應用iframe瞬間切換


      解決問題:子應用切換卡頓

      用戶進行多個子應用切換時,擎天框架監聽瀏覽器url地址,如pathname從/New/*變成/Web/*,則將/New/*對應的子應用iframe隱藏起來,將/Web/對應的子應用iframe顯示出來,實現應用的瞬間切換。


      用戶可視范圍內只能看一個應用,切換時僅僅是將New應用隱藏不可見,Web應用頁面可見。




      5.4 路由引擎,同步切換


      解決方案:URL不同步

      受vue2中數組方法(如push、shift)響應式處理的啟發,擎天對前端路由框架進行特殊處理,重寫了vue-router的push、replace等方法,當監聽到子應用使用以上方法進行路由切換時,會同步到父框架進行操作。



      父子應用簡單配置后,父子路由同步便做好了。路由切換分為單應用以及多應用間路由切換。


      (1)單應用路由切換

      單應用子iframe路由切換,如/New/b 切換到/New/c,其pathname結構一致,是單應用的路由切換。子應用先切換路由,隨后發送syncRoute給父框架,父框架使用replace方法改變瀏覽器地址欄即可,具體流程如下圖所示。



      (2)多應用間路由切換

      如/New/b 切換到/Web/c,其pathname結構不一致。子應用先切換路由,隨后發送syncRoute消息給父框架,父框架使用replace方法改變瀏覽器地址欄,同時將應用A隱藏起來,并發送消息到子應用B中。子應用B獲得消息后修改其本身路由。




      5.5 數據共享


      解決問題:內存變量不共享

      父應用將需要共享的數據放到store中,并使用syncStore進行注冊。



      子應用通過類vuex似的 mapGlobalState 方法可以獲取父應用store中數據,同時該數據為響應式,數據變更可觸發UI重新渲染。


      通過mapGlobalMutations獲取修改數據的方法,通過該方法可以修改父應用store數據,修改成功后擎天共享數據引擎將修改好的數據分發給各個子應用,保證共享數據一致。



      其內部邏輯是:


      父應用將需要共享的數據放到store中,并暴露getTopStore(獲取store數據)、syncTopMutation(更新store數據)、syncTopStore(分發store數據)等接口。


      系統加載時子應用通過getTopStore方法可以獲取store中數據,并賦值到子應用$pstore中,從而獲得數據響應式等能力。


      當某個子應用需要修改共享數據時,調用syncTopMutation方法進行修改,修改成功后擎天通過syncTopStore分發給各個子應用,保證共享數據一致。



      六、總結


      擎天基于全屏Iframe與搭建公共組件等方式,解決了iframe UI不同步的難題,并充分發揮了iframe作為頁面容器的優勢,實現了父子應用異步加載、子應用瞬間切換的能力,從而達到單應用項目的體驗。



      END


      標簽:路由 數據 框架
      數字人技術在直播場景中的應用
      ? 上一篇 2022-09-08
      基于位置變化的市縣彈出引導切換
      下一篇 ? 2022-09-08
      • 如何在Ubuntu中保留文件系統并備份當前開發板鏡像
        0閱讀 0條評論 個贊
        在Ubuntu保留文件系統或者說備份當前開發板鏡像的需求在不斷增加。比如Ubuntu文件系統需要安裝庫文件的話直接使用apt-get工具就可以下載,但由于需要下載的核心板較多,比較費時間,這時需要將安……
      • 國產核心板全志T507助力消防系統升級
        0閱讀 0條評論 個贊
        9月16日下午,位于湖南長沙市區內的中國電信大樓發生火災,建筑高度218米,現場濃煙滾滾,數十層樓體燃燒劇烈。消防救援人員趕到現場后很快將火勢控制住,目前大樓火勢已被撲滅,所幸未發現人員傷亡。湖南電信……
      • 教大家如何處理Spring Boot易流中的用戶和群體!
        0閱讀 0條評論 個贊
        1.準備工作2.用戶操作2.1添加用戶2.2修改用戶2.3刪除用戶2.4查詢用戶3.組操作3.1添加組3.2修改組3.3刪除組3.4查詢組4.查看表詳情雖然說我們在實際開發中,……
      • 從PG15開始WAL壓縮優化
        0閱讀 0條評論 個贊
        PG15傳聞中的超級令人激動的功能大多數跳票了,年初我也寫過一個關于PG15新功能跳票的文章。PG15BETA已經發出幾個月了,似乎PG15里令人激動人心的功能不多,不過從長長的新功能列表里,……
      • 深入了解美團葉子發射器開源方案
        0閱讀 0條評論 個贊
        大家好,我是樹哥。之前我們有聊過「如何設計一個分布式ID發號器」,其中有講過4種解決方案,分別是:UUID類雪花算法數據庫自增主鍵Redis原子自增美團以第2、3種解決方案為基礎,開發出……
      發表評論 共有條評論
      用戶名: 密碼:
      驗證碼: 匿名發表
      • 記錄在線超時的分析和故障排除過程
        0閱讀 0條評論 個贊
        .css-1yuhvjn{margin-top:16px;}.css-3jt6os.FileLinkCard{-webkit-align-items:center;-webkit-box-align……
      • Velox簡介:一個開源的統一執行引擎
        0閱讀 0條評論 個贊
        ?Meta正在引入Velox,這是一個開源的統一執行引擎(unifiedexecutionengine),旨在加速數據管理系統和簡化其開發。?Velox正在積極開發中,Meta在2022……
      • i.MX8MQ自制背板無PCIe問題詳解
        9閱讀 0條評論 個贊
        在飛凌嵌入式OKMX8MQ-C開發板上有兩個PCIe接口,對應著兩個PCIe差分時鐘,兩路PCIe分別用作了M.2接口卡槽KEYE(P37)和KEYM(P34)。很多使用FETMX8MQ-C核心板的用……
      • Java接口自動測試框架系列(1)自動測試框架
        0閱讀 0條評論 個贊
        一、什么是自動化測試自動化測試是把以人為驅動的測試行為轉化為機器執行的一種過程。通常,在設計了測試用例并通過評審之后,由測試人員根據測試用例一步步執行測試,得到實際結果與期望結果的比較。為了節省人力、……
      • 圖解架構| SaaS、PaaS、IaaS
        0閱讀 0條評論 個贊
        這是悟空的第164篇原創文章官網:www.passjava.cn你好,我是悟空哥。上次聊到了架構圖如何畫,其中涉及到了云服務的架構圖,里面提到了很重要的三個概念PaaS、IaaS、SaaS,很有必要……
      • 適時變革 共創未來| 2022數字技能職業教育生態研討會圓滿落幕
        0閱讀 0條評論 個贊
        2022年8月25日,由恒利聯創主辦的“適時而變,聯創未來”2022數字技能職業教育生態研討會在線上舉行。本屆大會圍繞“數字技能職業教育和數字化人才培養”的話題,邀請了Oracle技術人才發展部總經理……
      • 訂單超時案例的RabbitMQ實現
        0閱讀 0條評論 個贊
        前言#人間清醒目錄前言業務場景JUC(DelayQueue)方案DelayQueue簡介JUCDelayQueue實現訂單超時案例代碼案例代碼RedisKey過期事件方案簡介RabbitKey……
      • SQL Server 2005分區模板和實例
        0閱讀 0條評論 個贊
        一、場景這一段時間使用SQLServer2005對幾個系統進行表分區,這幾個系統都有一些特點,比如數據庫某張表持續增長,給數據庫帶來了很大的壓力?,F在假如提供一臺新的服務器,那么我們應該如何規劃……
      • 能夠在JAVA中自定義和擴展Swagger 自動生成參數值的含義 提高開發效率
        0閱讀 0條評論 個贊
        大家好,又見面了。在JAVA做前后端分離的項目開發的時候,服務端需要提供接口文檔供周邊人員做接口的對接指導。越來越多的項目都在嘗試使用一些基于代碼自動生成接口文檔的工具來替代由開發人員手動編寫接口文檔……
      • 詳細解釋MySQL隔離級別
        0閱讀 0條評論 個贊
        一個事務具有ACID特性,也就是(Atomicity、Consistency、Isolation、Durability,即原子性、一致性、隔離性、持久性),本文主要講解一下其中的Isolation,也……
      • 如何使用helm優雅地安裝prometheus-operator并監控k8s集群微服務
        0閱讀 0條評論 個贊
        前言:隨著云原生概念盛行,對于容器、服務、節點以及集群的監控變得越來越重要。Prometheus作為Kubernetes監控的事實標準,有著強大的功能和良好的生態。但是它不支持分布式,不支持數據……
      • spring項目中啟動包的原理 以及自定義啟動包的使用
        0閱讀 0條評論 個贊
        MAVEN項目中starter的原理一.原始方式我們最早配置spring應用的時候,必須要經歷的步驟:1.pom文件中引入相關的jar包,包括spring,redis,jdbc等等2.通過prope……
      • 深入理解Redis數據結構-字典
        0閱讀 0條評論 個贊
        字典,又稱為符號表、關聯數組或映射,是一種用于保存鍵值對的抽象數據結構。在字典中,一個鍵可以和一個值進行關聯,這些關聯的鍵和值稱為鍵值對。鍵值對中鍵是唯一的,我們可以根據鍵key通過映射查找或者更新對……
      • 拓撲嶺CEO雷鵬:創業不只是技術
        0閱讀 0條評論 個贊
        云計算的出現,加速了企業信息技術的發展。數據庫是最常用的基礎軟件之一,它通常能提供計算和存儲的能力。雖然分布式數據庫也做到了很好的擴展性,但它不能算是「云原生」?!冈圃鷶祿臁沟暮诵?,是要設計一種更……
      • 談ASP.NET核心認證與授權
        0閱讀 0條評論 個贊
        使用asp.netcore開發應用系統過程中,基本上都會涉及到用戶身份的認證,及授權訪問控制,因此了解認證和授權流程也相當重要,下面通過分析asp.netcore框架中的認證和授權的源碼來分析……
      • Python自學教程7:字典類型有什么用
        0閱讀 0條評論 個贊
        字典是Python中的一個重要操作,如果字典玩得順,很多其他的數據類型就可以一通百通。Python字典的定義字典使用一對大括號進行定義,鍵值對之間使用逗號隔開,鍵和值使用冒號分隔。鍵必須是不可變類型,……
      • 計算機網絡-了解-DNS和HTTPDNS
        0閱讀 0條評論 個贊
        DNS和HTTPDNSDNS域名解析的過程傳統DNS存在的問題1、域名緩存問題2、域名轉發問題3、出口NAT問題4、DNS域名更新問題5、解析延遲問題6、運營商劫持HTTPDNSHTTP……
      • Sql Server連接池及其用法
        0閱讀 0條評論 個贊
        其實我們一直在使用SqlServer的連接池。在連接字符串中,Pooling為是否啟用連接池,默認值為true,表示啟用。與連接池相關的兩個重要參數是MinPoolSize和MaxPoo……
      • 海量小文件總結及解決策略(三)NameNode、Hadoop歸檔文件等
        0閱讀 0條評論 個贊
        .css-1yuhvjn{margin-top:16px;}.css-3jt6os.FileLinkCard{-webkit-align-items:center;-webkit-box-align……
      • 關于Redis在windows上運行的問題和fork函數
        0閱讀 0條評論 個贊
        Redis在將數據庫進行持久化操作時,需要fork一個進程,但是windows并不支持fork,導致在持久化操作期間,Redis必須阻塞所有的客戶端直至持久化操作完成。微軟的一些工程師花費時間在解決在……
      最近發布資訊
      更多
      警花高潮嗷嗷叫
      <del id="nnjnj"></del><track id="nnjnj"></track>

      <p id="nnjnj"></p>

      <address id="nnjnj"></address>

        <pre id="nnjnj"><pre id="nnjnj"></pre></pre>

          <noframes id="nnjnj"><ruby id="nnjnj"><ruby id="nnjnj"></ruby></ruby>