In today's era of rapid digitalization, enterprises have an increasingly strong need for efficient and agile applications. To meet this demand, more and more low-code development platforms are emerging. These platforms help developers quickly build high-quality, reusable applications by providing easy-to-use development tools and optimized development processes, while reducing the difficulty and cost of development and improving development efficiency and flexibility. The emergence of these low-code development platforms will undoubtedly provide a faster and more efficient method for the digital transformation of enterprises, and will also promote the progress of the entire software development industry.
TinyEngine project introduction
As enterprises' demand for low-code development platforms grows, a universal solution is urgently needed to meet the development needs of various low-code platforms. It is in this situation that low-code engines come into being. It is a general development framework that deconstructs commonly used functions of low-code platform systems, divides them into multiple functional modules, and defines corresponding protocols and development paradigms for each module, so that developers can According to business needs, you can easily customize and develop your own low-code development platform.
TinyEngine provides low-code underlying capabilities and integrates artificial intelligence to enable users to develop efficiently. TinyEngine has a powerful drag-and-drop function, which can bring a smooth experience on the canvas whether it is primitives or complex components. It is suitable for low-code platform development in multiple scenarios, including low-code platforms such as resource orchestration, process orchestration, server-side rendering, model-driven, mobile terminals, large-screen terminals, and page layout.
Core Highlights
Low-code platform can be customized and developed
TinyEngine adopts a flexible system architecture, and its excellent overall architecture provides a high degree of freedom of customization, allowing users to select different modules to build their own exclusive designer just like building blocks. In addition, the plug-in architecture allows users to easily expand business-related functions. In TinyEngine, plug-ins are roughly divided into three categories according to their locations: toolbars/plugins/settings, which correspond to the top area, left area, and right area respectively. The toolbars plug-in mainly prefers tool plug-ins that do not require UI or have a relatively simple UI. Plugins are business function plug-ins, which are displayed on the left (or below) drawer page and can be expanded, collapsed or switched by clicking. These functions are like independent building blocks that users can selectively keep or delete. At the same time, users can also develop their own plug-ins or tools and install them in the corresponding location. TinyEngine is extremely flexible, allowing users to freely decide what kind of low-code platform they want to develop.
TinyEngine provides a complete plug-in system, covering the basic UI library, tool library, plug-in panel display control, life cycle management, public API registration and sharing required for plug-in development. This system allows developers to quickly develop plug-ins required for business by simply following simple specifications, thus greatly improving development efficiency and flexibility. By using the plug-in system provided by TinyEngine, developers can more easily manage and maintain complex plug-in ecosystems while reducing maintenance costs. In short, TinyEngine's plug-in system provides developers with a comprehensive, efficient, and flexible development platform, making it possible to quickly develop high-quality plug-ins.
Plug-in development needs to follow certain development specifications, mainly file specifications and export specifications:
File specifications must include the following files
pluginProject
- src 插件源码
- index.js 注册插件入口，需要导出约定的数据结构
- package.json
- Export specification, the index.js file needs to export an object to declare basic information
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，可以提供给其他插件调用
}
On this basis, you can freely develop relevant logic codes according to business needs.
Finally, it is introduced in the addons.js plug-in configuration file to complete a complete plug-in development.
import Materials from '@xxxx/lowcode-plugin-materials'
export default {
plugins: [
Materials,
// ...
],
toolbars: [
// ...
],
settings: [
// ...
],
}
(ps: We call on users to open source the developed plug-in packages and jointly build the TinyEngine ecosystem.)
TinyEngine has open material protocols and extended interfaces
The default materials of TinyEngine low-code engine come from Huawei Cloud open source component library TinyVue , which has rich components and powerful functions. It also implements a cross-end technology stack and supports both vue2 and vue3. Even if the business system uses other component libraries, there is no need to switch. Thanks to TinyEngine's powerful open material design, third-party component libraries such as elementUI and AntDesign can be directly imported. The underlying technical architecture of the engine uses webcomponent technology, so it supports components or blocks of different technology stacks such as Vue, React and Angular. Users can freely select the required component libraries and import them for use.
Import the third-party component library and find the runner.js material file. Then refer to the default material @opentiny/vue, and mainly modify the following places:
// 全量导入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
By importing third-party component libraries, users can use these component libraries to develop applications in low-code platforms. In addition to importing components, users also need to use the bundle.json file to describe the events and properties exposed by the imported components. In this way, users can use these components in the application and understand and use the component's events and properties through the bundle.json file. This is a very convenient and flexible feature that allows users to freely use and customize the components they need to quickly develop high-quality applications.
// 以下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 supports custom DSL to generate customized source code
Compared with the platform providing the rendering engine at runtime, this approach can provide users with more autonomy and security. Users are free to define their own DSL and generate customized source code as needed, giving them more flexible control over application behavior and performance.
TinyEngine generates Vue source code by default. When the page layout is completed, a schema containing page information will be generated. The DSL generates source code from it by, for example, facilitating recursion. If the technology stack is Angular or React, users can completely develop an Angular or React DSL to generate a new source code project. Users can customize the way to generate source code according to their own needs. This is a very flexible and powerful feature that allows TinyEngine to adapt to different technology stacks and needs, making it more widely used in the development of various applications.
If you want to develop DSL for other technology stacks, you must be familiar with the page protocol.
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 // 区块时使用，区块需要暴露的组件属性元数据
}
For users who need to be SEOed by search engine crawlers, they can also use the server-side SSR solution. This solution can also be used to quickly view the pages you have edited.
// 伪代码
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 supports mixed development of high and low code
Mixed development of high and low code can better meet business needs. In enterprise application development, it is often necessary to face rapidly changing business needs. At this time, if all development is carried out using a low-code approach, it may not be able to adapt to changes quickly due to the complexity of the code. If a mixture of high and low code is adopted, regular business can be developed quickly through low code. Special business logic can be implemented by professional developers through high code, so that changes in business needs can be better met.
In the process of building applications, TinyEngine provides the function of downloading source code, allowing users to debug complex business logic offline. This feature greatly facilitates developers' operations, reduces the time and resource consumption of online debugging and testing, and also improves the quality and reliability of the code. By downloading the source code for debugging, users can more flexibly control the behavior and performance of the application to better meet business needs. Overall, this feature of TinyEngine provides users with more autonomy and flexibility, allowing them to more efficiently control the behavior and performance of their applications.
TinyEngine supports AI-assisted development
The combination of low-code platforms and AI has huge development potential. This combination can greatly improve the development efficiency and application intelligence level of non-professional developers. With the continuous development of AI technology and the continuous maturity of low-code platforms, the combination of the two will achieve more efficient and intelligent business processes and management models in more fields, bringing greater business value.
Low-code platforms simplify the application development process by providing easy-to-use development tools and pre-built modules. AI technology can help applications become smarter and more adaptive. Through the combination of low-code platforms and AI, developers can build applications faster and more efficiently and achieve more intelligent application features.
Enterprise needs for low code
PDM Metadata Electronic Approval Flow
The approval flow business scenario is an indispensable part of modern enterprise operations. The business process starts from a specific point and then passes through a series of approval nodes to complete the process approval. These nodes are usually held by people at different levels, such as supervisors, managers, finance, legal and general managers, each with specific roles and responsibilities.
The hypothetical scenario is as follows: Process initiator A initiates an electronic approval process. The process is first passed to the supervisor for approval. During the approval process, the supervisor will carefully review the initial business process information and other relevant data, and then decide whether to move forward with the process or return it to A for revision. If the supervisor approves the process, then it is handed over to the next level of approver, which is the manager. During the manager's approval process, he/she will also scrutinize relevant data and information and make decisions based on this and his/her own independent judgment. It is worth noting that although managers can view some technical information filled in by supervisors, this information is not public to financial and legal affairs. In other words, only managers and general managers can see this technical information, and financial and legal affairs cannot access it. The manager will use this confidential information and his or her own professional judgment to decide whether to move forward with the process.
If the manager also approves the process, then it is sent to the finance node for approval. During the approval process, finance focuses on financially related issues such as price, payment methods, and more. Once financial approval is passed, the process will be handed over to legal for approval.
Similar to financial approvals, legal approvals focus primarily on legal risk and compliance issues. During approval, legal affairs will carefully examine relevant contracts, agreements and other legal documents and assess whether there are any legal risks or compliance issues. Once Legal approves the process, the process will be handed over to the General Manager for final approval to complete the entire approval process.
It should be noted that there is not only one such approval flow business scenario, but many. For example, in addition to the above-mentioned procurement process, there are other business processes that require approval, such as data warehousing process, quotation process, etc. Each process has its own characteristics and a different number of approval nodes. Some processes may only require two or three nodes to complete approval, while others may require more than a dozen nodes to complete. However, the approval flow is broadly similar for all types. For example: Common elements on the page include forms, tables, and commonly used approval components.
Technical analysis: If the traditional development method is adopted, every time a new process is added, front-end developers need to develop the approval pages of all approval nodes and re-release the process. Similarly, server developers also need to re-establish an approval flow, enter the approvers of each node through a specific page, and write corresponding approval flow rules. Obviously, this is a very tedious task for both front-end and server-side developers.
Solution : Based on the TinyEngine low-code engine, a low-code platform specifically designed for electronic approval flow was developed. Then, import all process-related components, such as templates, review records, and process guidelines, into the material area of the platform. Finally, this low-code platform focusing on the development approval flow is integrated into the PDM metadata electronic flow business module. On the low-code platform, if you want to develop the approval page of any process, you only need to drag the process template and embed the form or table of this process in the template to easily complete the approval page of that node, which greatly improves the efficiency of the process. Development efficiency and convenience! The server will also use another low-code platform specific to the flow type (to be introduced in detail in subsequent content) to realize the orchestration of approval process personnel. In this way, the connection between the front and back ends is perfectly connected.
Flow primitive layout type designer
Graph orchestration plays an important role in many scenarios, such as process diagrams, approval flows, deployment pipelines, and architecture diagrams. Resource orchestration is just that the main body of the orchestration becomes cloud service resources.
Resource orchestration follows the design concept of Infrastructure as Code (IaC). Resource orchestration is different from the previous way of separately managing each cloud service resource. Through the resource orchestration designer, users do not need to manually create multiple resources. They only need to use the designer to drag and configure on the platform to generate templates and deploy multiple resources with one click. In this way, users can manage and orchestrate cloud service resources more efficiently, improving resource utilization and deployment speed.
Therefore, for resource orchestration service scenarios, we need to customize a dedicated low-code platform to meet user needs. The platform will have a graphical interface that allows users to create, modify and delete resource orchestration templates through simple drag-and-drop and configuration without writing a lot of code. In addition, the platform will also support one-click deployment function to quickly deploy multiple resources and improve the efficiency and speed of resource orchestration.
Considering that a large number of cloud service resources need to be supported, and each cloud service resource needs to configure different properties, it is not feasible to use traditional development methods to develop a dedicated property setting page for each cloud service resource. Therefore, we need a property configuration scheme that can customize rendering. Through custom rendering, users can freely define and control the interactive effects of property pages based on different cloud service resource types and properties, thereby improving the flexibility and scalability of property configuration.
At the same time, the template is an extremely important part, which is directly related to the final resource deployment. Therefore, the template needs to conform to a specific standard format, which requires that the inputs to the canvas and property panels must be accurately reflected in the final template.
Sort out the main requirements:
- The entire page should contain at least the following parts: resource list, canvas, and property settings panel
- The canvas should have core drag-and-drop and line drawing functions to support users to organize resources intuitively.
- The property settings panel needs to support custom configuration rendering to meet the configuration requirements of different cloud service resource types and properties.
- The platform should be extensible to support the development of other capabilities to meet new orchestration needs that may arise in the future.
After analyzing the above requirements, we can clearly see that using traditional development methods will face a huge workload and realistic implementation difficulties. At the same time, after comparison, it was found that there are many similarities between the resource orchestration designer and the low-code designer. For example, they both involve basic resources, drag-and-drop operations, and configuration functions, but there are differences in the canvas area.
Solution : TinyEngine, as an excellent low-code engine, provides a high degree of freedom in customization through an excellent overall architecture. It allows us to choose different building blocks to build an exclusive designer just like building blocks. At the same time, the property panels are all rendered through JSON configuration files, without writing any code, making it flexible and powerful. This development method can greatly reduce development costs and improve efficiency. The layout of the designer is similar to VS Code. The core templates and functional areas are clearly divided and easy to use. The plug-in architecture also makes it easy to freely expand business-related functions. To sum up, we finally decided to use TinyEngine to develop a primitive arrangement designer to meet the needs of resource arrangement.
Low-code platform requirements for other business types
- The low-code platform for cross-border e-commerce is designed to facilitate merchants to quickly decorate their stores. Merchants only need to choose a set of product templates that suits them from the templates provided by the platform, and modify the text and pictures to quickly build their own e-commerce website. In addition, the platform also needs to have search engine optimization (SEO)-friendly functions to make the merchant’s e-commerce website more easily discovered by potential customers.
- With the rapid popularity of mobile Internet, the demand for push messages from various applications is growing day by day. In this context, APP manufacturers only need to use the template provided by the push message platform and simply configure the push content and style to easily implement message push.
- The operation and maintenance management platform is a tool for managing various data and pages involved in the operation of the enterprise. As business operation data continues to increase, pages become more and more complex. In fact, different positions have different concerns about information. The application of low-code platform allows employees in different positions to easily obtain the data and information they need through simple drag and drop operations. This method can not only improve work efficiency, but also reduce the difficulty of operation, making it easier for more people to get started.
future outlook
TinyEngine focuses on providing users with low-code basic capabilities, and is currently working on combining it with generative AI to jointly create future-oriented applications with users.
Lei Jun announced the complete system architecture of Xiaomi's ThePaper OS, saying that the bottom layer has been completely restructured. Yuque announced the cause of the failure and repair process on October 23. Microsoft CEO Nadella: Abandoning Windows Phone and mobile business was a wrong decision. Both Java 11 and Java 17 usage rates exceeded Java 8 Hugging Face was restricted from accessing. The Yuque network outage lasted for about 10 hours and has now returned to normal. Oracle launched Java development extensions for Visual Studio Code . The National Data Administration officially unveiled Musk: Donate 1 billion if Wikipedia is renamed "Weiji Encyclopedia" USDMySQL 8.2.0 GA