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体验,灵活的数据流处理能力和丰富的组件扩展能力的低代码解决方案。它不单是一个低代码框架,而且还内置了或者塑造了一整套的运维工作流模式,以适配运维业务场景的使用。

相关文章
|
3天前
|
Cloud Native 前端开发 JavaScript
前端开发者必看:不懂云原生你就OUT了!揭秘如何用云原生技术提升项目部署与全栈能力
【10月更文挑战第23天】随着云计算的发展,云原生逐渐成为技术热点。前端开发者了解云原生有助于提升部署与运维效率、实现微服务化、掌握全栈开发能力和利用丰富技术生态。本文通过示例代码介绍云原生在前端项目中的应用,帮助开发者更好地理解其重要性。
17 0
|
7天前
|
缓存 前端开发 JavaScript
前端的全栈之路Meteor篇(二):容器化开发环境下的meteor工程架构解析
本文详细介绍了使用Docker创建Meteor项目的准备工作与步骤,解析了容器化Meteor项目的目录结构,包括工程准备、环境配置、容器启动及项目架构分析。提供了最佳实践建议,适合初学者参考学习。项目代码已托管至GitCode,方便读者实践与交流。
|
6天前
|
人工智能 资源调度 数据可视化
【AI应用落地实战】智能文档处理本地部署——可视化文档解析前端TextIn ParseX实践
2024长沙·中国1024程序员节以“智能应用新生态”为主题,吸引了众多技术大咖。合合信息展示了“智能文档处理百宝箱”的三大工具:可视化文档解析前端TextIn ParseX、向量化acge-embedding模型和文档解析测评工具markdown_tester,助力智能文档处理与知识管理。
|
15天前
|
前端开发 JavaScript 开发者
构建工具对比:Webpack与Rollup的前端工程化实践
【10月更文挑战第11天】本文对比了前端构建工具Webpack和Rollup,探讨了它们在模块打包、资源配置、构建速度等方面的异同。通过具体示例,展示了两者的基本配置和使用方法,帮助开发者根据项目需求选择合适的工具。
13 3
|
2月前
|
缓存 前端开发 JavaScript
优化前端性能:关键策略与实践
随着互联网技术的发展,用户对网页加载速度和交互体验的要求日益提高,前端性能优化成为提升用户体验和网站竞争力的关键。本文探讨了前端性能优化的重要性和七大关键策略,包括压缩资源文件、利用浏览器缓存、减少HTTP请求、异步加载、使用CDN、优化CSS和JavaScript执行及第三方脚本优化,并提供了实践案例,帮助开发者构建更快、更高效的网站。
|
23天前
|
前端开发 JavaScript 开发者
利用代码分割优化前端性能:高级技巧与实践
【10月更文挑战第2天】在现代Web开发中,代码分割是优化前端性能的关键技术,可显著减少页面加载时间。本文详细探讨了代码分割的基本原理及其实现方法,包括自动与手动分割、预加载与预取、动态导入及按需加载CSS等高级技巧,旨在帮助开发者提升Web应用性能,改善用户体验。
|
21天前
|
前端开发 JavaScript 开发者
深入解析前端开发中的模块化与组件化实践
【10月更文挑战第5天】深入解析前端开发中的模块化与组件化实践
21 1
|
25天前
|
前端开发 JavaScript API
前端开发趋势与实践:拥抱Web Components
前端开发趋势与实践:拥抱Web Components
30 4
|
25天前
|
前端开发 JavaScript 安全
前端开发趋势与实践:构建现代Web应用的探索
【10月更文挑战第1天】前端开发趋势与实践:构建现代Web应用的探索
25 2
|
27天前
|
存储 前端开发 JavaScript
前端技术深度探索:从基础到现代框架的实践之旅
前端技术深度探索:从基础到现代框架的实践之旅
28 2