preface

What is low code? Low code development is an approach to application development through visualization, enabling developers of all levels of experience to create Web and mobile applications using drag-and-drop components and model-driven logic through a graphical user interface. These tools help develop applications faster and more efficiently by reducing the amount of manual coding.

This is a big concept that I copied from the Internet, and here is my opinion on low code. First of all, is low code necessary? The answer is yes.

Here convenient analysis took A management system for example, A company may need A management system, the company hired, then behind B company also needs A similar system, the company has A need to be customized based on the framework, through the analysis it is not hard to find, in fact, we company A and company B actually have overlapping part of the demand, and this part we can use, That is, sharing through low code generation.

Another example, development activities operation page, the page life cycle is short, and income is not high also, if specialized in front-end classmates to do it, will be a little overqualified, if there is a low code platform here, and it only needs to operate, little brother little sister, drag the mouse can complete the design what is there against it?

Technology selection

Since this is a platform and involves the front end and back end for so long, we need to choose the technology for the front and back end.

React + typescript front end

The backend: Java

Database: mysql

For no particular reason, I’m good at writing React so I chose react + TS.

Platform architecture Design

The design of a platform directly determines the future scalability of the platform, so it needs to be considered carefully in this regard.

Below is my simple architecture design (you can also comment in the comments section if you have different opinions)

First the entire Web exists as a separate layer of output, and then the code for the Core part.

About the Core

ServiceAPI is an interface that developers expose to users for secondary development.

Service is where the entire CodeDesgin core Service is located, and all interface implementations are in this layer.

The Render layer is a support for case-by-case rendering, mainly due to the diversity of components that makes it impossible to achieve compatibility with a single set of code (or do it, but it would be incredibly complex).

UIStore storage, which actually works with a UIService in the Service, because we’re a low code platform, and we want to make sure that code is not only displayed on the web, but stored and deployed so I’ve designed a UIStore, Think of it as the data layer of CodeDesign, the UI Store will Store the data generated by the user drag interface to ensure that it can be restored on other platforms.

On the other

Utils: A collection of the utility classes used in CodeDesgin.

HTTP Request: a network request library that sends data to the background during operations

Store: local storage. In the early stage, real-time update to the background is not planned. Therefore, in order to ensure that users’ data is not lost, I have done local storage operations to ensure that users’ previous operations can be quickly restored in some special cases.

Data structure design

The design code is as follows

/** * menu group */
export interface MenuGroup {
    name: string;
    key: string;
    children: RenderMessage[];
}

export interface RenderMessage {
    key: string;
    name: string;
    type: string;
    icon: string;
    dom: RenderDOM;
}
/** * DOM data structure */
export interface RenderDOM {
    domType: string;
    type: string;
    class? :string; value? :string; placeholder? :string; isDisabled? :boolean; size? : { rows? :number, cols? :number
    };  // Display the number of lines required for multi-line text boxeschildren? : RenderDOM[];// There may be multiple levels of nesting (of course there may be multiple child nodes)
}
Copy the code

Since the design is based on antD style library, the analysis here shows that ANTD will render the final component through three layers of divs. What we need to do here is to define these three layers of data structures so that our code can be generated.

The core is the definition of RenderDOM, which is the key data structure for rendering the entire DOM structure. It is a tree structure and a multi-fork tree, so when parsing, we need to load DOM nodes according to the hierarchy and order. (DFS algorithm is temporarily adopted for parsing)

The last

With the above preparations completed, we have a preliminary plan for the prototype of a code platform, and we can start developing it next. Here I would like to add that because I am a straight man, I have made some functional extensions based on the design of Ruoyi UI.

The code address

It’s still under development

Github.com/guanjiangta…