在当今数字化飞速发展的时代，企业对高效、麻利的应用程序需要日益旺盛。为了满足这一需要，越来越多的低代码开发平台开始涌现。这些平台通过提供简略易用的开发工具和优化后的开发流程，帮忙开发者疾速构建高质量、可重复使用的应用程序，同时升高了开发的难度和老本，进步了开发效率和灵活性。这些低代码开发平台的呈现，无疑为企业的数字化转型提供了更疾速、更高效的办法，也将推动整个软件开发行业的提高。
TinyEngine 我的项目介绍
随着企业对于低代码开发平台的需要日益增长，急需一个通用的解决方案来满足各种低代码平台的开发需要。正是在这种状况下，低代码引擎应运而生。它是一种通用的开发框架，通过对低代码平台零碎罕用的性能进行解构，将其划分为多个功能模块，并为每个模块定义了相应的协定和开发范式，使得开发者能够依据本身的业务需要，轻松定制开发出本人的低代码开发平台。
TinyEngine 提供了低代码底层能力，并集成了人工智能，从而使用户可能高效开发。TinyEngine 具备弱小的拖拽性能，无论是图元还是简单组件，都能在画布上带来晦涩的体验。它实用于多场景的低代码平台开发，包含资源编排、流程编排、服务端渲染、模型驱动、挪动端、大屏端以及页面编排等低代码平台。
架构
外围亮点
-
能够定制开发低码平台 。TinyEngine 采纳灵便的零碎架构，其杰出的整体架构提供了高度的自定义自由度，使用户可能像搭建积木一样抉择不同的模块来构建本人的专属设计器。此外，插件化的架构使得用户能够不便地扩大与业务相干的性能。在 TinyEngine 中，插件依据地位大抵分为三类：toolbars/plugins/settings，别离对应顶部区域、左侧区域和右侧区域。toolbars 插件次要偏差于无需 UI 或者 UI 较为简单的工具插件，plugins 是业务性能插件，显示在左侧(或下方) 抽屉页面，能够通过点击进行开展收起或切换。这些性能都像是独立的积木块，用户能够选择性地保留或删除。同时，用户也能够开发本人的插件或工具，并将其装置到对应的地位。TinyEngine 的灵活性极强，用户能够自在地决定他们想要开发什么样的低代码平台。
TinyEngine 提供了一套欠缺的插件体系，涵盖了插件开发所需的根底 UI 库、工具库、插件面板的显示管制、生命周期治理、公共 API 注册与共享等。这一体系使得开发者只需遵循简略的标准，即可疾速开发出业务所需的插件，从而极大地提高了开发效率和灵活性。通过应用 TinyEngine 提供的插件体系，开发者能够更加轻松地治理和保护简单的插件生态系统，同时升高保护老本。总之，TinyEngine 的插件体系为开发者提供了一个全面、高效、灵便的开发平台，使得疾速开发出高质量的插件成为可能。
插件开发须要遵循肯定的开发标准，次要是文件标准与导出标准：
-
文件标准，必须蕴含上面几个文件
pluginProject - src 插件源码 - index.js 注册插件入口，须要导出约定的数据结构 - package.json - 导出标准，index.js 文件须要导出一个对象来申明根底信息
import component, {api} from './src/Main.vue'
export default {
id: 'pluginId', // 插件 id
title: 'pluginName', // 插件名
icon: 'js', // 插件 icon
align: 'top', // 插件地位，左侧插件可选值：'top' | 'bottom' 工具栏可选值：'right' | 'center' | 'left'
component, // 插件面板关上时渲染的组件
api, // 插件裸露的 api，能够提供给其余插件调用
}在此基础上就能够依照业务须要自在开发相干逻辑代码。
最初在 addons.js 插件配置文件中引入，就实现一个残缺的插件开发了。
import Materials from '@xxxx/lowcode-plugin-materials'
export default {
plugins: [
Materials,
// ...
],
toolbars: [// ...],
settings: [// ...],
}（ps: 咱们呐喊用户把开发的插件包开源，共建 TinyEngine 的生态。）
-
TinyEngine 有凋谢的物料协定和扩大接口。 TinyEngine 低代码引擎默认的物料来源于华为云开源组件库 TinyVue，该组件库领有丰盛的组件和弱小的性能。并且实现了跨端垮技术栈，同时反对 vue2 和 vue3。即便业务零碎应用其余组件库，也无需切换，得益于 TinyEngine 弱小的凋谢物料设计，可间接导入第三方组件库，例如 elementUI 和 AntDesign 等。引擎底层技术架构采纳 webcomponent 技术，因而反对 Vue、React 和 Angular 等不同技术栈的组件或区块。用户能够自由选择所需的组件库并导入应用。
导入第三方组件库，找到 runner.js 物料文件。而后参照默认物料 @opentiny/vue 即可，次要批改以下中央：
// 全量导入 UI 组件库
import UI from '@xxxx/UI'
Object.entries(UI).forEach(([key, component]) => {const { name} = component
if (name) {window.TinyLowcodeComponent[name] = component
}
})
// 导入某个组件库外面的单个组件
import {button} from '@xxxx/UI'
window.TinyLowcodeComponent[name] = button通过导入第三方组件库，用户能够在低代码平台中应用这些组件库来开发应用程序。除了导入组件外，用户还须要通过 bundle.json 文件来形容导入的组件所裸露进去的事件和属性。这样，用户能够在应用程序中应用这些组件，并通过 bundle.json 文件来理解和应用组件的事件和属性。这是一个十分不便和灵便的性能，使得用户能够自在地应用和定制他们所需的组件，从而疾速开发出高质量的应用程序。
// 以下 JSON 为节选按钮裸露的属性
{
"schema": {
"type": "object",
"properties": {
"size": {
"title": "定义按钮尺寸",
"type": "string",
"enum": ["large", "medium", "small", "mini"],
"enumNames": ["较大尺寸", "中等尺寸", "较小尺寸", "迷你尺寸"],
"default": ""},"text": {"title":" 设置按钮显示的文本 ","type":"string","default":""}
},
"events": {
"onClick": {
"label": {
"zh_CN": "鼠标单击时触发",
"en_US": "Triggered on mouse click"
},
"description": {"zh_CN": "鼠标单击时触发的回调函数"},
"type": "event",
"defaultValue": ""
}
}
}
}-
TinyEngine 反对自定义 DSL 生成定制的源代码。 绝对于在运行时由平台提供渲染引擎的形式，这种形式可能为用户提供更多的自主权和安全性。用户能够自在地定义本人的 DSL，并依据须要生成定制化的源代码，从而更加灵便地控制应用程序的行为和性能。
TinyEngine 默认生成 Vue 的源代码。当页面编排实现后，会生成一个蕴含页面信息的 schema。DSL 通过便当递归等办法，从中生成源代码。如果技术栈是 Angular 或 React，用户能够齐全开发一个 Angular 或 React 的 DSL，从而生成一个新的源代码工程。用户能够依据本人的需要定制生成源代码的形式，这是一个非常灵活和弱小的性能，使得 TinyEngine 能够适应不同的技术栈和需要，从而更加宽泛地利用于各种应用程序的开发。
如果你想开发其余技术栈的 DSL，那么肯定要对 页面协定 比拟相熟。
interface IPageSchema { // 页面 或 区块 schema
fileName?: string; // 页面名称，schema 是页面时应用
componentName?: string; // 组件名，schema 是页面时值为 "Page"
blockName?: string; // 区块名，schema 是区块时应用
id: string;
css?: string; // 页面全局款式
props?: { // 组件绑定的属性
[prop:string]?: any;
style?: string; // 行内款式
className?: string; // 绑定的款式类名
};
lifeCycles?: { // 生命周期
[prop:string]?: {
type: 'js'; // 固定值
source: string; // 函数字符串
}
};
children?: Array< IComponentSchema > | string; // 子组件列表 或 文本字符串
dataSource?: { // 数据源
list: Array< IDateSource > // 数据源列表
};
actions?: { // 页面 JS
module: {source: string; // 页面定义的 JS 源码字符串};
type: "FUNCTION"; // 固定值
list: Array<{
id: string; // 页面所定义的函数名
title: string; // 配置时显示名称 与 id 统一
}>
};
bridge?: { // 桥接
imports?: Array<{
name: string; // 配置时显示名称
type: "package" | "local"; // package: npm 包; local: 本地文件
path: string; // 导入的门路(包名或者本地门路)
item: string; // 导入的我的项目
useDefault?: boolean; // 是否默认导出
instance?: string; // 实例名，须要注入 service 时须要增加该字段，typescript 模式下应用
}>
};
inputs: Array<{ // 页面接口：输出类型
name: string; // 输出属性名称
type: string; // 数据类型申明
defaultValue?: any; // 默认值
}>;
outputs: Array<{ // 页面接口：事件输入
name: string; // typescript 类型申明
type: string; // 数据类型申明
}>;
schema?: IComponentMetaSchema // 区块时应用，区块须要裸露的组件属性元数据
}
对于须要被搜索引擎爬虫 SEO 的用户，也能够用服务端 SSR 的解决形式。这种计划也能够用来疾速查看本人编辑的页面。
// 伪代码
import {createSSRApp, h} from 'vue'
return createSSRApp(render(schema))
function render(_schema) {let _arr = []
_schema.forEach((item) => {
let componentName = item.componentName
if (item.children && item.children.length) {
_arr.push(
h(componentName, item.props, [
item?.props?.text,
render(item.children),
]),
)
} else {
const text = item?.props?.text || ''
_arr.push(h(componentName, item.props, text))
}
})
return _arr
}-
TinyEngine 反对高下代码混合开发。 高下代码混合开发能够更好地满足业务需要。在企业的利用开发中，往往须要面对疾速变动的业务需要，此时，如果全副采纳低代码形式进行开发，则可能会因为代码的复杂性而无奈疾速适应变动。而如果采纳高下代码混合的形式，则能够通过低代码进行惯例业务的疾速开发，对于非凡的业务逻辑，则由业余开发人员通过高代码进行实现，这样就能够更好地满足业务需要的变动。
TinyEngine 在构建应用程序的过程中，提供了下载源代码的性能，使得用户能够在线下进行简单业务逻辑的调试。这一特点极大地便当了开发者的操作，缩小了在线调试和测试的工夫和资源耗费，同时也进步了代码的品质和可靠性。通过下载源代码进行调试，用户能够更加灵便地控制应用程序的行为和性能，从而更好地满足业务需要。总之，TinyEngine 的这一特点为用户提供了更多的自主权和灵活性，使得他们能够更加高效地控制应用程序的行为和性能。
-
TinyEngine 反对 AI 辅助开发。 低代码平台与 AI 的联合具备微小的发展潜力。这种联合能够在很大水平上进步非专业开发者的开发效率和利用智能化程度。随着 AI 技术的一直倒退和低代码平台的一直成熟，二者的联合将会在更多畛域内实现更高效、更智能的业务流程和管理模式，带来更大的商业价值。
低代码平台通过提供易于应用的开发工具和事后构建的模块，简化了应用程序的开发过程。AI 技术则能够帮忙应用程序具备更智能、更自适应的个性。通过低代码平台和 AI 的联合，开发者能够更疾速、更高效地构建应用程序，并实现更智能化的利用个性。
企业对于低代码的需要
-
PDM 元数据电子审批流
审批流业务场景是古代企业经营中不可或缺的一环。业务流程从某个特定点开始，而后通过一系列的审批节点，实现流程的审批。这些节点通常由不同级别的人员负责，例如主管、经理、财务、法务和总经理等，每个人都扮演着特定的角色和职责。
假如场景如下：流程发起人 A 启动了一个电子审批流程。这个流程首先会被传递到主管进行审批。在审批过程中，主管会仔细检查初始业务流程信息和其余相干数据，而后决定是否进一步推动流程，或退回给 A 进行订正。如果主管批准了这个流程，那么它将被移交给下一级审批人，也就是经理。在经理的审批环节，他 / 她也会详查相干数据和信息，并基于这些以及本人的独立判断来做出决策。值得注意的是，只管经理能够查看到主管填写的一些技术信息，但这些信息并不对财务和法务公开。也就是说，只有经理和总经理能够看到这些技术信息，财务和法务无奈获知。经理会依据这些窃密信息以及本人的业余判断来决定是否持续推动流程。
如果经理也批准了该流程，那么它将被送至财务节点进行审批。在审批过程中，财务次要关注经济相干的问题，例如价格、付款形式等等。一旦财务审批通过，流程会被移交给法务进行审批。
与财务审批相似，法务审批次要关注法律危险和合规性问题。在审批时，法务会仔细检查相干的合同、协定等法律文件，并评估是否存在任何法律危险或合规性问题。一旦法务批准了流程，流程将被移交给总经理进行最初的审批，以实现整个审批流程。
须要留神的是，这种审批流业务场景并不是只有一个，而是有很多个。例如，除了上述的洽购流程，还有其余业务流程须要进行审批，比方：数据入库流程、报价流程等等。每个流程都有本人的特点和审批节点数量不一。有些流程可能只须要两三个节点就能够实现审批，有些则可能须要十几个节点能力实现。然而，所有类型的审批流大抵类似。如：页面上常见的元素包含表单、表格以及罕用的审批组件等。
技术剖析：若采纳传统的开发方式，每当新增一种流程时，前端开发人员都须要开发所有审批节点的审批页面，并从新进行公布流程。同样地，服务端开发人员也须要从新建设一个审批流，通过特定页面录入各节点审批人，并编写相应的审批流规定。显然，这对于前端和服务端开发人员来说都是非常繁琐的工作。
解决方案： 基于 TinyEngine 低代码引擎，开发出一个专为电子审批流设计的低代码平台。而后，将所有与流程相干的组件，如模板、评审记录和流程指引等导入到平台的物料区域。最初，将这个专一于开发审批流的低代码平台集成到 PDM 元数据电子流业务模块中。在低代码平台上，想要开发任意一个流程的审批页面，只须要将流程模板拖入，并在模板中嵌入本流程的表单或表格，即可轻松实现该节点的审批页面，极大地提高了开发效率和便利性！服务端也将采纳另一种特定于 flow 类型的低代码平台（将在后续内容中具体介绍），以实现对审批流程人员编排。这样，前后端之间的连贯就实现了完满的贯通。
-
Flow 图元编排类型设计器
图形编排在泛滥场景中扮演着重要角色，例如流程图、审批流、部署流水线和架构图等。资源编排只是编排的主体变成了云服务资源。
资源编排遵循基础设施即代码（Infrastructure as Code, IaC）的设计理念，资源编排与以往独自治理每种云服务资源的形式有所不同。通过资源编排设计器，用户无需手动创立多个资源，只需在平台上应用设计器进行拖拽和配置，即可生成模板，并一键部署多个资源。这样，用户能够更加高效地治理和编排云服务资源，进步资源的利用率和部署速度。
因而，针对资源编排服务场景，咱们须要定制一个专用的低代码平台来满足用户的需要。该平台将具备图形化界面，容许用户通过简略的拖拽和配置来创立、批改和删除资源编排模板，而无需编写大量的代码。此外，该平台还将反对一键部署性能，以疾速部署多个资源，进步资源编排的效率和速度。
思考到须要反对大量的云服务资源，且每个云服务资源须要配置的属性各不相同，因而采纳传统开发方式为每种云服务资源开发专门的属性设置页面是不可行的。因而，咱们须要一个可能自定义渲染的属性配置计划。通过自定义渲染，用户能够依据不同的云服务资源类型和属性，自在地定义和管制属性页面的交互成果，从而进步属性配置的灵活性和可扩展性。
同时模板是极为重要的一环，它间接关系到最终资源的部署。因而，模板须要合乎特定的规范格局，这就要求画布和属性面板的输出必须可能精确反映到最终的模板中。
整顿出次要的述求：
- 整个页面应至多蕴含以下几局部：资源列表、画布和属性设置面板
- 画布应具备外围的拖拽和连线绘图性能，以反对用户直观地进行资源编排
- 属性设置面板须要反对自定义配置渲染，以满足不同云服务资源类型和属性的配置需要
- 该平台应具备可拓展性，以反对开发出其余能力，满足将来可能呈现的新的编排需要
在剖析了上述需要后，咱们能够分明地看到，应用传统开发方式将面临微小的工作量和事实的实现艰难。同时，通过比照发现，资源编排设计器和低代码设计器之间有许多相似之处，例如它们都波及根底资源、拖拽操作和配置性能，只是在画布区域存在差别。
解决方案： TinyEngine 作为一个杰出的低代码引擎，通过优良的整体架构提供了高度自在的定制能力。它容许咱们像搭积木一样抉择不同的积木来搭建一个专属的设计器。同时，属性面板全副通过 JSON 配置文件进行渲染，无需编写任何代码，灵便而弱小。这种开发方式能够大大降低开发成本，提高效率。该设计器的布局相似于 VS Code，外围模板与性能区域划分清晰明了，易于上手。插件化的架构也使得自在拓展业务相干性能变得轻而易举。综上所述，咱们最终决定应用 TinyEngine 来开发图元编排设计器，以满足资源编排的需要。
-
其余业务类型的低码平台诉求
1，跨境电商的低代码平台，旨在不便商家疾速装修店铺。商家只须要从平台提供的模板中抉择一套适宜本人的商品模板，并进行文字和图片的批改，即可疾速建设本人的电商网站。此外，该平台还须要具备不便搜索引擎优化（SEO）的性能，让商家的电商网站更容易被潜在客户发现。
2，随着挪动互联网的迅速遍及，各种应用程序推送音讯的需要日益增长。在这个背景下，APP 厂商只须要应用推送音讯平台提供的模板，并简略配置一下推送内容和款式，即可轻松实现音讯推送。
3，运维治理平台是针对企业经营过程中波及的各种数据和页面进行治理的工具。随着企业经营数据的一直减少，页面变得越来越简单。其实不同的岗位对于关怀的信息也不尽相同。低代码平台的利用能够让不同岗位的员工通过简略的拖拽操作，轻松获取本人须要的数据和信息。这种形式不仅能够进步工作效率，而且还能够升高操作难度，使得更多人能够轻松上手应用。
将来瞻望
TinyEngine 专一于为用户提供低代码的根底能力，目前正致力于跟生成式 AI 相结合，与用户独特打造面向未来的利用。
其余阐明
OpenTiny 是一套企业级 Web 利用构建解决方案，提供跨端、跨框架的 UI 组件库，适配 PC 端 / 挪动端等多端，反对 Vue2 / Vue3 / Angular 多技术栈，领有集成人工智能的低代码引擎，蕴含主题配置零碎 / 中后盾模板 / CLI 命令行等丰盛的效率晋升工具，可帮忙开发者高效开发 Web 利用。
外围亮点：
- 跨端跨框架：应用 Renderless 无渲染组件设计架构，实现了一套代码同时反对 Vue2 / Vue3，PC / Mobile 端，并反对函数级别的逻辑定制和全模板替换，灵活性好、二次开发能力强
- 组件丰盛：PC 端有 100+ 组件，挪动端有 30+ 组件，蕴含高频组件 Table、Tree、Select 等，内置虚构滚动，保障大数据场景下的晦涩体验，除了业界常见组件之外，咱们还提供了一些独有的特色组件，如：Split 面板分割器、IpAddress IP 地址输入框、Calendar 日历、Crop 图片裁切等
- 集成人工智能：低代码引擎提供低代码底层的能力，集成人工智能，让 AI 助力用户高效开发，实用于多场景的低代码平台开发。如：资源编排、服务端渲染、模型驱动、挪动端、大屏端、页面编排等低代码平台
- 配置式组件：组件反对模板式和配置式两种应用形式，适宜低代码平台，目前团队曾经将 OpenTiny 集成到外部的低代码平台，针对低码平台做了大量优化
- 周边生态齐全：提供了基于 Angular + TypeScript 的 TinyNG 组件库，提供蕴含 10+ 实用功能、20+ 典型页面的 TinyPro 中后盾模板，提供笼罩前端开发全流程的 TinyCLI 工程化工具，提供弱小的在线主题配置平台 TinyTheme
-
- *
欢送退出 OpenTiny 开源社区。增加微信小助手：opentiny-official 一起参加交换前端技术～
OpenTiny 官网：opentiny.design/
OpenTiny 代码仓库：github.com/opentiny/
Vue 组件库：opentiny.design/tiny-vue
Angular 组件库：opentiny.design/tiny-ng
欢送进入代码仓库 Star🌟TinyVue、TinyNG、TinyCLI~
如果你也想要共建，能够进入代码仓库，找到 good first issue标签，一起参加开源奉献~
往期文章举荐
- 必不可少的 UI 组件一——组件的基础知识
- OpenTiny Vue 3.10.0 版本公布：组件 Demo 反对 Composition 写法，新增 4 个新组件
- 前端 Vuer，请收好这份《Vue 组件单元测试》宝典
- OpenTiny 前端组件库正式开源啦！面向未来，为开发者而生
- 从自研走向开源的 TinyVue 组件库
- 我要做开源，提交我的第一个 PR