未来,仅凭几个前端工程师,就能 hold 住一家企业吗?

阿里妹导读:微前端架构旨在解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增加,从一个普通应用演变成一个巨石应用(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)工程师了。


原文链接
本文为阿里云原创内容,未经允许不得转载。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/517084.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

yarn : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\yarn.ps1,因为在此系统上禁止运行脚本

文章目录1. 现象2. 授权安全策略3. 重新执行命令1. 现象 2. 授权安全策略 若要在本地计算机上运行您编写的未签名脚本和来自其他用户的签名脚本,请使用以下命令将计算机上的 执行策略更改为 RemoteSigned 执行: set-ExecutionPolicy RemoteSigned查看执…

央视315曝光SDK事件,应用开发者如何避坑?

7月16日晚,央视315晚会拉开大幕,再次敲响了消费领域的警钟。据央视报道,上海市消费者权益保护委员会委托第三方对市场上的App进行检测,发现某些第三方开发的SDK包存在违规收集用户个人信息的情况。日前,工信部已要求严…

VS Code 切换大小写

默认是空的,我设置的快捷键是 shift altd 转换为大写 shift altx 转换为小写

携程实时智能检测平台建设实践

本次演讲将为大家介绍携程实时智能异常检测平台——Prophet。到目前为止,Prophet基本覆盖了携程所有业务线,监控指标的数量达到10K,覆盖了携程所有订单、支付等重要的业务指标。Prophet将时间序列的数据作为数据输入,以监控平台作…

VS Code 设置好看的字体:Operator Mono

文章目录一、字体资源地址1. 链接2. 资源下载二、效果图2.1. JS 代码效果2.2. CSS 文件效果2.3. HTML 文件效果三、安装字体3.1. 字体列表3.3. 安装方式3.3. VSCode 配置一、字体资源地址 1. 链接 FiraCode 和 Operator Mono 字体下载地址 2. 资源下载 Git下载 git clone …

钟南山团队携手腾讯研发新冠重症AI预测 成果登上Nature子刊

钟南山院士团队与腾讯AI Lab日前披露了利用AI预测COVID-19患者病情发展至危重概率的研究成果,可分别预测5天、10天和30天内病情危重的概率,有助合理地为病人进行早期分诊。这项研究已在2020年7月15日发布于国际顶级期刊《Nature》子刊《Nature Communica…

CentOs搭建svn

安装SVN yum install -y subversion检查是否安装成功 svnserve --version创建版本库 我们先创建/var/svn这么目录 mkdir /var/svn cd /var/svn创建版本库 svnadmin create /var/svn/project后边的project就是我们项目的版本库 cd project ls 会看到自动生成的版本库文件…

互联网全域降维攻击战略概述

前言: 在互联网维度体系概念被提出之后,社会上对于降维的理解向不同的方向发展,如很多人认为降维呈现的是有高难度业务实施能力的企业向低难度领域业务进行渗透和发展的方式,还有的认为降维就是互联网行业对于传统行业的业务冲击…

当达摩院大牛学会抠图,这一切都不受控制了……

在外界人眼中,达摩院人才济济,大多是奇人异士,做着神秘且高端的研究,有如扫地僧一般的存在,但是如果有一天,当神秘专家不再神秘,你发现他们也开始玩抠图,且这一切都朝着不受控制的方…

腾讯安全携手华夏银行“论道”金融风控,传递在线反欺诈干货建议

前不久,Gartner发布了《在线反欺诈市场指南》,对全球聚焦在线反欺诈全链路监测与防护的厂商进行评估,给遭遇欺诈的企业提供了应对指南和选择建议。其中腾讯云成为中国唯一入选服务商,得到了Gartner官方的推荐。在报告中&#xff0…

Flutter嵌套深?扩展函数了解一下

背景 嵌套层级深的问题让众多刚接触Flutter的同学感到困扰,它不仅是看起来让人感到不适,还非常影响编码体验。 大佬们会告诉你应该拆分自己的嵌套代码(自定义widget或者抽取build方法)来减少嵌套层级。这确实是个行之有效的方法&#xff0c…

VS Code 中的文件添加图标的插件vscode-icons

文章目录1. 效果图2. 用法1. 效果图 2. 用法 一旦你安装了该插件你重启VS Code后会在右下角收到一个该插件的提示,这时你要点击Activate激活icons。 你也可以通过点击以下功能来激活它(VS Code中可能存在很多主题,想用哪个就激活哪个)。 Linux & W…

开发者说:如何使用插件降低上传文件部署服务的复杂度

“ 这里描述我们实际服务部署的时候频繁发生的两个常用场景。 第一个场景,我们“办公网环境”想要在“准生产环境”下部署,需要做如下工作: 打包、将文件上传到堡垒机上、scp将上传好的包裹传输到“准生产环境”的目标机器、ssh 目标机器、r…

打开通往新零售时代的大门,数据中台这把钥匙可行吗?

2016年“新零售”概念提出即被引爆,如今看来依然让人热血沸腾,因为这三个字,极有可能影响未来十年、二十年的商业格局。在新零售概念下,大数据技术可以在任何时间和地点无形地收集和沉淀客户的主要行为数据,直接掌握客…

Vue+mui实现图片的本地缓存

效果&#xff1a; const menu {state: {products: {},GLOBAL_CONFIG:GLOBAL_CONFIG[GLOBAL_CONFIG]},mutations: {get_product: function (state, products) {//商品列表state.products products;for(let i 0; i < state.products.length; i){if(state.products[i][image…

年度回顾 | 2019 年的 Apache Flink

2019 年即将落下帷幕&#xff0c;这一年对于 Apache Flink 来说是非常精彩的一年&#xff0c;里程碑式的一年。随着这一年在邮件列表发送了超过 1 万封邮件&#xff0c;JIRA 中超过 4 千个 tickets&#xff0c;以及 GitHub 上超过 3 千个 PR&#xff0c;Apache Flink 迎来了快速…

VS Code 报错Vetur can‘t find ‘tsconfig.json‘ or ‘jsconfig.json‘的解决方法

文章目录一、原因二、说明三、显式项目四、解决方法&#xff08;3选1&#xff09;4.1. 配置Vetur插件&#xff0c;忽略提示4.2.在项目根目录创建jsconfig.json文件4.3.在项目根目录创建vetur.config.js文件一、原因 Vetur 0.31.0版本新增了一个vetur.config.js的配置文件&…

IDE 插件新版本发布,总有一个功能帮到你——开发部署提速 8 倍

对于开发者而言&#xff0c;提高工作效率大概有 2 种主要方式&#xff0c;第一种方式就是加快自己的工作速度&#xff0c;争取在同一段时间内多码一些代码、多干一些活来实现多产&#xff1b;而聪明的开发者会选择第二种方式&#xff0c;就是通过插件&#xff0c;让一些重复性的…

推特惊爆史诗级漏洞,App 恶意窃取用户隐私,云端安全路向何方?

作者 | 马超来源 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09;近日&#xff0c;全球安全事件频发&#xff0c;先是推特惊爆史诗级漏洞&#xff0c;黑客对推特进行比特币钓鱼骗局&#xff0c;获取了对包括美国前总统奥巴马、钢铁侠埃隆马斯克、和世界首富比尔盖茨推特…

读懂这本书,才算读懂阿里大数据

2019年&#xff0c;是阿里巴巴第11个双11。众所周知&#xff0c;阿里的电商在线体系经过多年发展&#xff0c;可以支持峰值超过每秒50几万笔交易。但鲜有人知的是&#xff0c;海量的交易&#xff0c;创造了海量的数据&#xff0c;爆炸性的数据量激增&#xff0c;给狂欢过后的大…