优维科技的前端低代码平台 EasyMABuilder 的架构大致如下图：
其中主要包含以下三个基础部分：
微应用：即 Web 应用程序，由多个路由页面组成，每个页面由构件组装而来，构件如何组装定义在 Storyboard 中。Storyboard 是结构化数据，可以通过可视化工具编排出来，也可以直接用 YAML 或 JSON 配置。
构件：和前端开发者常说的「组件」类似，主要用于在页面上渲染特定的 UI 内容。开发者可以很容易地通过声明的方式使用构件，无需编程。
EasyMABuilder Core：负责解析微应用的 storyboard，按照其定义加载路由并装载相应的构件，完成页面的渲染。
整个架构和乐高很像，用一块块积木、按特定的方式组合在一起，就可以拼搭出各式各样的东西出来。
EasyMABuilder 的基石就是这些积木--构件，正是一个个构件的组合搭建起了最终的应用。我们已经提供了数百个开箱即用的构件，包括功能完整的 UI 构件，以及包含特定业务属性的业务构件。同时开发者也可以开发自己的构件，以满足更加个性化的场景。
构件主要包含以下几大要素：
属性：构件的属性通常用于对该构件进行基本的参数设置。例如对于一个按钮构件，它可能会对外提供：按钮的文字内容、文字颜色等属性，这样应用在编排时可以按需设置属性，以实现不同的 UI 效果：
brick: "my-button"
properties:
text: "Search"
color: "blue"构件的属性可以是任意类型的数据，包括字符串、数字、布尔值、对象、数组等。
事件：构件可以在特定的用户交互等行为发生时触发特定的事件。例如对于一个表单构件，如果用户点击其中的提交按钮时，会发起一个表单提交的事件，并同时提供已填写的表单数据，那么开发者就可以按需配置提交后的动作：
brick: "my-form"
events:
submit:
action: "console.log"平台提供了多种形式的事件处理方式，包括页面跳转、更新构件属性或调用构件方法、发起远端请求、打印日志等等。
方法：构件可以对外提供特定的方法，以供别的地方按需调用。例如对于一个对话框构件，它会提供一个「打开对话框」的方法，可以在用户点击按钮时调用：
brick: "my-button"
events:
click:
target: "my-dialog"
method: "open"注意，构件的方法可以接收任意的参数。
插槽：构件通过插槽可以让其他构件能以特定的方式容纳在该构件之内。例如表单构件可以提供一个插槽，允许其他的构件例如文本框、单选框等插入到表单中，同时表单构件还可以统一管理这些输入项的数据：
brick: "my-form"
slots:
items:
- brick: "my-input"
- brick: "my-radio"
插槽实际上定义了父子构件的关系，通过层层的构件组成一棵构件树，最终渲染成完整的页面。
这些要素使得各个构件可以灵活地适应不同的应用场景，开发者可以通过这些构件的组合编排出一个完整的微应用。
属性、事件、构件树，这些概念对于有了解 HTML 的同学会觉得有些熟悉：HTML 元素的属性和事件、以及由这些元素组成的 DOM 树。那么构件与 HTML 元素有什么关系呢，敬请期待本系列下一篇：《基于 WebComponents 的构件》。