优维科技前端低代码平台EasyMABuilder的架构如下图:
架构主要包含以下三个基础部分
# 微应用:即Web应用程序,由多个路由页面组成,每个页面由构件组装而来,构件如何组装定义在Storyboard中。Storyboard是结构化数据,可以通过可视化工具编排出来,也可以直接用YAML或JSON配置。
# 构件:和前端开发者常说的「组件」类似,主要用于在页面上渲染特定的UI内容。开发者可以很容易通过声明的方式使用构件,无需编程。
# EasyMABuilder Core:负责解析微应用的Storyboard,按照其定义加载路由并装载相应的构件,完成页面的渲染。
整个架构和乐高很像,用一块块积木按特定的方式组合在一起,就可以拼搭出各式各样的东西出来。
EasyMABuilder的基石就是这些积木—构件,正是一个个构件的组合搭建起了最终的应用。
我们已经提供了数百个开箱即用的构件,包括功能完整的UI构件、特定业务属性的业务构件。同时开发者也可以开发自己的构件,以满足更加个性化的场景。
构件主要包含以下四大要素
# 属性:构件的属性通常用于对该构件进行基本的参数设置。
例如对于一个按钮构件,它可能会对外提供:按钮的文字内容、文字颜色等属性,这样应用在编排时可以按需设置属性,以实现不同的UI效果:
构件的属性可以是任意类型的数据,包括字符串、数字、布尔值、对象、数组等。
# 事件:构件可以在特定的用户交互等行为发生时触发特定的事件。
例如对于一个表单构件,如果用户点击其中的提交按钮时,会发起一个表单提交的事件,并同时提供已填写的表单数据,那么开发者就可以按需配置提交后的动作:
平台提供了多种形式的事件处理方式,包括页面跳转、更新构件属性或调用构件方法、发起远端请求、打印日志等等。
# 方法:构件可以对外提供特定的方法,以供别的地方按需调用。例如对于一个对话框构件,它会提供一个「打开对话框」的方法,可以在用户点击按钮时调用:
注意:构件的方法可以接收任意的参数。
# 插槽:构件通过插槽可以让其他构件能以特定的方式容纳在该构件之内。
例如表单构件可以提供一个插槽,允许其他的构件例如文本框、单选框等插入到表单中,同时表单构件还可以统一管理这些输入项的数据:
插槽实际上定义了父子构件的关系,通过层层的构件组成一棵构件树,最终渲染成完整的页面。
这些要素使得各个构件可以灵活地适应不同的应用场景,开发者可以通过这些构件的组合编排出一个完整的微应用。
属性、事件、构件树,这些概念对于有了解HTML的同学会觉得有些熟悉:HTML元素的属性和事件、由这些元素组成的DOM树。
关于优维低代码>>
低代码是优维科技长期深耕的技术板块,在漫长的创业周期中,我们通过不断实践积累和迭代优化,沉淀出EasyMABuilder前端低代码平台,迄今已成功赋能大量优质用户,为多个行业带来前所未有的轻盈体验。
EasyMABuilder成功的背后,是优维人数年的技术探索和EasyOps产品哲学的落地,蕴含了主创团队对低代码生态的深度思考和实践创新。
我们特别推出低代码专题撰稿计划,以专栏系列文章的形式解构低代码在DevOps领域的技术表现。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
