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

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

八、 动态表单

 

1. 表单工厂

 

页面交互还有重要的一环:表单数据的交互。sw-frontend提供了近三十种输入形式的表单项以供表单设计选择使用,对于Form表单提供了界面化的属性配置如:表单项类型、是否展示、表单项数据源、表单项条件渲染、表单项label、表单项key,表单拖拽排序,动态添加表单项等。

 

image.png

 

image.png

 

对于表单数据的编辑回填以及表单和页面的数据流以及action交互,也做了模型化的抽象处理,这个在后面页面操作章节做详细介绍。

 

2. 过滤器/表单Action

 

对于页面的表单Action,如新增、编辑等,sw-frontend抽象为单独的操作区块,每个操作区块创建时会生成unikey,在页面组件工具栏区添加好操作button后,可以通过页面交互或源码编辑的形式建立绑定关系。

 

image.png

 

源码视角下,在table组件的toolbar字段下,“新建应用”button以blockId的形式跟新建应用的表单操作区块建立了绑定关系;当模板引擎解析到toolbar工具栏,会用该blockId获取到该操作区块的配置,然后根配置以表单工厂函数加载对应表单项并对其表单项值初始化。

 

image.png

 

3. 过滤器

 

过滤器是对传统页面开发条件中过滤表单的一种抽象,在设计器中对过滤器的定义和action表单操作大体一致,只是过滤器没有表单提交地址,关联组件如table的过滤刷新,是经由过滤器将表单项的字段值投递到参数阈,table的数据源获取执行器进而通过侦听对比参数阈的关联字段值的变化重新拉取数据,来间接完成表格数据的过滤查询操作;而action操作则是将表单提交到后端地址,确认成功提交后通过callback来完成参数阈投递更新,间接完成组件的数据刷新操作。

 

image.png

过滤器

 

image.png

action操作

 

 

 

4. 数据源

 

sw-frontend提供了灵活的数据流处理机制,降低对接口的数据格式及参数的固定要求,使应用富客户端化,这也是serverless体验的关键一环:在此用户可以灵活定义组件/页面节点数据源类型,提供类似GraphQL的模式,在设计器中对返回数据进行灵活处理。

 

image.png

 

对于数据源为API格式的地址中使用$变量名,会统一从参数阈中渲染替换,然后获取组件数据源的数据;同时提供请求前置函数和请求后置函数的执行钩子,在这里可以进行数据的拆解或组装以及写入一些业务逻辑代码。

 

image.png

 

九、 页面操作(Action)

 

页面操作是低代码工程设计里面的重要一环,承载着很大一部分运维需求场景,sw-frontend将页面操作抽象为四个大的类别:工程内置操作类,过滤器类,表单提交类,超链跳转类。

 

image.png

 

1. 工程内置操作类

 

sw-frontend在组件的工具栏内置了若干通用的按钮类的操作,根据操作类型map,识别相应操作进行渲染。典型的如“组件刷新”操作,用户在界面添加该按钮,配置唯一识别字段“__refresh__”,即可完成组件刷新操作的配置,该刷新Button通过触发参数阈改变事件,间接完成组件的数据刷新操作。


 

2. 超链跳转类

 

超链跳转类别的操作,常用于表格等组件的行内操作,一般以JSXRender的形式进行配置,渲染为Button/Link。进行路由跳转或者超链跳转时,表格行内数据可以作为传入参数使用。

 

3. 过滤器类

 

过滤器本质而言是对传统开发方式下页面查询的一种抽象组件本身定义有数据源,过滤器的职能是触发组件重新获取数据。在sw-frontend中,过滤器的表现形式可以是一组tab、一组表单项。

 

以表单类过滤器为例:用户在填充各过滤条件之后,“提交”操作本质并没有直接的提交地址,而是进行表单参数的投递--改变节点参数阈,组件通过监听参数阈关联字段的改变,重新拉取数据,完成传统页面的查询操作。

 

4. 表单提交类

 

表单操作承载了大部分的页面操作,sw-frontend将常规的“增”、都抽象为表单提交类的事件,对这类Action操作,在完成和服务端交互后,以callback的形式,进行节点参数阈字段的投递,以触发数据渲染类组件的刷新从而完成“增”、类的操作,如下两图分别为Action操作定义和运行时渲染界面:

 

image.png

 

image.png

 

其中在进行数据编辑时的表单数据回填,大多数场景为列表类数据的编辑:定义在行内的“编辑”操作会绑定一个表单Action区块;在点击事件发生时,会将该行内数据对象rowData与当前节点参数阈合并,作为actionParams传入该Action表单区块,表单区块通过读取actionParams的对应字段value作为各表单项的initValue,完成数据回填。

 

十、 节点参数域

 

节点参数阈是以Redux状态管理机制为依托,建立路由节点页面共享参数对象nodeParams,节点页面各组件通过对nodeParams的修改和对应字段侦听来间接完成组件间的信息传递和事件交互。

 

sw-frontend在节点页创建之初,会初始化节点参数域:nodeParams;在节点页面的生命周期内,也会将url中变量参数,一些页面交互产生的runtime参数以及外部函数投递来的参数整合到节点参数域中来。

 

image.png

 

随之组件在经过统一数据源处理器获取数据流渲染之后,会对节点参数阈的target字段值通过监听对比,以触发数据reload刷新机制,重新获取数据源数据;同时页面的一些action表单操作,也是通过参数阈投递更新目标字段值进行进行间接触发相应组件的reload刷新渲染。

 

image.png

 

十一、 组件扩展

 

sw-frontend提供了声明式内置组件的注册机制,同时开辟了用户自定义组件的入口,用户可以将一些常用的自定义组件嵌入到我们的组件列表,以供前端设计器统一调拨;当前自定义组件以JSXRender的方式进行执行,可以直接书写JSX代码,同时能够识别antd组件,赋予用户更加灵活的页面渲染能力。

 

image.png

 

十二、 愿景与规划

 

现sw-frontend已内置运维场景常用的基础组件,图表组件,landing组件,布局组件等五十余个组件,除此之外还开放了用户自定义简单JSX组件的入口,让用户对自定义组件进行编辑管理,以拓展组件扩展和插拔使用的空间。同时动态加载远程组件,建立运维组件生态市场也纳入到了后面的版本规划中;以期能够共建打造出一个丰富共享的运维组件生态来,这也是我们将其开源的一个初衷愿景。

 

版本动态

 

我们会根据工作项目节奏,持续对功能进行完善优化和升级。近期发布的版本加入了页面模板保存和从模板快速创建的功能,以进一步聚焦“复用”,提升开发效率。

 

image.png

 

相关文章
|
6天前
|
弹性计算 Kubernetes Cloud Native
云原生架构下的微服务设计原则与实践####
本文深入探讨了在云原生环境中,微服务架构的设计原则、关键技术及实践案例。通过剖析传统单体架构面临的挑战,引出微服务作为解决方案的优势,并详细阐述了微服务设计的几大核心原则:单一职责、独立部署、弹性伸缩和服务自治。文章还介绍了容器化技术、Kubernetes等云原生工具如何助力微服务的高效实施,并通过一个实际项目案例,展示了从服务拆分到持续集成/持续部署(CI/CD)流程的完整实现路径,为读者提供了宝贵的实践经验和启发。 ####
|
7天前
|
Kubernetes 负载均衡 Cloud Native
云原生应用:Kubernetes在容器编排中的实践与挑战
【10月更文挑战第27天】Kubernetes(简称K8s)是云原生应用的核心容器编排平台,提供自动化、扩展和管理容器化应用的能力。本文介绍Kubernetes的基本概念、安装配置、核心组件(如Pod和Deployment)、服务发现与负载均衡、网络配置及安全性挑战,帮助读者理解和实践Kubernetes在容器编排中的应用。
29 4
|
11天前
|
NoSQL Cloud Native atlas
探索云原生数据库:MongoDB Atlas 的实践与思考
【10月更文挑战第21天】本文探讨了MongoDB Atlas的核心特性、实践应用及对云原生数据库未来的思考。MongoDB Atlas作为MongoDB的云原生版本,提供全球分布式、完全托管、弹性伸缩和安全合规等优势,支持快速部署、数据全球化、自动化运维和灵活定价。文章还讨论了云原生数据库的未来趋势,如架构灵活性、智能化运维和混合云支持,并分享了实施MongoDB Atlas的最佳实践。
|
7天前
|
Kubernetes Cloud Native API
云原生架构下微服务治理的深度探索与实践####
本文旨在深入剖析云原生环境下微服务治理的核心要素与最佳实践,通过实际案例分析,揭示高效、稳定的微服务架构设计原则及实施策略。在快速迭代的云计算领域,微服务架构以其高度解耦、灵活扩展的特性成为众多企业的首选。然而,伴随而来的服务间通信、故障隔离、配置管理等挑战亦不容忽视。本研究聚焦于云原生技术栈如何赋能微服务治理,涵盖容器编排(如Kubernetes)、服务网格(如Istio/Envoy)、API网关、分布式追踪系统等关键技术组件的应用与优化,为读者提供一套系统性的解决方案框架,助力企业在云端构建更加健壮、可维护的服务生态。 ####
|
7天前
|
Kubernetes 监控 Cloud Native
云原生应用:Kubernetes在容器编排中的实践与挑战
【10月更文挑战第26天】随着云计算技术的发展,容器化成为现代应用部署的核心趋势。Kubernetes(K8s)作为容器编排领域的佼佼者,以其强大的可扩展性和自动化能力,为开发者提供了高效管理和部署容器化应用的平台。本文将详细介绍Kubernetes的基本概念、核心组件、实践过程及面临的挑战,帮助读者更好地理解和应用这一技术。
30 3
|
7天前
|
监控 安全 Cloud Native
云原生安全:Istio在微服务架构中的安全策略与实践
【10月更文挑战第26天】随着云计算的发展,云原生架构成为企业数字化转型的关键。微服务作为其核心组件,虽具备灵活性和可扩展性,但也带来安全挑战。Istio作为开源服务网格,通过双向TLS加密、细粒度访问控制和强大的审计监控功能,有效保障微服务间的通信安全,成为云原生安全的重要工具。
25 2
|
7天前
|
弹性计算 监控 Cloud Native
云原生架构下的性能优化实践与策略####
在数字化转型加速的今天,云原生技术以其弹性、敏捷和高效的特点成为企业IT架构转型的首选。本文深入探讨了云原生架构的核心理念,通过具体案例分析,揭示了性能优化的关键路径与策略,为开发者和企业提供了可操作的实践指南。 ####
|
10天前
|
敏捷开发 Cloud Native 持续交付
云原生技术在现代企业中的应用与实践
【10月更文挑战第23天】本文将深入探讨云原生技术在现代企业中的广泛应用,并结合具体案例分析其对企业数字化转型的推动作用。我们将从云原生技术的基本原理出发,逐步揭示其在提高业务敏捷性、降低成本和增强系统可靠性方面的优势。同时,文章还将分享一系列成功实施云原生技术的企业案例,为读者提供实践中的参考和启示。最后,我们将讨论云原生技术面临的挑战及未来的发展趋势,为企业在这一领域的进一步探索提供指导。
|
11天前
|
监控 Cloud Native 测试技术
云原生架构下的性能优化与实践####
【10月更文挑战第21天】 本文深入探讨了在云原生环境下,如何通过一系列技术手段和最佳实践来提升应用性能。文章首先概述了云原生架构的基本原则与优势,随后详细分析了影响性能的关键因素,包括容器编排、微服务设计、持续集成/持续部署(CI/CD)流程以及监控与日志管理。针对这些因素,文中不仅介绍了具体的优化策略,如资源请求与限制的合理配置、服务间通信的高效实现、自动化测试与部署的优化,还结合案例分析,展示了如何在实际项目中有效实施这些策略以显著提升系统响应速度和处理能力。此外,文章还强调了性能测试的重要性,并提供了几种常用的性能测试工具和方法。最后,总结了云原生性能优化的未来趋势,为开发者和架构师
11 2
|
7天前
|
缓存 资源调度 Cloud Native
云原生架构下的性能优化实践与策略####
【10月更文挑战第26天】 本文深入探讨了云原生环境下性能优化的核心原则与实战技巧,旨在为开发者和企业提供一套系统性的方法,以应对日益复杂的微服务架构挑战。通过剖析真实案例,揭示在动态扩展、资源管理、以及服务间通信等方面的常见瓶颈,并提出针对性的优化策略,助力企业在云端环境中实现更高效、更稳定的应用部署。 ####
16 0

热门文章

最新文章