微前端技術(shù)的發(fā)展與應(yīng)用

張 潔，王燕梅，韓 強

（1.瓊臺師范學(xué)院信息科學(xué)技術(shù)學(xué)院，海南 ?？?571100；2.瓊臺師范學(xué)院教育大數(shù)據(jù)與人工智能研究所，海南 ?？?571100）

對于企業(yè)的生產(chǎn)和發(fā)展而言，良好的管理系統(tǒng)可以有效地促進(jìn)企業(yè)的進(jìn)一步發(fā)展，因此數(shù)據(jù)管理系統(tǒng)的便捷性和高效性是極其重要的。但是傳統(tǒng)的Web 前端技術(shù)無法給予數(shù)據(jù)管理系統(tǒng)良好的操作性能，往往會有一些問題，例如開發(fā)過程中使用的框架單一，原有的代碼因為技術(shù)更新不及時而無法直接遷移等。為了解決前端技術(shù)的不足，需要應(yīng)用微前端技術(shù)將各個應(yīng)用拆分為幾個多應(yīng)用的聚合，這樣才能夠讓各個部分都能夠獨立地開發(fā)、運行，在出現(xiàn)問題時也能夠更高效地解決。

1 微前端概念

微前端是將Web 應(yīng)用由單一的單體應(yīng)用轉(zhuǎn)變?yōu)槎鄠€小型前端應(yīng)用聚合為一的應(yīng)用，各個前端應(yīng)用還可以獨立運行、獨立開發(fā)、獨立部署。微前端不是單純的前端框架或者工具，而是一套架構(gòu)體系。

1.1 國內(nèi)外研究現(xiàn)狀

隨著時代的發(fā)展，軟件技術(shù)在不斷更新，而Web 的開發(fā)模式也日漸簡化，從最早的前后端的整體，到后面形成前后端分離的模式，經(jīng)歷了幾次技術(shù)的革新。前端的MVC框架，可以有效地保存和處理數(shù)據(jù)，并且生成相關(guān)的視圖；而后出現(xiàn)了前端的MVVM 設(shè)計模式，它能夠?qū)VC 框架中的控制器用視圖模型層進(jìn)行替換，這樣可以有效地將用戶的界面和業(yè)務(wù)邏輯的開發(fā)區(qū)進(jìn)行區(qū)分，這樣對于開發(fā)者而言能夠有針對性地進(jìn)行業(yè)務(wù)的邏輯處理。

國外很早就開始對前后端的分離技術(shù)進(jìn)行了研究，目前主要流行的是Angular.js，React.js，Vue.js 這幾類框架。Angular.js 是由谷歌開發(fā)維護(hù)的，引入了MVC 開發(fā)模式，主要是在海外應(yīng)用較多；React.js 由Facebook 團(tuán)隊開發(fā)完成，使用虛擬DOM 機制以及組件驅(qū)動的開發(fā)方式，在國內(nèi)外都被廣泛應(yīng)用。而Vue.js 由中國軟件工程師尤雨溪借鑒Angular.js 和React.js 的設(shè)計思想進(jìn)行開發(fā)的，在國內(nèi)各種互聯(lián)網(wǎng)公司中都得到了廣泛應(yīng)用。

1.2 微前端實現(xiàn)框架

現(xiàn)在在微前端中較常應(yīng)用的技術(shù)有：借助前端路由將前端應(yīng)用微服務(wù)化、借助iframe 技術(shù)實現(xiàn)微前端、利用Web Components 技術(shù)實現(xiàn)微前端以及Single-spa 等自研微前端框架。第一個主要是通過路由可以將不同的業(yè)務(wù)模塊分開，讓其能夠各自獨立到自己的子應(yīng)用中去，主要是通過Nginx 服務(wù)器反向代理，或者前端框架自帶的Route來解決，這種方法較為簡單，但是在每次不同的應(yīng)用進(jìn)行跳轉(zhuǎn)的時候會存在弊端，即每次都要刷新頁面，而這個過程中每個子應(yīng)用的加載時間不一致，時間過長時整個應(yīng)用會有很長的白屏?xí)r間，會嚴(yán)重影響用戶的體驗感。第二種的優(yōu)勢在于它提供了瀏覽器原生自帶的硬隔離方案，這樣能夠讓一個html 頁面完全嵌入到另一個html 頁面中，也能夠保證子應(yīng)用間的完全獨立，并且它是以iframe 的方式集成到主程序中，從而保證每個模塊都能應(yīng)用不同的技術(shù)棧進(jìn)行獨立地開發(fā)，但是也會存在弊端，就是子應(yīng)用間的內(nèi)存變量是無法共享的，也因此導(dǎo)致了加載效率的下降。第三種是通過Web Components 技術(shù)整合所有模塊，每個組件能夠組織好自己的HTML、CSS 和JavaScript 代碼，它能夠允許開發(fā)者在外部封裝可重用的定制化元素，按照需要用在Web 前端應(yīng)用上。最后Single-spa 支持幾乎大部分當(dāng)前主流前端框架的啟動和卸載處理，兼容目前主流的技術(shù)棧，拆分后的模塊可以做到完全獨立，同時能夠依據(jù)具體需要來指定加載時機，提高性能，但是單純地使用它是沒辦法開箱即用，需要對子應(yīng)用進(jìn)行較多的改造，增加了開發(fā)的復(fù)雜度。

2 微前端相關(guān)技術(shù)

2.1 微前端技術(shù)

微前端技術(shù)是在微服務(wù)技術(shù)的基礎(chǔ)上產(chǎn)生的，它能夠?qū)⒍鄠€子系統(tǒng)集成在主系統(tǒng)中，這樣能夠形成一個完整的應(yīng)用，并且每一個子系統(tǒng)具有獨立開發(fā)和運行的功能，用戶可以任意訪問各個子應(yīng)用。微前端架構(gòu)的實現(xiàn)是目前的主流方式，就是利用“主從”思想，整個系統(tǒng)包括一個主應(yīng)用和多個子應(yīng)用構(gòu)成。其中主應(yīng)用為系統(tǒng)的核心工程，主要負(fù)責(zé)路由控制、應(yīng)用注冊、應(yīng)用加載、生命周期管理等。而子應(yīng)用可以分別看作為多個獨立的應(yīng)用，每個應(yīng)用可以不限制技術(shù)棧，當(dāng)它們要跟主應(yīng)用構(gòu)成一個更大的系統(tǒng)時，它們需要分別注冊到主應(yīng)用中，當(dāng)然即使脫離了主應(yīng)用各個子應(yīng)用也是可以單獨訪問的。在目前的微前端解決方案中，Singlespa 框架以及qiankun 較為常用。前者是將生命周期管理應(yīng)用于整個系統(tǒng)，這樣使得子應(yīng)用可以在不刷新頁面的情況下進(jìn)行跳轉(zhuǎn)，它的優(yōu)點是幾乎支持所有的JavaScript 框架，針對Vue、React 等框架都有諸如single-spa-vue、singlespa-react 的庫，它也支持多種不同的構(gòu)建工具。

2.2 TypeScript 編程語言

TypeScript 編程語言是JavaScript 的超集，它可以在各種瀏覽器上面進(jìn)行運行，還可以在隔離操作上運行，而且不會存在兼容性問題，它提供的一套規(guī)范可以有效實現(xiàn)類型推斷、對代碼進(jìn)行靜態(tài)類型檢查，并且減少了例如空處理、未定義等很多錯誤，而且可以利用它提前發(fā)現(xiàn)代碼漏洞，這極大地提高了開發(fā)者的開發(fā)效率，并且它的強類型規(guī)范使得代碼都非常整潔和有組織性，而且具有泛型、繼承等特性。由于TypeScript 的開源性，開發(fā)者可以自由修改其源代碼，同時它的框架設(shè)計很優(yōu)秀，提供的API 接口很充分，給開發(fā)者帶來了進(jìn)一步擴(kuò)展。而且通過TypeScript Compiler API，開發(fā)者可以自己實現(xiàn)編譯器，語法檢查自我定義，以及自定義輸出結(jié)構(gòu)等。由于編譯器核心靈活的結(jié)構(gòu)，開發(fā)者只需要簡單地添加一些代碼，就可以在IDE 中支持TypeScript 的諸多特性。而且在Type－Script 中對象聲明為any 類型就忽略檢查的機構(gòu)，保證了它保留一些弱類型的靈活，又兼顧了強類型檢查的優(yōu)勢。

在最近幾年中，TypeScript 越來越流行，在Angular、React 以及Vue 中都充分得到了應(yīng)用，而且由于Type－Script 的語法跟JavaScript 沒有太大的明顯區(qū)別，前端開發(fā)者可以用極低的學(xué)習(xí)成本無縫開始使用TypeScript，這使得它的使用者更多。

2.3 前端開發(fā)框架

前端開發(fā)框架中較為常用的是Angular 和React，以及vue。React 是一個用于構(gòu)建用戶界面的JavaScript 庫。它是目前世界范圍內(nèi)統(tǒng)計使用人數(shù)最多的幾大前端框架之一，目前國內(nèi)的螞蟻金服也基于React 為開發(fā)者提供了大量技術(shù)支持，例如在系統(tǒng)中使用的Ant Design 組件庫等。而Vue.js，它是一款理念先進(jìn)的前端漸進(jìn)式JavaScript框架，易用、靈活并且高效，它吸收了React 數(shù)據(jù)驅(qū)動和組件化的思想，借鑒了Angular 的雙向數(shù)據(jù)綁定的思想并加以改進(jìn)，同時周邊技術(shù)生態(tài)也極為豐富。Vue 的組件實質(zhì)就是可以復(fù)用的Vue 的實例，與React 類似，可以將復(fù)雜的頁面拆分為多個復(fù)用性高的、獨立的小組件，并把他們嵌套聚合在一起，既提高了代碼的可讀性，也為開發(fā)者的維護(hù)提供了方便。組件之間需要進(jìn)行數(shù)據(jù)傳遞時可以有多種方式，官方提供的就有props 傳值、借助$emit 傳值、借助eventbus 傳值、使用$ref 傳值、通過官方提供的Vuex 狀態(tài)管理傳值等多種方法，為開發(fā)者提供了極大的便利。

2.4 G6 圖可視化引擎

G6 是一個非常完備的圖可視化引擎，有著便捷、靈活等特點，它能夠依據(jù)豐富的api，為開發(fā)者提供高定制化能力，例如圖的繪制、布局、交互等可視化能力，并且也能夠提供圖可視化的解決方法等，而對于它的創(chuàng)建也極其簡單，主要就是創(chuàng)建關(guān)系圖、創(chuàng)建關(guān)系圖的HTML 容器、數(shù)據(jù)準(zhǔn)備、配置數(shù)據(jù)源、渲染等步驟，它是屬于純avascript庫，因而可以在諸如React、Vue 和Angular 等前端框架中使用，使用較為廣泛。

3 微前端的應(yīng)用

3.1 前端工程化

Web 在發(fā)展的過程中業(yè)務(wù)越來越復(fù)雜，因此在前端的開發(fā)過程中運用工程化的方式可以將開發(fā)的效率和質(zhì)量提高，并且能夠有效降低開發(fā)的成本。前端的工程化主要包括規(guī)范化、自動化、組件化以及模塊化。首先是規(guī)范化，項目開發(fā)規(guī)范的制定對于前端工程化來說十分關(guān)鍵，例如清晰的目錄結(jié)構(gòu)能夠很好地提高項目的結(jié)構(gòu)合理性，或者良好的代碼規(guī)范可以有效地提高代碼質(zhì)量以及有利于團(tuán)隊協(xié)作開發(fā)，而且合理的前后端接口規(guī)范能有利于團(tuán)隊溝通，提升開發(fā)效率。其次是自動化，在項目開發(fā)過程中，如果遇到重復(fù)的操作應(yīng)該盡量考慮采用合適的自動化工具來幫助開發(fā)者完成項目開發(fā)。然后是組件化，頁面上所有的東西其實都可以看作一個組件。這種組件化思想也被Vue、React 和Angular 等框架借鑒，大的組件可以逐漸向下拆分，所有的組件構(gòu)成一個完整的頁面，每個組件的功能逐漸細(xì)化，這可以極大地提高代碼的復(fù)用性并且有利于后期的維護(hù)。最后是模塊化，如今模塊化方案一般有ES6 規(guī)定的模塊系統(tǒng)，以及社區(qū)指定的一些諸如CommonJs、AMD 和CMD 方案。目前ES6 的模塊系統(tǒng)幾乎已經(jīng)可以完全取代之前的CommonJs 規(guī)范等方案，它也是目前的主流。

3.2 數(shù)據(jù)管理系統(tǒng)應(yīng)用

在數(shù)據(jù)管理系統(tǒng)中應(yīng)用微前端框架主要是因為它具有不限制技術(shù)棧、實現(xiàn)增量升級、具有獨立性以及高容錯率等優(yōu)點。對于主應(yīng)用而言，不限制技術(shù)棧，可以使得接入的子應(yīng)用的技術(shù)?？梢圆扇《喾N框架，并且每個子應(yīng)用都有自主權(quán)，這樣在不同子應(yīng)用的開發(fā)中都可以根據(jù)開發(fā)人員的能力特點進(jìn)行合適的技術(shù)棧的選擇，這樣也使得開發(fā)的過程更加便捷；在增量升級的過程中，可以將遺產(chǎn)代碼、復(fù)雜的業(yè)務(wù)場景進(jìn)行簡化，實現(xiàn)漸進(jìn)式重構(gòu)，能夠有效地降低企業(yè)開發(fā)時間成本和經(jīng)濟(jì)成本；獨立性是指可以獨立開發(fā)、部署、運行，開發(fā)者在后期即使不用了解整個龐大的系統(tǒng)也可以專注在自己的業(yè)務(wù)邏輯模塊，提高了開發(fā)效率；而高容錯率是保證正確的應(yīng)用能夠正常運行的關(guān)鍵。

并且在數(shù)據(jù)管理系統(tǒng)中，可以應(yīng)用微前端工程化的方式，例如可以運用webpack 打包構(gòu)建工具，它在運行時會遞歸構(gòu)建依賴關(guān)系圖，其中包含應(yīng)用程序需要的所有模塊，將這些模塊打包為一個或者多個bundle 提供給瀏覽器使用，并且它支持ES6 等多種模塊化規(guī)范以及熱替換功能（HMR），開發(fā)過程中未修改配置文件時無需重新對項目進(jìn)行打包構(gòu)建，節(jié)省了開發(fā)時間，極大地方便了開發(fā)者。

4 結(jié)束語

微前端技術(shù)實現(xiàn)了前后端分離，能夠有效地降低開發(fā)的難度，提高各子應(yīng)用的獨立性，這樣開發(fā)人員也能夠依據(jù)自身的優(yōu)勢選擇合適的框架進(jìn)行程序的書寫，并且能夠有效地解決開發(fā)過程中使用的框架單一，原有的代碼因為技術(shù)更新不及時而無法直接遷移等問題。隨著時代的發(fā)展，微前端的技術(shù)也日益豐富，目前較為常用的是Singlespa 框架、Qiankun、TypeScript 編程語言、React、Vue 以及G6 等。在微前端的應(yīng)用中使用工程化的方式會更加有助于項目的開發(fā)和管理，并且在數(shù)據(jù)管理系統(tǒng)中應(yīng)用微前端技術(shù)可以不限制技術(shù)棧同時能夠?qū)崿F(xiàn)增量升級，而它的獨立性以及高容錯率也是其應(yīng)用廣泛的原因。