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

微前端的价值

阿里云提供的很多商业化产品和服务,本质上是对外提供「能力」,普惠中小企业。目前,能力输出主要是通过 OpenAPI,用以集成到企业自己的业务场景中,这里主要解决的还是企业底层的能力问题——无需雇佣算法工程师,就可以拥有语音、图像识别等能力。安全也是一样,不需要找安全专家,普通的工程师就可以通过控制台高效地处理各种安全事件。

但是,随着云技术不断的下沉,与产业结合的越来越紧密,OpenAPI 唯有把粒度做得越来越细,才能满足各种各样的业务场景,但同时企业侧的学习成本和开发复杂度自然就上去了。控制台做为管(理)控(制)这些能力的工具,目前也只能算是「标品」,必须为了满足不同体量、不同业务特点的需求,灵活地组合和部署,就像是用户自己开发的一样。

综上所述,微前端的价值有 3 点:

  1. 解决产品侧的扩展性和组合性。化整为零,自由组合。

  2. 解决能力输出的「最后一公里」。

  3. 云生态中的「新物种」 — 微应用。

如果微前端只存在工程上的价值,那它是不值得大张旗鼓去做的。

我认为,前端团队需要在这个方面做出业务价值。如果你问我 Ant Design 有什么技术价值?它的价值就是有大量的企业在用,形成某种能力依赖,不需要找设计师或者多么资深的前端工程师,就可以做出看上去很专业的后台界面。

在这条价值链路上,OpenAPI 太底层,控制台不灵活,UI 库太通用。其中的空白点是绑定能力的商业化组件。举个例子,企业的后台管理页上,可以直接 inside 一个「漏洞管理」的微前端应用,和一个 DataV 的微前端应用展示数据,只需要简单配一下即可,不用开发,就能做到“就像自己开发的一样”。反过来也一样,ISV 在阿里云的产品平台上,不仅可以通过小程序的形式,也可以通过微前端应用的形式输入自己的服务。

微前端的问题域

简单地说,搞微前端目的就是要将产品原子化(跟原子化的 OpenAPI 一个道理),再根据客户业务场景组合。每个功能模块能单独迭代,自由集成当然好,但维护成本怎么控制。怎么调试、公共组件版本控制、众多同窗微应用之间怎么“和谐相处”等等。微前端并非只是解决在页面上异步加载一个模块就完事了,更多的是将改造引发的一系列问题需要通过体系化的方案解决,否则就变成反生产力工具。

目前,阿里的微前端方案有 qiankun(乾坤)、Magix、icestack、以及内部很多的微前端解决方案。或多或少都带有一些自身的业务特色,没有明确提出标准,或者明确定义微前端的技术体系到底包含哪些内容。这方面有项目落地的团队真应该再进一步瞄准更高的价值点做,同时广泛交流,这样才能更快得出标准化的东西。我们团队也在实践中,这里我抛出一些开放性问题讨论。

首先必须明确微前端不是框架、不是工具/库,而是一套架构体系,它包括若干库、工具、中心化治理平台以及相关配套设施

微前端包括 3 部分:

  • 微前端的基础设施。这是目前讨论得最多的,一个微应用如何通过一个组件基座加载进来、脚手架工具、怎么单独构建和部署、怎么联调。

  • 微前端配置中心:标准化的配置文件格式,支持灰度、回滚、红蓝、A/B 等发布策略。

  • 微前端的可观察性工具:对于任何分布式特点的架构,线上/线下治理都很重要。

微前端具体要解决好的 10 个问题:

  1. 微应用的注册、异步加载和生命周期管理;

  2. 微应用之间、主从之间的消息机制;

  3. 微应用之间的安全隔离措施;

  4. 微应用的框架无关、版本无关;

  5. 微应用之间、主从之间的公共依赖的库、业务逻辑(utils)以及版本怎么管理;

  6. 微应用独立调试、和主应用联调的方式,快速定位报错(发射问题);

  7. 微应用的发布流程;

  8. 微应用打包优化问题;

  9. 微应用专有云场景的出包方案;

  10. 渐进式升级:用微应用方案平滑重构老项目。

通过问题理解问题是一种思考方式,相信大家能沟通通过微前端三大组成部分和它要解决的 10 个问题,能够有一个大概的理解。下面,看一下我归纳的微前端的架构体系(如图):

通过上图,很明显的看出前后端分工,以及线上微应用相关配置流程。整体运行环境以及开发流程是非常复杂的,留到大会的时候再详细讲解。

微前端的基本原理

如下图所示,微前端的工程化是从传统前端工程化体系升级上来的。

比如构建,增加微应用类型的项目构建,有动态的打包策略。传统项目管理工具通常是命令行工具,包括构建、发布、测试,会升级为项目工作台,通过 Web 界面管理项目。一个项目包括哪些微应用,版本,发布策略等在配置中心统一管理。一个大型应用被「碎片化」后,还要能做到「一目了然」。哪个模块报错,加载失败等异常发生第一时间反应在配置中心里。

下面的原型图,就是一个最基本的配置中心的样貌。微前端体系要可控、可观察

通过多个微应用的组合,能够在变化如此复杂的需求中,更好的更快的赋能业务。

云时代的前端开发模式

前端开发从 PC 时代到移动时代,从刀耕火种的原始运维到云计算时代,回顾起来,我们会发现——开发模式跟时代背景真是密不可分。前端奋斗 20 年才把页面写好,而现在又变成「切页面」了,只是此「切」非彼「切」。云时代的开发模式注定是「碎片化」的,开发是面向模块的,而页面只是一种组合场景,一种运行时容器。

我想,未来的产品开发主要时间是在「编排」——编排服务、编排逻辑、编排组件、编排访问策略、编排流程。到了云时代,一家企业只要招几个前端工程师就可以了,兼顾开发和运维、资产全部上云,运维任务通过控制台就能完成。开发借助 Serverless 和编排工具就能实现无服务端。在未来,无论是前端工程师还是全栈工程师,都将不复存在,应该叫端到端(F2E -> E2E)工程师了。

D2 微前端专场

本届 D2 微前端专场将邀请在微前端领域具有丰富实践的工程师,一起来为大家分享他们的理解和思考,希望能让大家对微前端有更加清晰的认识。


关注「Alibaba F2E」

把握阿里巴巴前端新动向

乾坤 微前端_拥抱云时代的前端开发架构——微前端相关推荐

  1. 华为云高级测试专家马海谈《云时代如何更高效测试微服务性能》

    马海:大家好,我叫马海,来自于杭州华为研究所,我目前任职于华为云cloudBU,主要负责云性能测试服务CPTS的开发与测试工作.非常荣幸今天能够来到北京参加这次的云测峰会,也很高兴能和这么多同行一起共 ...

  2. k8s挂载目录_拥抱云原生,如何将开源项目用k8s部署?

    k8s以及云原生相关概念近年来一直比较火热,阿丸最近搞了个相关项目,小结一下. 本文将重点分享阿里开源项目otter适配k8s部署的改造过程,其中的改造过程和技巧应该适用于将大多数开源项目改造到k8s ...

  3. 赛伯特机器人_拥抱智能时代 赛佰特科技心系民族产业发展

    [中国智能制造网 展会报道]2017年7月5日,为期4天的"SIAS2017上海国际工业自动化展览会"在国家会展中心(上海)盛大开幕.致力于工业机器人.物联网平台以及自动化设备研发 ...

  4. 物联网云平台设计与开发: 实验1 前端环境搭建与开发

    目录 实验目的 实验内容 具体实验步骤 第一步:Node.js安装及环境配置 第二步:环境变量配置. 第三步:全局安装webpack 第四步:vue-cli 脚手架构建工具 第五步:将工程导入Visu ...

  5. idea新建springboot后端到前端_码云开源项目:利用SpringBoot+Vue 实现留言版

    一.新建Vue项目和SpringBoot项目 新建Vue项目 新建文件夹SpringBoot-Vue-MessageBoard创建Vue项目使用vue ui命令(需要vue 3.0选择刚才的目录 名字 ...

  6. 飘飘微课计算机百度云,数学微课_百度云资源_盘多多如风搜_盘搜搜_哎哟喂啊...

    2010-2021 技术支持:SAP 联系我们:  手机版 本站仅提供盘多多如风搜和盘搜搜以及小说网笔趣阁的资源搜索服务,不存放任何实质内容.如有侵权内容请联系百度云盘或新浪微盘,源资源删除后本站的链 ...

  7. nodejs 调用微服务器_无服务器NodeJS:构建下一个微服务的快速,廉价方法

    nodejs 调用微服务器 by Filipe Tavares 由Filipe Tavares 无服务器NodeJS:构建下一个微服务的快速,廉价方法 (Serverless NodeJS: the ...

  8. 微擎跳过云平台_2018年10月微擎安装之阿里云懒人教程篇

    目录服务器购买(阿里云篇Centos7.0 其他系统请勿参照) 域名的购买备案 安全组设置(懒人规则包直接导入即可) 安装宝塔面板 安装微擎 去注册微擎账号 摘要:本文由根据自己自身经验所撰写,著作权 ...

  9. spring cloud微服务_年后进大厂,必备这份微服务面试题:Dubbo+SpringBoot+Cloud

    Dubbo面试题 Dubbo与DubboX区别 Dubbo中zookeeper做注册中心,如果注册中心集群都挂掉,发布者和订阅者之间还能通信么? Dubbo中有哪些角色? Dubbo在安全机制方面是如 ...

最新文章

  1. C语言指针数组,遍历查询!_只愿与一人十指紧扣_新浪博客
  2. iis日志转到sql存储
  3. Dijkstra算法的思想和数学归纳法
  4. sql group by having用法_神奇的 SQL,Group By 真扎心,原来是这样!
  5. 网络基础之 Nping 命令
  6. php中implode()和explode()的应用
  7. 运用xlib进行事件响应(X11 API)的小例子
  8. 省钱小贴士(ECS):教你如何每年省出8w+ 块
  9. android中requestFocus 以及与setFocusable的区别
  10. Linux系统各文件、目录介绍
  11. 在阿里云容器服务上创建一个使用Redis的Python应用
  12. 计算机与科学概论考试重点,计算机科学概论重点
  13. 算法精解----快速排序(方式1)
  14. wav转换mp3简单图文教程
  15. 【渝粤题库】陕西师范大学191201 刑法专论 作业
  16. shecodject生成免杀木马,一步过360、火绒
  17. c语言狐狸捉兔子问题
  18. 动态二维码刷卡触摸按键门禁一体机性能与选型攻略
  19. Powershell运行脚本异常:无法加载文件...因为在此系统上禁止运行脚本
  20. EDM系统看板多邮件模板邮箱配置地址簿​EDM营销推送邮件系统开发

热门文章

  1. 数据仓库之电商数仓-- 4、可视化报表Superset
  2. abap 优化之ST05
  3. 使用Python配合Evernote完成每周工作安排
  4. Scala in depth 6 Scala的类型系统 中
  5. C# 实现酒店房态图
  6. Oracle goldengate通用配置
  7. 信息学奥赛一本通(1245:不重复地输出数)
  8. 信息学奥赛一本通(1397:简单算术表达式求值)
  9. The table(CF-226D)
  10. Small Multiple(AtCoder-3621)