SREWorks云原生数智运维工程实践-SREWorks 介绍篇-SREWorks前端低代码工程设计(上)

简介: SREWorks云原生数智运维工程实践-SREWorks 介绍篇-SREWorks前端低代码工程设计

 

作者:地谦(王威)

 

引子

 

“低代码”一词似乎是最近几年才流行起来的词汇,2015年前后AWS、Google、Oracle等厂商开始入局低代码领域时,国内氛围还没有很高。2018年5月,快速应用开发的低代码平台OutSystems获得3.6亿美金投资;同年8月,西门子宣布以6亿欧元收购低代码应用开发厂商Mendix此后,越来越多的企业开始尝试以低代码/零代码技术重构数字化业务,低代码平台市场逐步火爆起来。

 

其实低代码开发并非新生事物,据可考的资料,低代码概念最早诞生于上世纪80年代IBM的快速应用程序开发工具RAD;后来微软的VB、C#可视化开发工具Visual Studio,谷歌的Android集成开发工具Android Studio等都是对其概念的工程实践。低代码本质上还是一种软件开发方式:即不写代码或少写代码的方式来完成软件开发。

 

于前端而言,低代码开发其实也并不陌生,把“低代码”描述为“页面可视化编辑”,这一概念就变得熟悉了起来,我们曾经使用过的Dreamweaver、Frontpage等其实都可以归属到低代码的范畴。随着Angular、React、Vue等前端框架的普及以及gulp,webpack等构建工具的完善,前端进入工程化协作开发时代,逐步开始承载越来越多的业务逻辑。

 

当前云原生开发火热,在容器化微服务化技术加持下,传统意义的后端开发瘦身,又催生出了前端服务化的理念。在适配行业领域,业务场景,用户群体等不同条件下,前端低代码的设计落地和工程实践相应会呈现出不同的特征与特色。

 

一、 项目背景

 

SREWorks是一套面向企业级复杂业务的开源云原生运维解决方案,是大数据SRE团队多年工程实践的锤炼及沉淀。

 

解决前端开发的前端统一托管工程(sw-frontend)是运维解决方案的重要一环,提供了一套serverless体验的配置化前端低代码解决方案,该方案以运维人员为主要用户群体,集成了一套前端设计器/渲染器,提供前端页面部署,代码回滚,编译打包等方案。同时赋予运维人员根据自身业务需求,快速创建定制应用的能力,有效提升诸如支撑故障处理、监控分析、变更保障及值班/客服/大促等运维场景的运维效率。

 

二、 技术架构

 

低代码作为一种软件开发方式,特点在于少写代码或不写代码,只通过界面的托拉拽配置即可完成满足需求场景的软件,提高了软件的开发效率。效率提升的关键在于“复用”——对于前端页面而言,就是对页面进行解构抽象,映射为json等格式的配置文件,进而对各个粒度的组件进行编排复用;通过模板引擎进行组件映射,加载,渲染,路由组装编排,数据流传递注入等完成页面挂载。

 

作为一款着力于提升运维开发效率的前端低代码产品,sw-frontend工程采用React+antd为主的技术框架,设计了一套组件映射、编排、解析、渲染的工程体系:以antd组件为自由编辑粒度,用户在前端设计器通过可视化交互或者json编辑的方式,依据运维工作的实际使用场景,对组件进行属性配置/组件嵌套拼装;同时根据运维场景目标需求对页面组件进行布局的编排、数据源的绑定以及在合适点位插入Dynamic Logic,完成页面节点的设计工作,形成节点模型nodeModel,经模板解析引擎进行解析渲染。

 

sw-frontend整体架构图如下:

 

image.png

 

三、 核心设计

 

低代码产品由于适配的需求场景和面向的用户群体不同,所呈现的产品形态和交互方式也各具特点:类似汽车自动驾驶,区分L1、L2、L3...,低代码产品在使用复杂度上也大体呈现几种形态:

 

给普通用户使用的低代码产品:用户只需关心自身业务,无需代码配置,只用修改页面组件的Data就能快速地生成页面,通常营销活动页面都是通过此类方式快速构建

面向中台开发的低代码产品:进行界面拖拽设计并进行json编辑配置即可

着力于提高前端人员日常产出效率的可复用组件/插件如json-shcema动态表等,具有一定封装粒度,旨在提升代码段复用率,提升开发效率

 

sw-frontend就是这样一款面向运维中台开发的低代码产品。运维是个特定的业务需求场景,搭建一个UI界面只是运维场景的需求之一;sw-fontend提供了一套满足强交互页面类型设计,serverless体验,灵活的数据流处理能力和丰富的组件扩展能力的低代码解决方案。它不单是一个低代码框架,而且还内置了或者塑造了一整套的运维工作流模式,以适配运维业务场景的使用。

目录
打赏
0
0
0
0
371
分享
相关文章
阿里云携手神州灵云打造云内网络性能监测标杆 斩获中国信通院高质量数字化转型十大案例——金保信“云内网络可观测”方案树立云原生运维新范式
2025年,金保信社保卡有限公司联合阿里云与神州灵云申报的《云内网络性能可观测解决方案》入选高质量数字化转型典型案例。该方案基于阿里云飞天企业版,融合云原生引流技术和流量“染色”专利,解决云内运维难题,实现主动预警和精准观测,将故障排查时间从数小时缩短至15分钟,助力企业降本增效,形成可跨行业复制的数字化转型方法论。
云栖实录 | 智能运维:云原生大规模集群GitOps实践
云栖实录 | 智能运维:云原生大规模集群GitOps实践
100 1
智能运维:云原生大规模集群GitOps实践
智能运维:云原生大规模集群GitOps实践,由阿里云运维专家钟炯恩分享。内容涵盖云原生运维挑战、管理实践、GitOps实践及智能运维体系。通过OAM模型和GitOps优化方案,解决大规模集群的发布效率与稳定性问题,推动智能运维工程演进。适用于云原生环境下的高效运维管理。
104 8
云原生之运维监控实践:使用 taosKeeper 与 TDinsight 实现对 时序数据库TDengine 服务的监测告警
在数字化转型的过程中,监控与告警功能的优化对保障系统的稳定运行至关重要。本篇文章是“2024,我想和 TDengine 谈谈”征文活动的三等奖作品之一,详细介绍了如何利用 TDengine、taosKeeper 和 TDinsight 实现对 TDengine 服务的状态监控与告警功能。作者通过容器化安装 TDengine 和 Grafana,演示了如何配置 Grafana 数据源、导入 TDinsight 仪表板、以及如何设置告警规则和通知策略。欢迎大家阅读。
173 0
前端的全栈之路Meteor篇(二):容器化开发环境下的meteor工程架构解析
本文详细介绍了使用Docker创建Meteor项目的准备工作与步骤,解析了容器化Meteor项目的目录结构,包括工程准备、环境配置、容器启动及项目架构分析。提供了最佳实践建议,适合初学者参考学习。项目代码已托管至GitCode,方便读者实践与交流。
114 5
极氪汽车云原生架构落地实践
随着极氪数字业务的飞速发展,背后的 IT 技术也在不断更新迭代。极氪极为重视客户对服务的体验,并将系统稳定性、业务功能的迭代效率、问题的快速定位和解决视为构建核心竞争力的基石。
深圳农商银行三代核心系统全面投产 以云原生架构筑牢数字化转型基石
深圳农商银行完成第三代核心系统全面上云,日均交易超3000万笔,峰值处理效率提升2倍以上。扎根深圳70余年,与阿里云共建“两地三中心”分布式云平台,实现高可用体系及全栈护航。此次云原生转型为行业提供可复制样本,未来将深化云计算与AI合作,推动普惠金融服务升级。
123 17
云原生时代的架构革新,Apache Doris 存算分离如何实现弹性与性能双重提升
随着云基础设施的成熟,Apache Doris 3.0 正式支持了存算分离全新模式。基于这一架构,能够实现更低成本、极致弹性以及负载隔离。本文将介绍存算分离架构及其优势,并通过导入性能、查询性能、资源成本的测试,直观展现存算分离架构下的性能表现,为读者提供具体场景下的使用参考。
云原生时代的架构革新,Apache Doris 存算分离如何实现弹性与性能双重提升
深入理解云原生架构及其在现代企业中的应用
随着数字化转型的浪潮席卷全球,企业正面临着前所未有的挑战与机遇。云计算技术的迅猛发展,特别是云原生架构的兴起,正在重塑企业的IT基础设施和软件开发模式。本文将深入探讨云原生的核心概念、关键技术以及如何在企业中实施云原生策略,以实现更高效的资源利用和更快的市场响应速度。通过分析云原生架构的优势和面临的挑战,我们将揭示它如何助力企业在激烈的市场竞争中保持领先地位。
142 13
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等