Lowcode platform is a hot topic in recent years. Through automatic code generation and visual programming, users only need to write a small amount of code to quickly build various applications, meeting the needs of many technical and non-technical personnel. Recently, the author has been working on low-code related product design and technical solutions, continuing to refine the visual editor H5-Dooring. The following analysis will focus on low-code platforms and data source design, which I hope will be helpful to you.
Problems solved by low-code platforms
Low-code platforms are APaaS (Application Platform as a Service) that address the issues of application coordination and human cost within the enterprise. With the development of computer technology such as cloud services, traditional software services can no longer meet the pressure of the digital wave. The author summarizes the urgent problems that enterprises need to solve as follows:
- Enterprise data island (data sharing between applications and communication difficulties)
- Enterprise customization needs are increasing (different industries enable different application scenarios, thousands of “customers” thousands of faces)
- IT talent in short supply
- Communication costs, R&D costs, and r&d cycles are tight
- Product iteration and slow response
So we urgently need solutions such as low code/zero code to solve these problems.
Of course, the Lowcode platform has appeared very early. Foreign Siemens (SAP), Microsoft, Google have very mature solutions, and there are not a few domestic, but there is still a long way to go to form a cross-industry universal solution (such as how to solve the small program building of domestic major platforms).
The basic process is as follows:
The data source
With the basic concepts of low code and the pain points addressed above, let’s take a look at the composition and data source design of low code.
The low code basically consists of the following parts:
- Client editor
- Management terminal
- The data source
- Page (application) management
- Template management
- Component management
- Resource library management (images, fonts, own SDK, plug-ins, etc.)
- Role Management (not required)
As shown in the figure below:
The client editor section is mainly about the technical infrastructure related to the design of drag and drop, component rendering, which I have shared a lot in this article, such as smart grid layout drag and drop mode, natural flow drag and drop build mode, free layout mode, etc. Details can refer to the source:
- H5 – Dooring | smart grid platform structures drag and drop
- H5 – the Stream | natural flow sorting platform structures
- V6. Dooring | free layout visualization platform structures
The focus of this article is on the data source design, and then we begin the analysis of the data source.
What is a data source? The author’s understanding is the source of data, is to provide some kind of data to the matrix. All the database connection information is stored in the data source, and by providing the correct data source name, we can find the corresponding data asset.
Low code products, there are purely static pages, there are dynamic pages that need to connect with dynamic data, low code platform data sources are mainly designed for dynamic pages (business systems). Low-code platform users can select or create data sources, variables, functions, custom events, etc., for pages and components to achieve data docking and page interaction. In this way, data docking complexity can be further reduced and research and development efficiency can be improved.
For the design of data sources, according to the actual business requirements, we can be divided into static data sources and dynamic data sources. Static data sources are what users can create visually on low-code platforms, such as editing data tables.
Dynamic data source refers to the user can customize the request to the third party data service, the component consumption data source is completely dynamic invocation, similar to our traditional development using Ajax requests.
Based on the above concepts, LET me introduce you
H5- Data source implementation for Dooring.
Data source editing interface:
First of all, Each of Dooring’s users has a separate repository of data sources that can be configured to be consumed by components. The data sources are stored under the corresponding user, who can consume the data sources by different pages/components. As follows:
[Data source pattern]
1. Static data source implementation
Static data sources are those created by the user on the platform, which we store in a common state for components to consume, such as Redux or Vuex, and store in a database. The specific process is as follows:
From the code level, we only need to get the static data source from the server, stored in the global state of the client, for the user created data source, we provide the database CURD operation. The diagram below:
2. Dynamic data source
Dynamic data source design requires a set of component data protocols that require third-party interfaces to follow low-code platform data specifications to return data, which are manually programmed to map fields to component data.
The specific scheme is similar to the third party data access scheme I implemented in the visual component:
In this way, components can consume static data or dynamically load third-party data, thus creating a low-code dynamic page.
The last
Recently, the H5-Dooring visual building platform has continued to be iterated, with the data source basically set up and more intelligent directions to follow. Here is the latest update log:
- Optimize editor load performance
- Iframe Container components add attributes such as borders
- Rich text component adds background color configuration
- Fixed a bug where previewing the real machine’s space-time data could also display qr codes
- Optimized the page height adaptation problem and added a height adapter
- Optimizes the message bug that occurs when components interact with spatiotemporal links
- Update the Dooring documentation
Domestic lowcode platform still has a long way to go, looking forward to your efforts 💪!
Github: H5-Dooring Visual Building platform
More low code/visualization related technology sharing and implementation, welcome to wechat search interesting talk front-end learning exploration.