CN111984235A - Customizable front-end low-code development system and method - Google Patents
Customizable front-end low-code development system and method Download PDFInfo
- Publication number
- CN111984235A CN111984235A CN202010838038.1A CN202010838038A CN111984235A CN 111984235 A CN111984235 A CN 111984235A CN 202010838038 A CN202010838038 A CN 202010838038A CN 111984235 A CN111984235 A CN 111984235A
- Authority
- CN
- China
- Prior art keywords
- code
- renderer
- page
- database
- custom
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000011161 development Methods 0.000 title claims abstract description 43
- 238000000034 method Methods 0.000 title claims abstract description 17
- 238000009877 rendering Methods 0.000 claims abstract description 14
- 238000004891 communication Methods 0.000 claims description 4
- 238000004806 packaging method and process Methods 0.000 claims description 3
- 230000003068 static effect Effects 0.000 claims description 3
- 238000010276 construction Methods 0.000 abstract description 6
- 230000008569 process Effects 0.000 abstract description 3
- 238000013461 design Methods 0.000 description 5
- 230000007547 defect Effects 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 2
- 230000008859 change Effects 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 1
- 230000009466 transformation Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/22—Indexing; Data structures therefor; Storage structures
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/25—Integrating or interfacing systems involving database management systems
- G06F16/252—Integrating or interfacing systems involving database management systems between a Database Management System and a front-end application
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/44—Encoding
- G06F8/447—Target code generation
Abstract
The invention discloses a customizable front-end low-code development system and method, and relates to the technical field of program development. The code generator only generates the code of the user-defined renderer, the data, components and the like of the page are created when the page renderer runs and then transmitted to the user-defined renderer to be used as parameters, and the renderer returns the processed data or components to the page renderer for rendering; the user-defined renderer codes are independently constructed through the micro front-end constructor and are independently deployed in the micro service; the micro front-end constructor also provides a compiling and running environment during development, and programmers can use a common coding and debugging mode to carry out customized code development. The code construction process of the invention does not need to generate the component code of the page, the construction speed is greatly improved, and other front-end codes including the page renderer do not need to be reconstructed and deployed; the method has good development experience and improves development efficiency.
Description
Technical Field
The invention belongs to the technical field of program development, and particularly relates to a customizable front-end low-code development system and a customizable front-end low-code development method.
Background
With the deepening of enterprise digital transformation, more and more enterprises are switched to the development of application software by adopting a more efficient development platform from the traditional pure coding development mode. In the field of application software, the traditional hard code development has the defects of long period, low efficiency, difficulty in multiplexing, difficulty in adapting to change and the like, so that the application software development becomes a consensus in the industry by adopting more efficient tools such as a low-code rapid development platform, an application platform as a service (aPaaS) and the like, and the software development convenience can be improved and the software development threshold is reduced. The front-end field can greatly improve the development efficiency in continuous technical upgrading, engineering, modular development, new grammar of ES6 and the like.
At present, pages of a low-code rapid development platform product in the market are generally fixedly generated according to configuration, and the style, layout, operation experience and implementation limitation of customized service logic are large, and due to the engineering of a front end and the new grammar of ES6, a customized front end code can be operated at an operation end only by compiling and packaging through a tool, so that how to fuse the customized front end code into the configured pages is difficult. To solve these problems, the development methods of the customizable front-end low code of the low code rapid development platform are divided into two categories: one is to generate simple front-end code according to the configuration of the design end, and directly carry out customized modification on the code after a programmer derives the code. The other type is that the front-end code written on line is stored in a database at the design end, and then the code is analyzed and executed when the rendering end acquires the code from the database. The first type of customized front-end low-code development method has the following defects: firstly, a huge amount of code files can be generated, the construction speed is slow, and the deployment efficiency is influenced. Secondly, on the premise of not using the micro front-end technology, the change of the page design means that all front-end codes are recompiled and packaged, and the construction and deployment are extremely inefficient. The second type of development method for customized front-end low-code has the following defects: one is that only some simple codes are used, a third-party library cannot be introduced, a new syntax of the ES6 cannot be developed, and even if the new syntax is compiled in a runtime mode, the performance is seriously affected. And secondly, the debugging is inconvenient, the simple preview can be only carried out at a design end, and the accurate debugging can not be carried out by utilizing the runtime environment. Therefore, it is important to provide a customizable front-end low-code development system and method to solve the above problems.
Disclosure of Invention
The invention provides a customizable front-end low-code development system and a customizable front-end low-code development method, which solve the problems.
In order to solve the technical problems, the invention is realized by the following technical scheme:
the invention discloses a customizable front-end low-code development system which comprises a page designer, a custom renderer, a code generator, a micro front-end code builder, a code warehouse, a database and a page renderer, wherein the page designer is used for designing a page to be customized;
wherein, the page designer: the system comprises a database, a layout component, a data component and a data component, wherein the database is communicated with the database and used for configuring the layout component and the data component of an application page to be designed according to a received page configuration instruction and storing configuration data in the database;
wherein, customizing the renderer: the system comprises a page designer, a front-end code module and a front-end code module, wherein the front-end code module is used for customizing components such as layout and data, and the page designer can assign a created custom renderer for each component;
wherein the code generator: code for generating code for the custom renderer to a code library;
wherein the micro front-end code builder: the system comprises a user-defined renderer code, a description file and a user-defined rendering module, wherein the user-defined renderer code is used for compiling and packaging the user-defined renderer code, and generating a corresponding description file;
wherein the page renderer: and the system is in communication connection with the database and is used for acquiring configuration data of a page to be designed from the database, rendering a graphical interface according to the configuration parameters, and simultaneously rendering a corresponding code resource acquired from the micro service by using a component of a custom renderer, so as to finally obtain a corresponding application page.
A customizable front-end low-code development method comprises the following steps:
s01, the page designer configures layout components and data components for the page;
s02, creating a custom renderer of the customizable front-end code;
s03, configuring a custom renderer for a layout component or a data component needing to customize the front-end code;
s04, saving the configuration of the page designer to a database;
s05, producing codes to a code base through a code generator according to the created custom renderer;
s06, secondary development and debugging are carried out on the custom renderer by the programmer exporting codes;
s07, constructing the custom renderer code by using a micro front-end code builder;
s08, deploying the constructed code as a static resource in the microservice;
s09, the page renderer acquires configuration data from the database to render negative layout components, data components and the like;
and S10, acquiring corresponding code resources from the microservice for rendering by using the component of the custom renderer.
Compared with the prior art, the invention has the following beneficial effects that but not limited to:
1. the code generator only generates the code of the custom renderer, the data and components of the page are created when the page renderer runs and then transmitted to the custom renderer to be used as parameters, the renderer returns the processed data or components to the page renderer to be rendered, and the component code of the page does not need to be generated in the process, so that the front-end code only needs to construct the code of the custom renderer, and the construction speed of the front-end code is greatly improved.
2. The custom renderer code is independently built and independently deployed in the microservice through the micro front-end builder without the need to rebuild and deploy other front-end code, including the page renderer.
3. The code generator can introduce front-end modules such as a page renderer and the like while generating a custom renderer code, the micro front-end builder also provides a compiling and running environment during development, programmers can use a common coding and debugging mode to carry out customized code development, good development experience is achieved, and development efficiency is improved.
Of course, it is not necessary for any product in which the invention is practiced to achieve all of the above-described advantages at the same time.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings used in the description of the embodiments will be briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and it is obvious for those skilled in the art that other drawings can be obtained according to the drawings without creative efforts.
FIG. 1 is a schematic diagram of a customizable front-end low-code development system in accordance with the present invention;
FIG. 2 is a step diagram of a customizable front-end low-code development method of the present invention.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
Referring to fig. 1, a customizable front-end low-code development system of the present invention includes a page designer, a custom renderer, a code generator, a micro front-end code builder, a code warehouse, a database, and a page renderer;
wherein, the page designer: the system comprises a code generator, a code warehouse and a self-defined renderer, wherein the data generator is in communication connection with a database and is used for configuring a layout component and a data component of an application page to be designed according to a received page configuration instruction, notifying the code generator to generate codes, notifying the code warehouse to deploy code resources and storing configuration data, page design metadata and self-defined renderer parameters in the database;
wherein, customizing the renderer: the system is used for customizing front-end codes for components such as layout and data, and the created custom renderer can be assigned to each component in a page designer;
wherein the code generator: the code library is used for generating codes of the custom renderer to the code library;
wherein the micro front-end code builder: the system comprises a user-defined renderer code, a description file and a user-defined rendering module, wherein the user-defined renderer code is compiled and packaged and generates a corresponding description file;
wherein the page renderer: and the system is in communication connection with the database and is used for acquiring configuration data of a page to be designed from the database, rendering the graphical interface according to the configuration parameters, and simultaneously rendering the corresponding code resource acquired from the micro service by the component using the custom renderer, so as to finally obtain the corresponding application page.
As shown in fig. 2, a customizable front-end low-code development method based on the system includes the following steps:
s01, the page designer configures layout components and data components for the page;
s02, creating a custom renderer of the customizable front-end code;
s03, configuring a custom renderer for a layout component or a data component needing to customize the front-end code;
s04, saving the configuration of the page designer to a database;
s05, producing codes to a code base through a code generator according to the created custom renderer;
s06, secondary development and debugging are carried out on the custom renderer by the programmer exporting codes;
s07, constructing the custom renderer code by using a micro front-end code builder;
s08, deploying the constructed code as a static resource in the microservice;
s09, the page renderer acquires configuration data from the database to render negative layout components, data components and the like;
and S10, acquiring corresponding code resources from the microservice for rendering by using the component of the custom renderer.
Compared with the prior art, the invention has the following beneficial effects that but not limited to:
1. the code generator only generates the code of the custom renderer, the data and components of the page are created when the page renderer runs and then transmitted to the custom renderer to be used as parameters, the renderer returns the processed data or components to the page renderer to be rendered, and the component code of the page does not need to be generated in the process, so that the front-end code only needs to construct the code of the custom renderer, and the construction speed of the front-end code is greatly improved.
2. The custom renderer code is independently built and independently deployed in the microservice through the micro front-end builder without the need to rebuild and deploy other front-end code, including the page renderer.
3. The code generator can introduce front-end modules such as a page renderer and the like while generating a custom renderer code, the micro front-end builder also provides a compiling and running environment during development, programmers can use a common coding and debugging mode to carry out customized code development, good development experience is achieved, and development efficiency is improved.
The preferred embodiments of the invention disclosed above are intended to be illustrative only. The preferred embodiments are not intended to be exhaustive or to limit the invention to the precise embodiments disclosed. Obviously, many modifications and variations are possible in light of the above teaching. The embodiments were chosen and described in order to best explain the principles of the invention and the practical application, to thereby enable others skilled in the art to best utilize the invention. The invention is limited only by the claims and their full scope and equivalents.
Claims (2)
1. A customizable front-end low-code development system is characterized by comprising a page designer, a custom renderer, a code generator, a micro front-end code builder, a code warehouse, a database and a page renderer;
wherein, the page designer: the system comprises a database, a layout component, a data component and a data component, wherein the database is communicated with the database and used for configuring the layout component and the data component of an application page to be designed according to a received page configuration instruction and storing configuration data in the database;
wherein, customizing the renderer: the system comprises a page designer, a front-end code module and a front-end code module, wherein the front-end code module is used for customizing components such as layout and data, and the page designer can assign a created custom renderer for each component;
wherein the code generator: code for generating code for the custom renderer to a code library;
wherein the micro front-end code builder: the system comprises a user-defined renderer code, a description file and a user-defined rendering module, wherein the user-defined renderer code is used for compiling and packaging the user-defined renderer code, and generating a corresponding description file;
wherein the page renderer: and the system is in communication connection with the database and is used for acquiring configuration data of a page to be designed from the database, rendering a graphical interface according to the configuration parameters, and simultaneously rendering a corresponding code resource acquired from the micro service by using a component of a custom renderer, so as to finally obtain a corresponding application page.
2. A customizable front-end low-code development method according to claim 1 based on the system, comprising the steps of:
s01, the page designer configures layout components and data components for the page;
s02, creating a custom renderer of the customizable front-end code;
s03, configuring a custom renderer for a layout component or a data component needing to customize the front-end code;
s04, saving the configuration of the page designer to a database;
s05, producing codes to a code base through a code generator according to the created custom renderer;
s06, secondary development and debugging are carried out on the custom renderer by the programmer exporting codes;
s07, constructing the custom renderer code by using a micro front-end code builder;
s08, deploying the constructed code as a static resource in the microservice;
s09, the page renderer acquires configuration data from the database to render negative layout components, data components and the like;
and S10, acquiring corresponding code resources from the microservice for rendering by using the component of the custom renderer.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010838038.1A CN111984235A (en) | 2020-08-19 | 2020-08-19 | Customizable front-end low-code development system and method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010838038.1A CN111984235A (en) | 2020-08-19 | 2020-08-19 | Customizable front-end low-code development system and method |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111984235A true CN111984235A (en) | 2020-11-24 |
Family
ID=73434843
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010838038.1A Pending CN111984235A (en) | 2020-08-19 | 2020-08-19 | Customizable front-end low-code development system and method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111984235A (en) |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112488796A (en) * | 2020-12-11 | 2021-03-12 | 广州云徙科技有限公司 | Shop decoration method and system |
| CN112650475A (en) * | 2020-12-21 | 2021-04-13 | 广州云徙科技有限公司 | Software low-code development system and development method combined with middle platform architecture theory |
| CN114115883A (en) * | 2022-01-26 | 2022-03-01 | 广州云徙科技有限公司 | Method for quickly constructing front-end application by using middle station service capability |
| CN114968751A (en) * | 2021-02-24 | 2022-08-30 | 中国联合网络通信集团有限公司 | Program debugging method and program debugging device of code-free development platform |
| CN115268861A (en) * | 2022-06-21 | 2022-11-01 | 北京志凌海纳科技有限公司 | Introduction method, system, equipment and storage medium of custom component |
| CN115495081A (en) * | 2022-11-18 | 2022-12-20 | 深圳代码兄弟技术有限公司 | Method and system for generating and loading low-code page component based on JSON data |
| CN117435836A (en) * | 2023-10-25 | 2024-01-23 | 上海宽睿信息科技有限责任公司 | Front-end page splicing method and system based on centralized management of database |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20080235661A1 (en) * | 2007-03-21 | 2008-09-25 | Computer Associates Think, Inc. | System and method for using annotations to automatically generate a framework for a custom javaserver faces (jsf) component |
| CN107368487A (en) * | 2016-05-12 | 2017-11-21 | 阿里巴巴集团控股有限公司 | A kind of page assembly Dynamic Distribution method, apparatus and client |
| CN109101300A (en) * | 2018-06-14 | 2018-12-28 | 腾讯科技（深圳）有限公司 | A kind of page rendering method, apparatus and terminal |
| CN110489116A (en) * | 2018-05-15 | 2019-11-22 | 优酷网络技术（北京）有限公司 | A kind of rendering method of the page, device and computer storage medium |
| CN110825362A (en) * | 2019-11-04 | 2020-02-21 | 广东道一信息技术股份有限公司 | Low-code application software development system and method |
| CN110851134A (en) * | 2019-11-08 | 2020-02-28 | 广东道一信息技术股份有限公司 | Low-code page design device and page design method |
-
2020
- 2020-08-19 CN CN202010838038.1A patent/CN111984235A/en active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20080235661A1 (en) * | 2007-03-21 | 2008-09-25 | Computer Associates Think, Inc. | System and method for using annotations to automatically generate a framework for a custom javaserver faces (jsf) component |
| CN107368487A (en) * | 2016-05-12 | 2017-11-21 | 阿里巴巴集团控股有限公司 | A kind of page assembly Dynamic Distribution method, apparatus and client |
| CN110489116A (en) * | 2018-05-15 | 2019-11-22 | 优酷网络技术（北京）有限公司 | A kind of rendering method of the page, device and computer storage medium |
| CN109101300A (en) * | 2018-06-14 | 2018-12-28 | 腾讯科技（深圳）有限公司 | A kind of page rendering method, apparatus and terminal |
| CN110825362A (en) * | 2019-11-04 | 2020-02-21 | 广东道一信息技术股份有限公司 | Low-code application software development system and method |
| CN110851134A (en) * | 2019-11-08 | 2020-02-28 | 广东道一信息技术股份有限公司 | Low-code page design device and page design method |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112488796A (en) * | 2020-12-11 | 2021-03-12 | 广州云徙科技有限公司 | Shop decoration method and system |
| CN112488796B (en) * | 2020-12-11 | 2024-04-19 | 广州云徙科技有限公司 | Mall decoration method and system |
| CN112650475A (en) * | 2020-12-21 | 2021-04-13 | 广州云徙科技有限公司 | Software low-code development system and development method combined with middle platform architecture theory |
| CN112650475B (en) * | 2020-12-21 | 2021-10-22 | 广州云徙科技有限公司 | Software low-code development system and development method combined with middle platform architecture theory |
| CN114968751A (en) * | 2021-02-24 | 2022-08-30 | 中国联合网络通信集团有限公司 | Program debugging method and program debugging device of code-free development platform |
| CN114115883A (en) * | 2022-01-26 | 2022-03-01 | 广州云徙科技有限公司 | Method for quickly constructing front-end application by using middle station service capability |
| CN114115883B (en) * | 2022-01-26 | 2022-06-03 | 广州云徙科技有限公司 | Method for quickly constructing front-end application by using middle station service capability |
| CN115268861A (en) * | 2022-06-21 | 2022-11-01 | 北京志凌海纳科技有限公司 | Introduction method, system, equipment and storage medium of custom component |
| CN115495081A (en) * | 2022-11-18 | 2022-12-20 | 深圳代码兄弟技术有限公司 | Method and system for generating and loading low-code page component based on JSON data |
| CN117435836A (en) * | 2023-10-25 | 2024-01-23 | 上海宽睿信息科技有限责任公司 | Front-end page splicing method and system based on centralized management of database |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111984235A (en) | Customizable front-end low-code development system and method | |
| CN110376959B (en) | Soft PLC configuration software generation system based on FPGA platform | |
| CN106293664A (en) | Code generating method and device | |
| CN104714788B (en) | A kind of method and device that software installation packet automatically generates | |
| CN111027266A (en) | Method, system, storage medium and terminal for designing and dividing multiple FPGAs | |
| CN110955410A (en) | Automatic code generation method, device, equipment and medium | |
| CN101667134A (en) | Method for constructing compiling system, compiling system and constructing device thereof | |
| CN110007926B (en) | Language conversion method and device | |
| CN108509193A (en) | A kind of system using visualization component encapsulation function | |
| CN110704364A (en) | Automatic dynamic reconstruction method and system based on field programmable gate array | |
| CN109491652A (en) | The generation method and device of program's code file, electronic equipment | |
| CN115185539A (en) | Method, device and storage medium for generating executable dynamic link library file | |
| CN111638870A (en) | Front-end development base platform based on acts and reduce | |
| CN114895920A (en) | Operator fusion method and device of Transformer network | |
| CN114371850A (en) | Management method for project construction compiling and code development | |
| CN111596970B (en) | Method, device, equipment and storage medium for dynamic library delay loading | |
| CN115221720B (en) | Combined simulation method, equipment, medium and system of nuclear energy equipment | |
| CN111190587A (en) | Method and system for automatically generating engineering front-end code based on JDBC | |
| CN116339696A (en) | System and method for extensible automatic generation of cross-platform multi-language interface | |
| CN115237390A (en) | Relay protection device logic diagram code generation method and device and storage medium | |
| CN112860316B (en) | Kernel and BSP transplanting method of openEular open source system | |
| CN114064218A (en) | Mirror image generation method, system, medium and application for machine learning component | |
| CN107657038B (en) | Database quick reading method | |
| CN111367512B (en) | Method and device for creating Android library module dependency relationship in application development | |
| CN112241268A (en) | Keil engineering compiling method, system and equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |