web前端中應(yīng)該了解的微型前端框架有哪些

本篇文章為大家展示了web前端中應(yīng)該了解的微型前端框架有哪些，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

發(fā)現(xiàn)最好的工具，以幫助您構(gòu)建偉大的微觀前端。

將長(zhǎng)期的后端整料分解為微服務(wù)允許新發(fā)現(xiàn)效率和尺度在后端開發(fā)過(guò)程中。然而，今天的大多數(shù)前端應(yīng)用架構(gòu)仍然是單片，使得難以加速和縮放前端開發(fā)過(guò)程是同樣的意義。

微前端的想法是將前端整向單片分解成更小，更可管理的碎片。每個(gè)團(tuán)隊(duì)都可以在端到端擁有自己的功能，在自己的代碼庫(kù)中工作，獨(dú)立發(fā)布版本，不斷提供小的增量升級(jí)，也可以通過(guò)API與其他團(tuán)隊(duì)集成，以便它們可以撰寫和管理頁(yè)面和應(yīng)用程序。

微型前端有許多方法，從組件的智能構(gòu)建時(shí)間集成到使用自定義路由器的運(yùn)行時(shí)集成。在此列表中，我收集了最突出的工具，以幫助構(gòu)建微型前端。請(qǐng)隨時(shí)添加評(píng)論中的反饋或建議!

1. Bit

位允許您從獨(dú)立組件編寫和管理前端。這可能是列表中最受歡迎和最受歡迎的制作的解決方案。

如果您看看bit.dev主頁(yè)，您將注意到它由不同團(tuán)隊(duì)構(gòu)建的獨(dú)立組件，在不同的代碼庫(kù)中，并且全部集成在一起以創(chuàng)建一個(gè)凝聚力的產(chǎn)品。

> Example — Micro frontends with Bit components

Bit CLI是一個(gè)廣泛流行的組件驅(qū)動(dòng)開發(fā)工具。有了位，您可以在一起構(gòu)建，集成和撰寫?yīng)毩⒔M件。

雖然微型前端通常被認(rèn)為是在運(yùn)行時(shí)發(fā)生的組合物，但是有點(diǎn)讓開發(fā)人員有效地構(gòu)成構(gòu)建 時(shí)的前端，以享受兩個(gè)世界的最佳選擇：“傳統(tǒng)整體”的安全性和穩(wěn)健性以及微前端的簡(jiǎn)單性和可擴(kuò)展性。

使用Bit，不同的團(tuán)隊(duì)可以獨(dú)立構(gòu)建，發(fā)布和公開組件，同時(shí)與其他團(tuán)隊(duì)合作將Web開發(fā)過(guò)程轉(zhuǎn)換為功能和組件的模塊化組成。

除了OSS工具的組件驅(qū)動(dòng)的開發(fā)工具外，位為團(tuán)隊(duì)提供了一個(gè)云平臺(tái)，以構(gòu)建更改，并在組件上共同合作，以便可以有效地管理和縮放，同時(shí)保留所有團(tuán)隊(duì)完全獨(dú)立的團(tuán)隊(duì)自主交付。

為了確保每個(gè)前端獲得自己的獨(dú)立和快速構(gòu)建過(guò)程，還提供了一個(gè)唯一的CI / CD進(jìn)程，即100%組件驅(qū)動(dòng)，這意味著不同的團(tuán)隊(duì)可以安全地集成更改而無(wú)需等待，爭(zhēng)取控制，或者打破任何東西。開發(fā)人員可以在所有受影響的應(yīng)用程序中持續(xù)和安全地傳播對(duì)組件的更改。

> Component-driven CI: X50 Faster

因此，使用簡(jiǎn)單的解耦的碼條，自主團(tuán)隊(duì)，小型定義API，獨(dú)立釋放管道和持續(xù)增量升級(jí)，增強(qiáng)了工作流程。

如果您的團(tuán)隊(duì)正在使用組件構(gòu)建并且正在尋找解鎖微型前端和模塊化工作的解決方案，請(qǐng)務(wù)必查看可能是您需要的Bit的OSS工具和平臺(tái)。

2. WebPack 5和模塊聯(lián)合

多個(gè)單獨(dú)的構(gòu)建應(yīng)形成單個(gè)應(yīng)用程序。這些單獨(dú)的構(gòu)建不應(yīng)彼此之間有依賴關(guān)系，因此可以單獨(dú)開發(fā)和部署它們。La Micro Frontends。

模塊聯(lián)合是由Zack Jackson發(fā)明的JavaScript架構(gòu)，然后提出為它創(chuàng)建一個(gè)WebPack插件。WebPack團(tuán)隊(duì)有助于將插件帶入WebPack 5，目前在Beta中。

簡(jiǎn)而言之，模塊聯(lián)合允許JavaScript應(yīng)用程序在運(yùn)行時(shí)從另一個(gè)應(yīng)用程序動(dòng)態(tài)導(dǎo)入代碼。該模塊將構(gòu)建一個(gè)唯一的JavaScript條目文件，可以通過(guò)設(shè)置WebPack配置來(lái)由其他應(yīng)用程序下載。

它還通過(guò)啟用依賴性共享來(lái)解決代碼依賴關(guān)系和增加捆綁大小的問題。例如，如果您正在下載React組件，您的應(yīng)用程序?qū)⒉粫?huì)導(dǎo)入兩次React代碼。該模塊將巧妙地使用您已經(jīng)擁有的React源，并僅導(dǎo)入組件代碼。最后，您可以使用React.Lazy和React.Suspense如果導(dǎo)入的代碼出于某種原因，請(qǐng)?zhí)峁┩嘶?，如果出于某種原因，請(qǐng)確保用戶體驗(yàn)不會(huì)因版本而無(wú)法中斷。

這解鎖了構(gòu)建微型前端的一些非常有利的潛力。

3.單頁(yè)面應(yīng)用 SPA

單個(gè)SPA將其自身定義為“前端微服務(wù)的JavaScript框架”。簡(jiǎn)而言之，它適用于每個(gè)應(yīng)用程序的生命周期。每個(gè)應(yīng)用程序都可以響應(yīng)URL路由事件，并且必須知道如何從DOM引導(dǎo)，掛載和卸載自己。傳統(tǒng)的SPA和單級(jí)SPA應(yīng)用程序之間的主要區(qū)別在于它們必須能夠與其他應(yīng)用程序共存，并且它們并不是每個(gè)都有自己的HTML頁(yè)面。

因此，如果您希望將不同的前端或框架放入一個(gè)DOM并旨在在運(yùn)行時(shí)集成，請(qǐng)查看此有趣的實(shí)驗(yàn)。

4. SystemJS

SystemJS不是微型框架，但它確實(shí)為獨(dú)立模塊的跨瀏覽器管理提供了解決方案，這是實(shí)現(xiàn)MFS的關(guān)鍵(并且實(shí)際上由單個(gè)SPA使用)。

系統(tǒng)js可以被認(rèn)為是JS模塊的指揮。它允許我們使用不同的JS模塊相關(guān)的功能，例如動(dòng)態(tài)導(dǎo)入，導(dǎo)入地圖等，而無(wú)需依賴本機(jī)瀏覽器支持 - 以及所有接近本地性能。一些明顯的功能包括舊瀏覽器的Polyfill，模塊使用名稱(通過(guò)映射到路徑)的名稱，以及用于多個(gè)JS模塊的單個(gè)網(wǎng)絡(luò)請(qǐng)求(通過(guò)使用其API將多個(gè)模塊設(shè)置為單個(gè)文件)。

它還可以輕松訪問其“模塊注冊(cè)表”，讓您知道瀏覽器中有哪些模塊在任何時(shí)候都可以使用。看一看。

5. Piral.

Piral的目標(biāo)是讓您輕松使用微前端構(gòu)建門戶網(wǎng)站應(yīng)用程序。Piral使您可以創(chuàng)建一個(gè)模塊化前端應(yīng)用程序，該應(yīng)用程序在運(yùn)行時(shí)擴(kuò)展，其中包含叫滅脫帽的解耦模塊，利用了微型前端架構(gòu)。Pilet可以獨(dú)立開發(fā)，并以必要的代碼以及所有其他相關(guān)資產(chǎn)。

前提條件相當(dāng)不錯(cuò)，作為開發(fā)人員，您只需要您最喜歡的編輯器，終端，互聯(lián)網(wǎng)瀏覽器和Node.js。Piral實(shí)例(應(yīng)用程序shell)和Pilets(應(yīng)用程序shell)可以在本地開發(fā)機(jī)上的仿真器中執(zhí)行和調(diào)試。

6.Open Components

Open Components項(xiàng)目將其目標(biāo)宣布為“在前端世界中的無(wú)服務(wù)架構(gòu)”。更具體地說(shuō)，OC旨在成為微前端的框架，它提供了一個(gè)地方所需的一切，使其成為一個(gè)豐富和復(fù)雜的系統(tǒng)，包括從組件處理到注冊(cè)表到模板甚至CLI工具的工具。OpenComponents有兩部分：

組件是小單位代理代碼，主要由HTML，JavaScript，CSS組成。它們可以選擇包含一些邏輯，允許服務(wù)器端節(jié)點(diǎn).js應(yīng)用程序撰寫用于呈現(xiàn)視圖的模型。渲染后，它們是要注入任何HTML頁(yè)面的純HTML。

消費(fèi)者是網(wǎng)站或微基金(所有由前門服務(wù)或任何路由機(jī)制連接的小型可部署網(wǎng)站)，需要組件以在其網(wǎng)頁(yè)中呈現(xiàn)部分內(nèi)容。

7.Qiankun

Qiankun表示它是“基于SPA的微型前端的實(shí)施，而是制造它準(zhǔn)備就緒”。該項(xiàng)目旨在解決圍繞較小的子應(yīng)用程序組成較大應(yīng)用程序的主要問題，例如發(fā)布靜態(tài)資源，集成各個(gè)子應(yīng)用程序，確保子應(yīng)用程序在開發(fā)和部署期間彼此獨(dú)立，并且是運(yùn)行時(shí)隔離，處理公共依賴項(xiàng)，處理性能問題等。

在中國(guó)傳統(tǒng)文化中，乾來(lái)意味著天堂和坤代表地球，所以Qiankun是宇宙。一個(gè)…

8. Luigi

Luigi是一個(gè)微前端JavaScript框架，使您可以創(chuàng)建由本地和分布式視圖驅(qū)動(dòng)的管理用戶界面。Luigi允許Web應(yīng)用程序與應(yīng)用程序包含的微前端通信。要確保通信順利運(yùn)行，您可以配置路由，導(dǎo)航，授權(quán)和UX元素等設(shè)置。

Luigi由Luigi核心應(yīng)用程序和Luigi客戶端庫(kù)組成。它們使用PostMessage API建立核心應(yīng)用程序和微前端之間的安全通信。尋找自己。

這是一個(gè)測(cè)試游樂場(chǎng)，讓您掌握它的工作方式。嘗試一下，通過(guò)SAP在GitHub上查看這個(gè)很好的項(xiàng)目。

9. FrintJS

Frintjs是“模塊化JavaScript框架，用于構(gòu)建可擴(kuò)展和反應(yīng)應(yīng)用程序”。它允許您加載來(lái)自單獨(dú)的Bundlers中的應(yīng)用程序，為您的應(yīng)用程序提供一個(gè)結(jié)構(gòu)，并處理諸如路由，依賴項(xiàng)等所關(guān)注的真實(shí)性。該項(xiàng)目還通過(guò)其他軟件包支持RN和Vue，但它主要記錄并測(cè)試React。

在此處在現(xiàn)場(chǎng)演示游樂場(chǎng)嘗試，或訪問Github上的項(xiàng)目以了解更多內(nèi)容。

10.Mosaic 9

Mosaic是一組服務(wù)，庫(kù)以及一個(gè)規(guī)范，定義其組件如何相互交互，以支持大規(guī)模網(wǎng)站的微服務(wù)樣式架構(gòu)。Mosaic使用單獨(dú)的服務(wù)片段，并根據(jù)模板定義在運(yùn)行時(shí)組成。

它由一堆包組成，包括處理不同的問題，例如路由，布局，模板存儲(chǔ)甚至展示UI。

11. PuzzleJS

Puzzlejs是“用于可擴(kuò)展和快速網(wǎng)站的微前端框架”。它允許您創(chuàng)建彼此交談的網(wǎng)關(guān)和店面項(xiàng)目。它是由Facebook的BigPipe的啟發(fā)，朝著微觀的方向。

PuzzleJS提供創(chuàng)建網(wǎng)關(guān)或店面(彼此獨(dú)立的店面(彼此)，并通過(guò)提供配置文件來(lái)連接它們。它允許您在編譯時(shí)將HTML模板編譯為JavaScript函數(shù)。此操作完全獨(dú)立于請(qǐng)求，因此Puzzlejs可以使用此功能發(fā)送第一個(gè)塊。它也是SEO友好，并在服務(wù)器端編寫和渲染。并且，當(dāng)片段所需的API下降時(shí)，PuzzleJs保證了其他頁(yè)面碎片仍然是工作。這是一個(gè)真實(shí)的例子。

上述內(nèi)容就是web前端中應(yīng)該了解的微型前端框架有哪些，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。