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

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

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

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

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

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

這種前端開發(fā)的架構(gòu)方法已經(jīng)變得越來越流行，因為傳統(tǒng)的單片式方法存在著眾所周知的隱患。主要是因為前端軟件往往增長迅速，而當(dāng)使用單體架構(gòu)時，一切都變得更加難以維護。

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

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

選擇微前端的5個好處

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

我的團隊有機會處理這個問題，我毫不懷疑它代表了前端單體開發(fā)方法的自然演變。另一方面，它仍然是一個相對較新且有些不成熟的技術(shù)，還有很長的路要走。

與此同時，Web 應(yīng)用程序也在不斷發(fā)展，但我和我的團隊并不害怕說微前端是前端開發(fā)的自然演變。

總結(jié)

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

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

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

原作者：Antonello Zanin