微前端架构

从技术实践上,微前端架构可以采用以下几种方式进行:

(1)路由分发式。通过HTTP服务器的反向代理功能,将请求路由到对应的应用上。

(2)前端微服务化。在不同的框架之上设计通信和加载机制,以在一个页面内加载对应的应用。

(3)微应用。通过软件工程的方式,在部署构建环境中,把多个独立的应用组合成一个单体应用。

(4)微件化。开发一个新的构建系统,将部分业务功能构建成一个独立的chunk代码,使用时只需要远程加载即可。

(5)前端容器化。将iframe作为容器来容纳其他前端应用。

(6)应用组件化。借助于Web Components技术,来构建跨框架的前端应用。


具体详细解释如下:

(1)路由分发式

路由分发式微前端,即通过路由将不同的业务分发到不同的独立前端应用上。其通常可以通过HTTP服务器的反向代理来实现,或者通过应用框架自带的路由来解决,如下图所示:

1.png

就当前而言,路由分发式的架构应该是采用得最多、最容易的“微前端”方案。但是这种方式看上去更像是多个前端应用的聚合,即我们只是将这些不同的前端应用拼凑到一起,使他们看起来像一个完整的整体。但它们并非是一个整体,每当用户从A应用转换到B应用的时候,往往需要刷新一下页面、重新加载资源文件。

在这个架构中,我们只需要关注应用间的数据传递方式。

缺点:在采用这种应用时,缺少了对应用状态的处理,需要用户重新登录,这种体验对用户来说相当不友好

(2)前端微服务化

前端微服务化,是微服务架构在前端的实施,每个前端应用都是完全独立(技术栈、开发、部署、构建独立)、自主运行的,最后通过模块化的方式组合出完整的前端应用。如下如所示:


2.png

采用这种方式意味着,一个页面上同时存在两个及以上的前端应用在运行。而路由分发式方案则是,一个页面只有唯一一个应用。

当我们单击指向某个应用的路由时,会加载、运行对应的应用。而原有的一个或多个应用,仍然可以在页面上保持运行的状态。同时,这些应用可以使用不同的技术栈来开发,如页面上可以同时运行React、Angular和Vue框架开发的应用。
我们这样实施的原因是,不论基于Web Components的Angular,还是VirtualDOM的React,都是因为现有的前端框架离不开基本的HTML元素DOM。

因此,我们只需要做到如下两点:

  • 第一点,在页面合适的地方引入或者创建DOM。
  • 第二点,用户操作时,加载对应的应用(触发应用的启动),并能卸载应用。

对于第一点,创建DOM是容易解决的。而第二点,则一点儿也不容易,特别是移除DOM和相应应用的监听。当我们拥有一个不同的技术栈时,我们需要有针对性地设计出一套这样的逻辑。

(3)组合式集成:微应用。

微应用化是指,在开发时应用都是以单一、微小应用的形式存在的,而在运行时,则通过构建系统合并这些应用,并组合成一个新的应用,其架构如下图所示。


3.png

微应用化大都是以软件工程的方式来完成前端应用的开发的,因此又可以称之为组合式集成。
微应用化与前端微服务化类似,在开发时都是独立应用的,在构建时又可以按照需求单独加载。如果以微前端的单独开发、单独部署、运行时聚合的基本思想来看,微应用化就是微前端的一种实践,只是使用微应用化意味着我们只能使用唯一的一种前端框架。大团队通常是不会同时支持多个前端框架的。

(4)微件化

微件(Widget),是一段可以直接嵌入应用上运行的代码,它由开发人员预先编译好,在加载时不需要再做任何修改或编译。而微前端下的微件化则指的是,每个业务团队编写自己的业务代码,并将编译好的代码部署(上传或者放置)到指定的服务器上。在运行时,我们只需要加载相应的业务模块即可。在更新代码的时候,我们只需要更新相应的模块即可。

4.png

(5)前端容器:iframe

iframe作为一个非常“古老”的、人人都觉得普通的技术,却一直很管用。它能有效地将另一个网页/单页面应用嵌入当前页面中,两个页面间的CSS和JavaScript是相互隔离的——除去iframe父子通信部分的代码,它们之间的代码完全不会相互干扰。iframe便相当于创建了一个全新的独立的宿主环境,类似于沙箱隔离,它意味着前端应用之间可以相互独立运行。

当然采用iframe有几个重要的前提:

  • 网站不需要SEO支持。

  • 设计相应的应用管理机制。

  • 缺点
    事件的通信机制?
    dom加载?
    不同的文档流,事件冒泡不穿透,登录态不共享

(6)结合Web Components构建

Web Components是一套不同的技术,允许开发者创建可重用的定制元素(它们的功能封装在代码之外),并且在Web应用中使用它们。
真正在项目上使用Web Components技术,离现在的我们还有些距离,可是结合Web Components来构建前端应用,是一种面向未来演进的架构。


5.png

目前困扰Web Components技术推广的主要因素在于浏览器的支持程度。在Chrome和Opera浏览器上,对Web Components支持良好,而对Safari、IE、Firefox浏览器的支持程度,并不是很理想。有些不兼容的技术,可以引入polyfill来解决,有些则需要浏览器支持。

实施的方式虽然多,但都是依据场景而采用的。在有些场景下,可能没有合适的方式;在有些场景下,则可以同时使用多种方案。


来自书籍<<前端架构:从入门到微前端>>

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