Low code development definition
Low-code development is a development model that uses a graphical user interface to configure and create application software, instead of relying on handwritten code as the traditional model. Correspondingly, the software that provides developers with such low-code development functions is called a low-code development platform (LCDP). Developers with low-code development models usually do not need to have very professional coding skills or coding skills in a specific field. Instead, they can achieve professional code output through platform functions and constraints.
From the definition, we can see that the working method of low-code development mainly relies on operating the graphical user interface, including dragging and dropping controls, and modifying the configuration of the editable area. This visual development method can be traced back to the earlier Dreamwaver period. With the increasing complexity of front-end projects, this method no longer meets the needs of modern projects, so it is gradually replaced by more professional engineering development models.
Development approach
However, the need to quickly generate project code has never disappeared. People have slowly found two ways to achieve this goal:
One is to find relatively fixed product forms, such as company introductions, product lists, event pages, etc., in highly customized scenarios, based on experience summaries, and open a small number of editing entries so that non-professional developers can also use them. The code-free development introduced in the next lesson is mainly for such scenarios.
The other type is the opposite. Following the idea of early visual development, try to use componentization and data binding as the basis, through abstract syntax or IDE to achieve a higher degree of freedom, higher interaction complexity upper limit page construction process. This kind of project development method usually requires a certain amount of development experience and coding ability, but compared with the ordinary coding development method, the overall efficiency is improved by operating more visualization tools, so it is called low-code development.
In actual scenarios, especially commercial low-code platform products, they often provide a combination of the above two development methods.
Low-code development based on writing JSON
When we examine the final presentation of the front-end part of a project, we can find:
The front-end part of a project essentially presents different pages connected by routing. The goal of front-end development is to display and interact with the final output page.
If you have learned the basic principles of browsers, you will know: The content of each page in the browser ultimately boils down to DOM Tree + Style + Dynamic Logic.
In today's component-based development, a standard-defined component includes a DOM subtree and style style with specific functions. Therefore, the content of the page can be defined as: Component Tree + Dynamic Logic.
The cut-in logic for low-code development based on JSON-Schema is:
In certain scenarios, such as adding, deleting, modifying, and checking pages in the development process, most of the code manually written by the front-end is modeled.
The page component structure template and the code organization of the corresponding data model can be replaced with a more efficient JSON syntax tree description.
By formulating a JSON grammar schema (JSON Schema) for writing, and encapsulating a runtime tool set that can render the corresponding JSON grammar tree, development efficiency can be improved and development technical requirements can be reduced.
The efficiency of writing JSON development
The efficiency of writing JSON syntax tree development is reflected in:
Because only JSON is written, and a lot of technical details (build, framework, etc.) required for front-end development are hidden, the coding requirements for developers are reduced. Even non-professional developers can complete the corresponding pages according to examples and documents Development.
Since only JSON is written, a large amount of auxiliary code is integrated inside the tool, which reduces the amount of code that needs to be generated as a whole.
The common business components used by the middle and back-end systems can be abstracted, and then sample pages or sample components can be used for users to choose.
Disadvantages of writing JSON development
But on the other hand, this method also has some shortcomings:
Input efficiency: From the description of the component structure alone, the amount of code described using JSON is more than that of the JSX syntax of the same structure (see sample code 07_low_code). For experienced front-end developers, it is usually not the first time to feel Efficiency improvement.
Learning and memory cost: Due to the introduction of the new JSON syntax scheme, the learning cost of getting started is inevitable for front-end developers, back-end developers or non-professionals. In addition, different components have different attributes, which should be used flexibly in the actual writing process, which is also a test of memory. Repeatedly reviewing documents will cause a decrease in efficiency (for this problem, an optimization solution is to use the option function of IDE Snippets to generate corresponding grammatical prompts).
Reusability and maintainability: In the case of multiple pages with reusable business components, in the JSON writing mode, it is often necessary to manually copy to the JSON of each page, sacrificing the maintainability of the reused components. In addition, for pages with complex functions, the corresponding JSON length will also make the maintenance experience not so good.
Difficulty in troubleshooting: This problem involves people. If a non-professional person is engaged in the JSON development process, when a problem is encountered, it may hinder how to troubleshoot. Therefore, additional professionals are usually required to provide technical support.
Low code development based on visual operating platform
The visual low-code operation platform turns the process of writing JSON into drag-and-drop component and debugging property configuration, as shown in the figure below, this interaction method is more intuitive and friendly for users, and development efficiency will be higher.
Basic usage of the visual operation platform
Most of the visual operating platforms divide the interface layout into three areas: the component selection area on the left, the preview interaction area in the middle, and the attribute editing area on the right. The arrangement of these three areas corresponds to the operation process of user-generated pages:
First, select the component in the left panel.
Then, drag into the middle preview area and place it in the appropriate container block.
Finally, debug the newly moved component properties in the right panel.
After the debugging is completed, the loop operation of the next component is performed until the entire page is built.
Factors affecting the production efficiency of the visualization operating platform
Generally speaking, with the same number of components, the output efficiency of writing JSON depends more on the technical proficiency of the developer who writes the page. But this is not the case when using a visual operating platform: we will see that many aspects of the platform itself will directly affect the output of users:
First of all, the completeness of the platform directly determines the upper limit of user output: it is impossible for developers to use components that are not displayed in the component area on the platform, nor to create attributes that do not exist in the editing area. This forces platform developers to display all types of components as completely as possible, and to obtain all the attributes and methods that can be edited by defining component type descriptions. Including user interaction and the impact of data on components, these require the platform to be provided to users in an appropriate way.
Secondly, the logical consistency of the platform determines the quality of user output: in the organization of the code, different components cannot be combined arbitrarily, and the wrong combination may lead to abnormal display and function. If the platform simply lists all the components and does not impose restrictions on the rules, it may lead to unexpected output results for users during use. Therefore, platform developers need to have a complete set of component association tables and reflect them in the interactive presentation.
Finally, the ease of use provided by the platform determines the productivity of users: although most low-code platforms provide similar regional operation logic, it is often the control of many details that really affects the efficiency of users. For example, compared to simply relying on the cursor to select components, the method of providing a node tree in the sidebar can greatly reduce misselection; compared with simply displaying all components, appropriate classification, and filtering when selecting specific components can be added Some of the components can reduce user search time and possible errors at the same time; some platforms provide the function of operating stack playback, which can reduce the repair cost after user misoperation, etc.
Low
-code developed products There are many low-code developed products, including commercial products such as Kony, OutSystems, Mendix, Appian, iVX (domestic), etc., as well as open source products such as Ali Feibing, Baidu Amis, Shell River Map, Vvvebjs, react-visual-editor, etc. I won’t introduce them one by one here. If you’re interested, you can search for it further.
to sum up
This article introduces the concept of low-code development and its basic application scenarios, and also understands the two basic development modes of low-code development: based on writing JSON and based on a visual operating platform.
The former abstracts the ordinary project development process, changing the writing of codes for different functional modules to only writing the description of the component syntax tree. This method reduces the technical requirements of users to a certain extent and improves the efficiency of development, but In some respects it is still not ideal. The platform-based development model relatively solves some problems in the JSON mode, but it is not easy to build a platform with complete functions, self-consistent use logic, and good interactivity.