6月安卓手機(jī)好評(píng)榜：魅族20 Pro蟬聯(lián)冠軍
性能榜和性價(jià)比榜之后，我們來(lái)看最后的安卓手機(jī)好評(píng)榜，數(shù)據(jù)來(lái)源安兔兔評(píng)測(cè)，收集時(shí)間2023年6月1日至6月30日，僅限國(guó)內(nèi)市場(chǎng)。第一名：魅族20 Pro好評(píng)率：95%5月份的時(shí)候魅族20 Pro就是
譯者 | 李睿
審校 | 重樓
事實(shí)表明，前端開(kāi)發(fā)伴隨著許多挑戰(zhàn)。而尋找簡(jiǎn)化開(kāi)發(fā)過(guò)程和加快任務(wù)執(zhí)行的方法是每個(gè)開(kāi)發(fā)團(tuán)隊(duì)的目標(biāo)。在開(kāi)發(fā)大型復(fù)雜產(chǎn)品時(shí)，讓開(kāi)發(fā)團(tuán)隊(duì)成員在任務(wù)上進(jìn)行協(xié)作是非常困難的。值得慶幸的是，微前端為應(yīng)對(duì)這些提供了解決方案。
微前端需要將前端單體拆分為幾個(gè)更小、更容易管理的部分。這種開(kāi)發(fā)架構(gòu)非常重要，因?yàn)樗梢蕴岣唛_(kāi)發(fā)人員處理前端代碼的效率。本文將探討React中的微前端是什么，以及微前端的優(yōu)點(diǎn)和缺點(diǎn)、實(shí)現(xiàn)選項(xiàng)和微前端架構(gòu)。還將提供示例，以幫助開(kāi)發(fā)人員在實(shí)際層面上掌握所有內(nèi)容。
微前端是一種最新的開(kāi)發(fā)模式，其中Web應(yīng)用程序用戶界面（UI）由自主組件組裝而成。
這些組件可以由不同的團(tuán)隊(duì)使用不同的技術(shù)來(lái)構(gòu)建。微前端的架構(gòu)類似于后端，后端是使用半獨(dú)立的微服務(wù)構(gòu)建的。
多年來(lái)，微前端逐漸在開(kāi)發(fā)領(lǐng)域得到普及和接受。就像后端的微服務(wù)一樣，每個(gè)應(yīng)用程序（在微前端）都是單獨(dú)存在的，具有定義明確的功能或目標(biāo)。
例如，一個(gè)典型的網(wǎng)站有主頁(yè)、“關(guān)于我們”的頁(yè)面、服務(wù)頁(yè)面、結(jié)帳頁(yè)面、付款頁(yè)面等等。根據(jù)微前端的概念，每個(gè)頁(yè)面都可以作為一個(gè)獨(dú)立的應(yīng)用程序開(kāi)發(fā)。
軟件開(kāi)發(fā)團(tuán)隊(duì)也可以分為專門的團(tuán)隊(duì)。因此，一個(gè)開(kāi)發(fā)團(tuán)隊(duì)可以負(fù)責(zé)編寫主頁(yè)，而另一個(gè)開(kāi)發(fā)團(tuán)隊(duì)負(fù)責(zé)編寫服務(wù)頁(yè)面，以此類推。
這種方法有很多優(yōu)點(diǎn)。微前端架構(gòu)旨在幫助工程師克服當(dāng)前SPA前端開(kāi)發(fā)的挑戰(zhàn)。
使用這種最新的前端開(kāi)發(fā)方法，開(kāi)發(fā)人員可以簡(jiǎn)化任務(wù)，鼓勵(lì)協(xié)作，提高過(guò)程的效率，并顯著提高生產(chǎn)力。
微服務(wù)在軟件架構(gòu)師于2011年舉辦的一個(gè)活動(dòng)中得到了解釋。微服務(wù)在當(dāng)時(shí)是許多公司都在嘗試的一種開(kāi)發(fā)風(fēng)格。隨著時(shí)間的推移，微服務(wù)作為一種后端開(kāi)發(fā)架構(gòu)的優(yōu)勢(shì)變得越來(lái)越成功。
出于進(jìn)化的目的，軟件及咨詢機(jī)構(gòu)Thought Works公司在2016年11月提出了“微前端”這個(gè)術(shù)語(yǔ)，這是一種類似于微服務(wù)的前端架構(gòu)。因此，很多企業(yè)開(kāi)始嘗試使用新架構(gòu)創(chuàng)建前端的框架。
2017年11月，Thought Works公司推薦Single Spa實(shí)施微前端。而在2019年，Martin Fowler撰寫了一篇廣受歡迎的文章，其名稱為《微前端》，該文章推廣了微前端架構(gòu)。在2020年底，Zack Jackson發(fā)布了模塊聯(lián)邦（Module Federation），這是一個(gè)包含在Webpack 5中的插件。
模塊聯(lián)邦徹底改變了微前端空間。組織現(xiàn)在已經(jīng)采用插件將有問(wèn)題的單片應(yīng)用程序轉(zhuǎn)移到微前端。也就是說(shuō)，微型前端仍處于初級(jí)階段，人們可以期待看到更多革命性的變化。
在定義了微前端及了解其簡(jiǎn)要?dú)v史之后，現(xiàn)在探索開(kāi)發(fā)微前端的不同方法。開(kāi)發(fā)人員可以使用以下三種方法構(gòu)建微前端：
模塊聯(lián)邦是Webpack 5的一個(gè)插件，能夠開(kāi)發(fā)各種不依賴于彼此的功能。因此，它們可以單獨(dú)建造和推出。使用該插件，開(kāi)發(fā)商可以快速創(chuàng)建多個(gè)函數(shù)來(lái)組成單個(gè)產(chǎn)品。
（1）是什么讓模塊聯(lián)邦變得有趣?
模塊聯(lián)邦的一些功能可以滿足開(kāi)發(fā)人員的開(kāi)發(fā)需求。以下是開(kāi)發(fā)人員應(yīng)該使用它的原因：
（2）模塊聯(lián)邦配置
插件需要配置才能正確使用。開(kāi)發(fā)人員需要知道配置如何工作以充分利用軟件。以下是需要熟悉的主要配置選項(xiàng)：
還需要了解其他Webpack配置功能，包括輸出、實(shí)驗(yàn)和優(yōu)化。為了能夠正確開(kāi)發(fā)具有模塊聯(lián)合的微型前端，有必要對(duì)這些配置選項(xiàng)有充分的了解。
Web組件是低級(jí)瀏覽器應(yīng)用程序編程接口，它使開(kāi)發(fā)人員能夠使用新組件擴(kuò)展瀏覽器。此外，Web組件為定義或確定新組件提供了一個(gè)標(biāo)準(zhǔn)接口。
這個(gè)工具對(duì)于當(dāng)前的Web設(shè)計(jì)和開(kāi)發(fā)非常有用，因?yàn)殚_(kāi)發(fā)人員可以利用組件來(lái)容納用戶界面功能。使用Web組件，可以開(kāi)發(fā)利用其他前端框架使用的HTML和DOM API的組件。
這個(gè)實(shí)現(xiàn)很有趣，因?yàn)殚_(kāi)發(fā)人員可以在不失去互操作性的情況下享受開(kāi)發(fā)自己組件的靈活性。一旦構(gòu)建了一個(gè)Web組件，就可以把它應(yīng)用到各種各樣的應(yīng)用程序中，因?yàn)閃eb組件在任何地方都有功能。
開(kāi)發(fā)人員需要理解Web組件的三個(gè)概念：
（1）自定義元素：這些JS API使開(kāi)發(fā)人員能夠構(gòu)建自定義HTML元素。在開(kāi)發(fā)自己的HTML元素時(shí)，可以準(zhǔn)確地規(guī)定它們的行為方式。
（2）Shadow DOM：這是指僅對(duì)開(kāi)發(fā)人員的組件可用的私有DOM。Shadow DOM能夠隔離JS和CSS。
（3）HTML模板：這些HTML標(biāo)簽可以用來(lái)為組件構(gòu)建模板。
IFrames允許開(kāi)發(fā)人員實(shí)現(xiàn)微前端。基本上，IFrames是可以合并到另一個(gè)HTML文檔中的HTML文檔。IFrames之所以受到歡迎，是因?yàn)樗梢院苋菀椎貜莫?dú)立的子頁(yè)面中開(kāi)發(fā)出一個(gè)主頁(yè)。當(dāng)涉及到樣式和全局變量不相互影響時(shí)，IFrames提供了合理的隔離級(jí)別。
盡管IFrames總體上很棒，但它也有一些缺點(diǎn)。IFrames是陳舊的技術(shù)，因此不能提供最好的開(kāi)發(fā)人員和用戶體驗(yàn)。使用它們會(huì)帶來(lái)影響頁(yè)面響應(yīng)性的某些困難。然而，IFrames可以用來(lái)開(kāi)發(fā)微前端。
IFrames的一個(gè)主要優(yōu)勢(shì)是它們能夠在微前端之間提供獨(dú)立性和良好的隔離級(jí)別。這使開(kāi)發(fā)人員能夠充分利用微前端架構(gòu)的優(yōu)勢(shì)。另一方面，它們使微前端彼此集成變得困難。此外，IFrames缺乏靈活性，難以鏈接和路由。
微前端是一種新的前端架構(gòu)，它解決了傳統(tǒng)的單體前端架構(gòu)帶來(lái)的一些主要問(wèn)題。以下了解微前端的優(yōu)點(diǎn)和缺點(diǎn)。
（1）漸進(jìn)式升級(jí)：向大型、陳舊、單一的前端應(yīng)用添加新功能既麻煩又困難。使用微前端，開(kāi)發(fā)人員的團(tuán)隊(duì)可以通過(guò)將應(yīng)用分解成不同的部分來(lái)快速升級(jí)并提供新功能。與其將前端架構(gòu)作為單個(gè)應(yīng)用程序來(lái)處理，不如將應(yīng)用程序的不同部分分別處理，并分別交付新功能。
這種方法使團(tuán)隊(duì)能夠?qū)σ蕾図?xiàng)、用戶體驗(yàn)、加載速度、體系結(jié)構(gòu)等應(yīng)用增量升級(jí)。開(kāi)發(fā)團(tuán)隊(duì)可以簡(jiǎn)化他們的工作，專注于產(chǎn)品的特定部分。這為新技術(shù)的全面決策和高質(zhì)量實(shí)施創(chuàng)造了一個(gè)平臺(tái)，而不是必須接近一個(gè)龐大而繁瑣的前端應(yīng)用程序。
（2）簡(jiǎn)單的代碼庫(kù)：開(kāi)發(fā)人員面臨的挑戰(zhàn)之一是復(fù)雜的代碼庫(kù)。處理復(fù)雜的代碼庫(kù)本身就是開(kāi)發(fā)人員的一項(xiàng)工作，因?yàn)樾枰裢庑⌒模员苊饣煜ｉ_(kāi)發(fā)人員可以用一個(gè)微前端把這些都放在過(guò)去。這種新方法將事情分解成不同的、更小的代碼庫(kù)，從而為開(kāi)發(fā)人員提供所需的簡(jiǎn)單性和最佳的清晰度。
在默認(rèn)情況下，每個(gè)前端應(yīng)用程序的代碼將比單體代碼更小。因此，它更容易使用。除了提供整潔的代碼庫(kù)之外，還在組件之間設(shè)置了適當(dāng)?shù)倪吔纭Ｒ虼耍_(kāi)發(fā)人員在試圖修復(fù)錯(cuò)誤或更改代碼時(shí)不太可能感到困惑或沮喪。
（3）獨(dú)立部署：微前端支持獨(dú)立部署。由于存在獨(dú)立構(gòu)建的多個(gè)前端應(yīng)用程序，可以單獨(dú)部署每個(gè)應(yīng)用程序。無(wú)論代碼駐留或托管在哪里，每個(gè)微前端都應(yīng)該有一個(gè)開(kāi)發(fā)管道，使開(kāi)發(fā)人員能夠構(gòu)建、測(cè)試和部署。
獨(dú)立部署的能力使開(kāi)發(fā)人員能夠更快地發(fā)布特性。例如，當(dāng)使用單體前端應(yīng)用程序時(shí)，必須等到完成應(yīng)用更改后才能部署。使用微前端方法，產(chǎn)品的單獨(dú)部分不會(huì)阻止開(kāi)發(fā)人員部署已準(zhǔn)備好的部分。
（4）自治團(tuán)隊(duì)：微前端的模塊化允許專注于產(chǎn)品的特定部分。如果有一個(gè)較大的團(tuán)隊(duì)，可以通過(guò)將團(tuán)隊(duì)分成小組來(lái)提高效率。每組開(kāi)發(fā)人員將負(fù)責(zé)產(chǎn)品的給定部分，從而提高關(guān)注度，使工程師能夠以最高效率構(gòu)建特定功能。
除了鼓勵(lì)專業(yè)化和提高交付代碼的質(zhì)量之外，團(tuán)隊(duì)管理和協(xié)作也得到了加強(qiáng)。此外，當(dāng)團(tuán)隊(duì)規(guī)模較小時(shí)，更容易知道誰(shuí)在做什么。
開(kāi)發(fā)團(tuán)隊(duì)負(fù)責(zé)人還會(huì)發(fā)現(xiàn)，與規(guī)模更大的團(tuán)隊(duì)相比，任務(wù)分配和監(jiān)控變得更加容易。總的來(lái)說(shuō)，自主的小團(tuán)隊(duì)創(chuàng)造了一個(gè)促進(jìn)協(xié)作和技能轉(zhuǎn)移的舒適空間。
（5）技術(shù)不可知論：微前端允許開(kāi)發(fā)人員將每個(gè)應(yīng)用程序作為一個(gè)模塊進(jìn)行維護(hù)，并將它們與其他模塊分開(kāi)。因此，可以使用不同的技術(shù)、框架或庫(kù)來(lái)開(kāi)發(fā)每個(gè)應(yīng)用程序。多樣化開(kāi)發(fā)技術(shù)或框架的能力允許開(kāi)發(fā)人員使用最好的工具構(gòu)建健壯的產(chǎn)品。
產(chǎn)品的每個(gè)部分都是不同的，構(gòu)建它們所需的工具也是不同的。微前端不再局限于一組給定的框架，而是為開(kāi)發(fā)人員提供了自由探索與每個(gè)模塊相關(guān)的開(kāi)發(fā)工具的靈活性。
（1）更大的下載大小：重復(fù)的依賴關(guān)系是微前端導(dǎo)致更大的下載大小的原因。考慮到每個(gè)應(yīng)用程序都是用React構(gòu)建的，當(dāng)訪問(wèn)者想要加載頁(yè)面時(shí)，每個(gè)應(yīng)用程序都必須下載依賴項(xiàng)，從而導(dǎo)致更高的下載大小。
例如，微前端React是這樣發(fā)生的：用戶在從一個(gè)頁(yè)面移動(dòng)到另一個(gè)頁(yè)面時(shí)，必須不止一次(多次)下載React——假設(shè)每個(gè)微前端都有一個(gè)React副本。這個(gè)主要的架構(gòu)概念可能會(huì)顯著影響加載時(shí)間，影響用戶體驗(yàn)和轉(zhuǎn)化率。
但是，在初始的快速加載速度下，單個(gè)頁(yè)面仍然可以加載得更快。也就是說(shuō)，后續(xù)的導(dǎo)航將會(huì)變慢，因?yàn)楫?dāng)用戶從一個(gè)頁(yè)面移動(dòng)到另一個(gè)頁(yè)面時(shí)，必須重新加載相同的依賴項(xiàng)。
（2）環(huán)境差異：如果開(kāi)發(fā)容器與生產(chǎn)容器不同，可能會(huì)造成災(zāi)難性后果。微前端架構(gòu)使開(kāi)發(fā)人員能夠創(chuàng)建獨(dú)立的前端應(yīng)用程序，而不會(huì)受到其他開(kāi)發(fā)團(tuán)隊(duì)正在構(gòu)建的微前端的阻礙。這種去中心化的方法使開(kāi)發(fā)更快、更容易。
然而，在不同于生產(chǎn)環(huán)境的環(huán)境中進(jìn)行開(kāi)發(fā)會(huì)帶來(lái)一個(gè)嚴(yán)重的問(wèn)題。如果開(kāi)發(fā)時(shí)間容器與生產(chǎn)容器不同，則微前端在部署到生產(chǎn)環(huán)境后將被破壞或表現(xiàn)不同。這個(gè)問(wèn)題的一個(gè)關(guān)鍵敏感部分是全局樣式，它可能是容器或其他微前端的一部分。
其補(bǔ)救過(guò)程很簡(jiǎn)單。當(dāng)在行為與生產(chǎn)環(huán)境不同的環(huán)境中進(jìn)行本地構(gòu)建時(shí)，建議定期將微前端集成并部署到類似生產(chǎn)的環(huán)境中。
此外，應(yīng)該定期進(jìn)行適當(dāng)?shù)臏y(cè)試，以確保及時(shí)發(fā)現(xiàn)和修復(fù)集成問(wèn)題。這將顯著地減少這種潛在的權(quán)衡。開(kāi)發(fā)人員需要為其打算使用微前端執(zhí)行的每個(gè)項(xiàng)目評(píng)估集成挑戰(zhàn)的風(fēng)險(xiǎn)。
（3）管理復(fù)雜性：微前端分散方法通常會(huì)導(dǎo)致難以管理的小團(tuán)隊(duì)和資源的復(fù)雜范圍。微前端需要處理更多的事情。根據(jù)項(xiàng)目的大小，將會(huì)有更多的存儲(chǔ)庫(kù)、工具、開(kāi)發(fā)管道、服務(wù)器、域等等。
鑒于上述情況，在采用去中心化開(kāi)發(fā)架構(gòu)之前，最好考慮一下處理它所帶來(lái)的責(zé)任。開(kāi)發(fā)人員需要有足夠的自動(dòng)化，才能提供和應(yīng)對(duì)資源的激增。
當(dāng)涉及到管理開(kāi)發(fā)過(guò)程時(shí)，使用微前端意味著有關(guān)工具和編碼最佳實(shí)踐的決策將更加分散，并且將不在中央管理的控制之下。調(diào)整微前端需要用戶適應(yīng)對(duì)重要決策過(guò)程控制較少的情況。
（4）合規(guī)性問(wèn)題：在許多獨(dú)立的前端代碼庫(kù)之間保持一致性是很困難的。它需要優(yōu)秀的領(lǐng)導(dǎo)來(lái)確保質(zhì)量、一致性和治理在所有團(tuán)隊(duì)中得到維護(hù)。如果代碼審查和定期監(jiān)督?jīng)]有得到正確執(zhí)行，合規(guī)性問(wèn)題必然會(huì)出現(xiàn)。
現(xiàn)在已經(jīng)介紹了微前端是什么，它是如何工作的，開(kāi)發(fā)方法，優(yōu)點(diǎn)和缺點(diǎn)，現(xiàn)在是學(xué)習(xí)如何用React構(gòu)建微前端的時(shí)候了。
步驟1：創(chuàng)建三個(gè)模塊：主機(jī)、布局和頁(yè)面。
步驟2：從布局組件開(kāi)始
步驟3：創(chuàng)建一些頁(yè)面
步驟4：把所有的構(gòu)成元素放到主機(jī)模塊中
步驟5：運(yùn)行這三個(gè)應(yīng)用程序，并在瀏覽器上分別試用。
在示例中，將使用一個(gè)食譜網(wǎng)站。覺(jué)得Click and Cook這個(gè)名字很酷嗎?
當(dāng)教如何構(gòu)建微前端時(shí)，將在create-mf-app的幫助下使用Webpack的模塊聯(lián)邦，以加快速度。
步驟1：創(chuàng)建三個(gè)模塊：主機(jī)、布局和頁(yè)面。
（1）為項(xiàng)目創(chuàng)建目錄并進(jìn)入該目錄。
Mkdir micro-front -example && cd micro-front -example（2）創(chuàng)建主機(jī)模塊。
（3）創(chuàng)建布局模塊。
（4）最后，創(chuàng)建頁(yè)面模塊。
步驟2：從布局組件開(kāi)始(那些在所有頁(yè)面上共享的組件)。注：將使用Tailwind給組件一些風(fēng)格。
（1）創(chuàng)建Header組件。代碼如下：
（2）創(chuàng)建Footer組件。代碼如下：
（3）在webpack.config.js文件中公開(kāi)這兩個(gè)組件。
步驟3：現(xiàn)在創(chuàng)建一些頁(yè)面
（1）需要一些路由，所以從在所有模塊上安裝React路由器開(kāi)始。
npm install react-router-dom（2）接下來(lái)，向JS/JSON文件中添加一些固定的食譜。
（3）現(xiàn)在，創(chuàng)建一個(gè)頁(yè)面來(lái)列出所有食譜。
（4）創(chuàng)建一個(gè)頁(yè)面來(lái)顯示單個(gè)配方的詳細(xì)信息。
（5）在webpack配置文件中顯示這兩個(gè)組件。
步驟4：把所有構(gòu)成元素放在Host模塊中。
（1）在主機(jī)模塊的webpack.config.js文件中添加Pages和Layout模塊。
（2）在將組件和路由添加到App.tsx中。
步驟5：運(yùn)行這三個(gè)應(yīng)用程序，并在瀏覽器上分別試用。
注：要查看完整的示例，請(qǐng)?jiān)L問(wèn)GitHub。
微前端無(wú)疑是一種革命性的架構(gòu)，它解決了一些與單體前端應(yīng)用相關(guān)的問(wèn)題。使用微前端，開(kāi)發(fā)人員可以享受快速的開(kāi)發(fā)過(guò)程、改進(jìn)的效率、增量升級(jí)、簡(jiǎn)單的代碼庫(kù)、獨(dú)立部署、自治團(tuán)隊(duì)等等。
在采用微前端架構(gòu)之前，需要確保考慮自動(dòng)化需求、操作和治理復(fù)雜性、質(zhì)量、一致性和其他重要因素。
原文標(biāo)題：Micro-frontends Using React: The Complete Guide，作者：Alfonso Valdes
本文鏈接：http://www.tebozhan.com/showinfo-26-54157-0.html使用React微前端的完整指南
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： LangChain應(yīng)用開(kāi)發(fā)指南-熟用LCEL語(yǔ)法掌握Chain的精髓
下一篇： Spring Boot 定時(shí)調(diào)度任務(wù)高級(jí)篇：調(diào)度任務(wù)的實(shí)現(xiàn)原理
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)