什么是微前端

引言

微服务架构使我们能够编写可扩展且敏捷的后端系统。编写独立的,独立的服务使我们能够灵活地快速添加新功能或轻松更改现有功能,而不会影响整个系统。可独立部署的服务还使我们能够根据需求扩展服务。

在前端应用程序中使用类似的方法。前端微服务化,将单片式Web应用分解为多个微前端的策略。

什么是微前端架构?

微型前端架构是一种将Web应用程序开发为小型前端应用程序的方法。该应用程序没有编写大型的整体式前端应用程序,而是细分为特定于域的微前端,这些前端是独立的,可以独立开发和部署。

使用微型前端有什么优势?

微前端将微服务的概念和好处带到了前端应用程序中。每个微型前端都是独立的,因此可以更快地交付,因为多个团队可以在应用程序的不同部分上工作而不会互相影响。这也使每个团队可以自由选择所需的不同技术。由于微前端高度解耦,因此它们对应用程序其他部分的影响较小,可以独立进行增强和部署。

微前端架构设计时有什么注意事项?

1. 单一责任

首先要考虑的是如何将一个应用程序拆分为多个较小的应用程序,以便可以独立开发和部署每个应用程序。当团队在不同的微型前端上工作时,我们希望这些应用程序高度分离,以使一个应用程序中的更改不会影响其他应用程序。

这可以通过构建具有单一职责和定义明确的有界上下文的特定于领域的微前端来实现。就像我们的代码一样,我们希望我们的微前端具有高内聚性和低耦合性,即所有相关的代码应该彼此靠近,并且对其他模块的依赖性较小。

如果以在线购物网站为例,我们希望在产品微前端中包含所有与产品相关的UI组件,并在订单微前端中获得所有与订单相关的功能。假设我们有一个用户仪表板屏幕,用户可以在其中查看来自不同域的信息,他们可以查看待处理的订单以及特价产品。建议不要将待处理的订单UI组件作为订单微前端的一部分,而将与产品相关的组件作为产品微前端的一部分,而不是创建一个仪表板微前端。这将使我们能够垂直拆分系统,并具有特定于域的前端和后端服务。

2. 通讯和数据交换的通用接口

为了使微前端作为单个Web应用程序和谐地工作,它们需要一种通用且一致的方式来相互通信。即使他们是高度独立的,他们仍然需要互相交谈。常见方法之一是拥有一个可用作集成层的应用程序。该应用程序可以充当容器来呈现不同的微前端,并促进它们之间的通信。

例如,在我们的在线购物网站中,一旦用户通过购物车微型前端提交了订单,我们就希望将该用户带到他们的订单列表屏幕。由于订单和购物车微型前端之间的耦合程度很高,并且彼此之间并不了解,因此我们可以将容器应用程序用作业务流程层。

在从购物车微型前端接收到订单提交事件后,容器应用程序会将用户导航到订单微型前端。容器应用程序还可用于处理跨领域问题,例如用户会话管理,分析等。

此方法与现有的一体式前端很好地结合使用,其中现有的一体式应用程序可以用作容器,并且任何新功能都可以独立开发为微型前端,并且可以集成到现有的应用程序中。还可以根据需要提取现有功能并将其重写为微前端。

3. 外观一致

尽管我们的用户界面被划分为多个微型前端,但我们仍然希望我们的用户感觉好像他们正在与单个应用程序进行交互。我们希望我们的应用具有一致的外观和风格,以及能够在多个应用之间轻松更改UI的功能。例如,我们应该能够在多个微前端中更改字体或原色。这可以通过共享CSS和资源(例如图像,字体,图标等)来完成。

我们还希望应用程序使用相同的UI组件,例如,如果我们在多个屏幕上都有日期选择器,则我们希望所有日期选择器看起来都一样。这可以通过创建UI组件的公共库来实现,该库可以由微前端共享。使用共享资产和UI组件库将使我们能够轻松进行更改,而不必更新多个微型前端。

在本文中,我们讨论了微前端,它们的好处以及在迁移到微前端架构之前要考虑的事项。为了提供更快的速度,我们希望能够独立构建,测试和部署功能,而这可以通过使用微前端和微服务来实现。实施微型前端可能会面临自身的挑战,将有技术上的障碍需要克服,但好处多于复杂性。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容

  • 作为前端开发人员,这些年来你一直在开发单体应用,即使你已经知道这是一个不好的做法。 您将代码划分为组件,使用req...
    编程小世界阅读 7,543评论 0 3
  • 翻开铺天盖地的旅游广告,最引人注目,咨询最多的,仍然是饱受争议的低价旅游团。 什么“399元游香港”、“1599元...
    D姑娘说阅读 889评论 0 2
  • 【参考攻略】 “意”惹情牵,沐浴在艳阳下的旧时光,意大利旅游攻略 - 马蜂窝 【景点】 【有关意大利】 领土包围着...
    i期待阅读 439评论 0 0
  • 摘: 估计所有的人都有“因为错过而懊恼”的经历。 其实用错过并不准确,很多时候是我们主动放弃了。 因为感觉这事和自...
    新生cxq阅读 101评论 0 1