微前端是一種前端開(kāi)發(fā)的架構(gòu)方法，已經(jīng)變得越來(lái)越流行，這也預(yù)示著它很可能代表 Web 開(kāi)發(fā)的未來(lái)。所以學(xué)習(xí)這種架構(gòu)帶來(lái)的好處對(duì)你的應(yīng)用程序和開(kāi)發(fā)團(tuán)隊(duì)是不言而喻的。

本文將分享我和我的團(tuán)隊(duì)使用這種方法兩年來(lái)的經(jīng)驗(yàn)所得，以及幫助你分析在你的下一個(gè)項(xiàng)目中采用它的重要理由。

什么是微型前端架構(gòu)？

在過(guò)去的幾年里，IT公司已經(jīng)開(kāi)始將大型軟件分解成更小的、更容易管理的模塊。這種方法背后的想法是擁有許多可以獨(dú)立開(kāi)發(fā)、測(cè)試和部署的服務(wù)。

這就是微服務(wù)架構(gòu)在后臺(tái)開(kāi)發(fā)方面的作用。但同樣的方法也可以應(yīng)用于前端開(kāi)發(fā)，它被命名為微前端架構(gòu)。在 Martin Fowler 的官方網(wǎng)站上，微前端方法被定義為。

一種架構(gòu)風(fēng)格，將可獨(dú)立交付的前端應(yīng)用程序組合成一個(gè)更大的整體

這種前端開(kāi)發(fā)的架構(gòu)方法已經(jīng)變得越來(lái)越流行，因?yàn)閭鹘y(tǒng)的單片式方法存在著眾所周知的隱患。主要是因?yàn)榍岸塑浖鲩L(zhǎng)迅速，而當(dāng)使用單體架構(gòu)時(shí)，一切都變得更加難以維護(hù)。

另一方面，微前端使你有能力實(shí)現(xiàn)一個(gè)不太復(fù)雜和麻煩的架構(gòu)。特別是，由于微前端的方法，你可以將整個(gè)應(yīng)用程序分割成小的、獨(dú)立的部分。然后，它們中的每一個(gè)都可以由不同的前端團(tuán)隊(duì)來(lái)實(shí)現(xiàn)，甚至可以使用不同的技術(shù)。這確保了與后端微服務(wù)架構(gòu)相同的可擴(kuò)展性、靈活性和適應(yīng)性。此外，這種方法允許你在同一個(gè)網(wǎng)頁(yè)上混合使用庫(kù)或不同框架開(kāi)發(fā)的微型前端組件。

所以，微前端現(xiàn)在是IT界的一個(gè)趨勢(shì)，而且這種方法正被越來(lái)越多的人采用。

選擇微前端的5個(gè)好處

使用微前端開(kāi)發(fā)要了解這種前端開(kāi)發(fā)方法的真正優(yōu)勢(shì)是什么。

現(xiàn)在，讓我們來(lái)看看使用它的五個(gè)最相關(guān)的理由，這些理由是我作為一個(gè)使用微前端工作了兩年多的前端開(kāi)發(fā)者的經(jīng)驗(yàn)總結(jié)。

1、讓開(kāi)發(fā)者發(fā)揮最佳狀態(tài)

我工作的團(tuán)隊(duì)由具有不同背景和技能的開(kāi)發(fā)人員組成。有些是 React 的專家，有些更擅長(zhǎng) Vue.js 或 Angular ，有些人喜歡用 JavaScript 編碼，有些人喜歡用TypeScript。

最初，這種現(xiàn)象成為了團(tuán)隊(duì)發(fā)展的一個(gè)障礙。唯一的解決方案是找到共同點(diǎn)，盡管這種選擇會(huì)迫使一些開(kāi)發(fā)人員學(xué)習(xí)新技術(shù)，并失去他們的專業(yè)知識(shí)。因此，我們尋找解決方案，并決定采用微型前端架構(gòu)方法。

得益于此，我們能夠?qū)⒃瓉?lái)的團(tuán)隊(duì)分成多個(gè)團(tuán)隊(duì)，每個(gè)人都能在其中表現(xiàn)自己的最佳狀態(tài)。這是因?yàn)椴煌膱F(tuán)隊(duì)可以根據(jù)他們要處理的業(yè)務(wù)邏輯，在架構(gòu)、測(cè)試和編碼風(fēng)格方面做出最佳決定。另外，這種方法本質(zhì)上導(dǎo)致了代碼和風(fēng)格的隔離，使每個(gè)團(tuán)隊(duì)獨(dú)立于其他團(tuán)隊(duì)。

在最終結(jié)果方面，微前端也是有幫助的。這是我們的團(tuán)隊(duì)在完全接受這種方法后的體會(huì)和結(jié)論。事實(shí)上，有多個(gè)小團(tuán)隊(duì)可以自由使用他們喜歡的技術(shù)，這意味著他們本質(zhì)上受到的限制更少，因此更有動(dòng)力去寫出更高質(zhì)量的代碼。

2、允許采用不同的技術(shù)棧

由于微型前端是由獨(dú)立的小塊組成的，所以每一個(gè)都可以使用不同的技術(shù)棧來(lái)實(shí)現(xiàn)。這是一個(gè)令人難以置信的巨大優(yōu)勢(shì)。首先，因?yàn)槠鹗紙F(tuán)隊(duì)可以根據(jù)特定技術(shù)棧的專長(zhǎng)分成許多小團(tuán)隊(duì)，這也尊重了單一責(zé)任原則。其次，由于許多技術(shù)棧會(huì)在同一個(gè)項(xiàng)目中使用，因此雇用新的開(kāi)發(fā)人員變得更加容易。

此外，微前端的方法實(shí)際上消除了對(duì)某一特定技術(shù)的鎖定現(xiàn)象，至少它大大減少了這一現(xiàn)象。這是因?yàn)槟愕膱F(tuán)隊(duì)可以隨時(shí)決定選擇一個(gè)新的技術(shù)棧，而不必翻譯以前開(kāi)發(fā)的東西。另外，微前端架構(gòu)所包含的每塊內(nèi)容肯定比前端單體要小，把它翻譯成新的技術(shù)會(huì)花費(fèi)更少的時(shí)間。

自從我們的團(tuán)隊(duì)接受了微前端的方法，我們就被激勵(lì)著去嘗試新的技術(shù)、庫(kù)和框架。事實(shí)上，每當(dāng)你必須在你的應(yīng)用程序中嫁接一個(gè)新的部分，你可以決定采用一個(gè)全新的技術(shù)棧。這代表了一個(gè)寶貴的機(jī)會(huì)，可以學(xué)習(xí)如何使用市場(chǎng)上的許多 JavaScript 框架。

3、開(kāi)發(fā)和部署變得更快

通過(guò)采用微前端我們作為一個(gè)團(tuán)隊(duì)的前端開(kāi)發(fā)過(guò)程得到了高度改善。主要原因是，我們現(xiàn)在不再有一個(gè)大的團(tuán)隊(duì)被迫處理不可避免的溝通開(kāi)銷，而是屬于較小的獨(dú)立團(tuán)隊(duì)，同時(shí)處理不同的功能，而不考慮實(shí)施細(xì)節(jié)。

你可以想象，這也代表了在發(fā)布新功能時(shí)的一個(gè)巨大進(jìn)步。主要原因是與大型單片機(jī)軟件相比，構(gòu)建小型微前端更快、更容易。因此，你的部署時(shí)間也會(huì)大大改善。事實(shí)上，每當(dāng)一個(gè)團(tuán)隊(duì)完成了一個(gè)功能的工作，他們就可以在線部署，而不需要等待。

換句話說(shuō)，微型前端應(yīng)用程序是基于獨(dú)立的團(tuán)隊(duì)同時(shí)進(jìn)行獨(dú)立的功能工作。不得不說(shuō)這是一個(gè)實(shí)現(xiàn)更高發(fā)布率的機(jī)會(huì)，特別是隨著小團(tuán)隊(duì)數(shù)量的增加。

4、它使你的網(wǎng)絡(luò)應(yīng)用更易維護(hù)

如果你曾經(jīng)處理過(guò)大型的應(yīng)用程序，你就知道它們很容易變得難以維護(hù)，特別是當(dāng)它們是單體的，而且必然會(huì)越來(lái)越大。而微前端是基于分而治之的方法，這意味著，如果你的網(wǎng)絡(luò)應(yīng)用程序選擇這種架構(gòu)，你可以使每一個(gè)業(yè)務(wù)需求更容易測(cè)試和維護(hù)。

這一點(diǎn)我們的團(tuán)隊(duì)很快就學(xué)會(huì)了。測(cè)試大型單體應(yīng)用是很有挑戰(zhàn)性的，需要大量的時(shí)間，我們都知道這一點(diǎn)。但自從我們采用了微前端的方法，一切都變了。現(xiàn)在每個(gè)團(tuán)隊(duì)負(fù)責(zé)測(cè)試其開(kāi)發(fā)的功能，這些功能遠(yuǎn)遠(yuǎn)小于一個(gè)完整的前端應(yīng)用程序。這就加快了開(kāi)發(fā)的速度。這加快了整個(gè)過(guò)程，使其更容易。因此，現(xiàn)在沒(méi)有人害怕測(cè)試了。而且，每個(gè)獨(dú)立的團(tuán)隊(duì)現(xiàn)在可以自由地采用他們喜歡的測(cè)試工具和技術(shù)。

此外，處理小塊的東西意味著理解正在發(fā)生的事情的流程變得更加實(shí)惠。這導(dǎo)致了建立在許多小部件上的網(wǎng)絡(luò)應(yīng)用程序更加可靠，并且在需要時(shí)容易被維護(hù)。

5、它代表了前端開(kāi)發(fā)的未來(lái)

根據(jù)《2020年微服務(wù)狀況報(bào)告》，24%的開(kāi)發(fā)人員已經(jīng)使用了微前端。這意味著越來(lái)越多的公司正在利用這種方法的力量，預(yù)計(jì)幾個(gè)流行的前端應(yīng)用程序?qū)⒃诓痪玫膶?lái)采用這種方法。換句話說(shuō)，當(dāng)涉及到前端開(kāi)發(fā)時(shí)，微前端可能代表下一步的首選。

我的團(tuán)隊(duì)有機(jī)會(huì)處理這個(gè)問(wèn)題，我毫不懷疑它代表了前端單體開(kāi)發(fā)方法的自然演變。另一方面，它仍然是一個(gè)相對(duì)較新且有些不成熟的技術(shù)，還有很長(zhǎng)的路要走。

與此同時(shí)，Web 應(yīng)用程序也在不斷發(fā)展，但我和我的團(tuán)隊(duì)并不害怕說(shuō)微前端是前端開(kāi)發(fā)的自然演變。

總結(jié)

在這篇文章中，我們根據(jù)我和我的團(tuán)隊(duì)兩年來(lái)在日常工作中積累的經(jīng)驗(yàn)，總結(jié)了采用微前端架構(gòu)方法的五個(gè)最重要的原因。

雖然沒(méi)有后端開(kāi)發(fā)中使用的微服務(wù)架構(gòu)那么流行，但它背后的想法幾乎是一樣的。微前端架構(gòu)現(xiàn)在成為趨勢(shì)并不奇怪，它可能代表了前端開(kāi)發(fā)的自然演變。這也是為什么了解它是不可缺少的，學(xué)習(xí)現(xiàn)在采用它的主要原因就是這篇文章的目的。

原文標(biāo)題：??5 Reasons You Should Adopt a Micro Frontend Architecture??

原作者：Antonello Zanin