微前端学习

这是我第17篇简书

微前端主要是借鉴后端微服务的概念

微前端的价值

微前端架构具备以下几个核心价值:

  • 技术栈无关 主框架不限制接入应用的技术栈,子应用具备完全自主权
  • 独立开发、独立部署 子应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新
  • 独立运行时 每个子应用之间状态隔离,运行时状态不共享

微前端架构旨在解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用后,随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。


微前端解构图

针对中后台应用的解决方案

中后台应用由于其应用生命周期长(动辄 3+ 年)等特点,最后演变成一个巨石应用的概率往往高于其他类型的 web 应用。而从技术实现角度,微前端架构解决方案大概分为两类场景:

  • 单实例:即同一时刻,只有一个子应用被展示,子应用具备一个完整的应用生命周期。通常基于 url 的变化来做子应用的切换。
  • 多实例:同一时刻可展示多个子应用。通常使用 Web Components 方案来做子应用封装,子应用更像是一个业务组件而不是应用。

推荐方案

看了下蚂蚁的微前端落地实践:
https://github.com/umijs/qiankun
(目前有4千多颗星)
构建出一套全链路的面向中后台场景的产品接入平台,目的是解决不同产品之间集成困难、流程割裂的问题,希望接入平台后的应用,不论使用哪种技术栈,在运行时都可以通过自定义配置,实现不同应用之间页面级别的自由组合,从而生成一个千人千面的个性化控制台。

clone下来后可以看到:


三大主流前端框架都可以一键运行

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



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

推荐学习:《前端架构:从入门到微前端》

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概念 首先我们要明确一个问题,微前端到底是什么。微前端源自于微服务,而微服务的概念出现是为了处理庞大的后端结构的臃...
    无聊_069a阅读 249评论 0 0
  • 在过去的几个星期里,随着 Martin Fowler 博客上那篇 Cam Jackson 写的微前端的文章发布,到...
    ThoughtWorks阅读 1,079评论 0 1
  • 什么是微前端 微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转...
    belllee阅读 23,585评论 0 17
  • 你是否还记得那些年的北方 我们曾经在街边的游荡 多少怀揣梦想的天堂 被大雪埋藏 你说回忆像珍藏已久...
    文艺是件正经事儿丶阅读 296评论 0 1
  • 1.2020年第一天,出差潍坊,在服务客户。感恩谢恩杰老师元旦加班服务客户,感恩崔总邀请,助力德奥年会,感恩德奥汽...
    山东慧恩贺守金阅读 45评论 0 0