我總是想知道大型Web應(yīng)用程序是如何建造的!我發(fā)現(xiàn)了秘密的秘密，它成為我的激情。經(jīng)歷在規(guī)模上使用微型前端的優(yōu)勢(shì)和痛苦后，我決定記錄這段旅程并分享一些“最佳實(shí)踐”。

這是在設(shè)計(jì)遵循微前端模式的應(yīng)用程序時(shí)的最佳實(shí)踐的自由練習(xí)列表。應(yīng)檢查每個(gè)“規(guī)則”，其福利/缺陷針對(duì)您的特定用例評(píng)估。

[[393246]]

微前端之間的零耦合

為了實(shí)現(xiàn)這種架構(gòu)的好處，應(yīng)盡可能避免意外耦合;這將解鎖微前端模式必須提供的靈活性和可擴(kuò)展性以及通過(guò)允許占用申請(qǐng)部分的升級(jí)或?qū)?lái)的完整重寫(xiě)來(lái)替換您的應(yīng)用程序的未來(lái)證明。

每個(gè)微前端應(yīng)該能夠在隔離或容器應(yīng)用中呈現(xiàn)。所需的數(shù)據(jù)應(yīng)由每個(gè)微前端加載并避免數(shù)據(jù)瀑布。

做✅：

• 可以在不影響其他微前端的情況下交換的共享庫(kù)。
• 加載所需的所有數(shù)據(jù)呈現(xiàn)。

不要❌：

• 在不同的微前端具有集中存儲(chǔ)/共享數(shù)據(jù)。
• 共享積極開(kāi)發(fā)的庫(kù)。

單獨(dú)的代碼基礎(chǔ)

每個(gè)微前端都應(yīng)具有自己的代碼庫(kù)，并且選擇的版本控制不應(yīng)對(duì)項(xiàng)目開(kāi)發(fā)或部署的方式產(chǎn)生任何影響。在單一的單一或單獨(dú)的存儲(chǔ)庫(kù)下?lián)碛兴许?xiàng)目都很好。

做✅：

• 使用單一代碼倉(cāng) monorepos。
• 使用單個(gè) repos。

每個(gè)微前端應(yīng)獨(dú)立部署

每個(gè)微型前端都有它自己的CI / CD管道，并且能夠在沒(méi)有其他微前端的任何依賴項(xiàng)的情況下部署到生產(chǎn)。應(yīng)該避免的常見(jiàn)的反模式是“地獄的部署隊(duì)列”，其中不同的微前端如此緊密地耦合，它們需要以特定順序部署，以避免打破應(yīng)用程序。

做✅：

• 具有單獨(dú)的CI / CD管道。
• 按需發(fā)布。

不要❌：

• 有發(fā)布時(shí)間表。
• 具有允許以前版本的增量/順序部署。

微前端應(yīng)獨(dú)立測(cè)試

因?yàn)樾枰獑为?dú)的微前端以及容器應(yīng)用程序內(nèi)部呈現(xiàn)，因此還可以使用單位和整個(gè)方案的集成測(cè)試測(cè)試它們是有意義的。

做✅：

• 為隔離的每個(gè)微前端渲染具有單位和集成測(cè)試。
• 在容器應(yīng)用程序中運(yùn)行微前端渲染的集成測(cè)試作為端到端測(cè)試的一部分。

微前端應(yīng)該是有版本的

當(dāng)一個(gè)新的微前端被部署到生產(chǎn)時(shí)，不應(yīng)刪除以前的版本，并且應(yīng)該使用語(yǔ)義版本或類似的版本號(hào)標(biāo)記新版本。由容器應(yīng)用程序決定要使用(管理)的特定微前端或始終使用最新版本(Evergreen)的特定版本。

做✅：

• 使用語(yǔ)義版本化。
• 使用特定版本或“最新”。

不要❌：

• 需要全局部署更改版本。
• 刪除以前的版本。

最小的溝通

微前端之間的通信應(yīng)盡可能最小，簡(jiǎn)單，避免盡可能多的全球狀態(tài)和框架特定的解決方案。

如果兩個(gè)或更多的微前端共享大量消息以提供其最小功能，它們可能太緊密耦合，并且它們可以共享類似的足夠的目的，即它們應(yīng)該被認(rèn)為將它們集成到一個(gè)中。

做✅：

• 保持信息小而簡(jiǎn)單。
• 如果可能的話，避免有狀態(tài)和通信框架。

不要❌：

• 股東。
• 有不必要的溝通。

CSS應(yīng)該是范圍

來(lái)自一個(gè)微前端的CSS不應(yīng)影響其它微前端。

做✅：

• 為您的CSS定義范圍。
• 使用CSS-IN-JS或命名法庫(kù)(如CSS模塊)。

不要❌：

• 使用全局CSS。

最終建議書(shū)

做✅：

• 嘗試創(chuàng)建自治團(tuán)隊(duì)。
• 嘗試安排圍繞業(yè)務(wù)功能的微前端。
• 可重用性是一個(gè)很好的“副作用”而不是目標(biāo)。

不要❌：

• 不要強(qiáng)制這種架構(gòu)風(fēng)格，因?yàn)樗?ldquo;新”。
• 您不需要多個(gè)JavaScript框架。
• 您不需要“微前端框架”。
• 微前端不必是“Micro”。

原文鏈接：https://medium.com/swlh/rules-of-micro-frontends-7b96c10dde9