The low-code craze has been popular a few years ago, from the cross-platform collaboration method of Ali Dingding, to the approval process on Feishu, and the templates for form approval and voting that we are currently exposed to, these are all about low-code. Method to realize. With the continuous development of enterprise digital transformation and cloud computing, low-code platforms have once again become a hot topic and are discussed by more and more people.
The topic shared today is a brief introduction to low-code platforms, mainly from the following four aspects:
- Low-Code Platform Overview
- Low-code, no-code
- The technical route of the low-code platform
- Application of Visual Drag and Drop Platform
Low-Code Platform Overview
The low-code development platform, the English full name of "Low-Code Development Platform", referred to as LCDP, is an application platform that can quickly generate new applications with a small amount of code or zero code, and realize the rapid delivery of business applications. Low-code platforms in a broad sense include low-code and zero-code, both of which belong to APaaS (Application Platform as a Service).
The concept of low code first appeared in the 1980s, and in the course of nearly 40 years, the entire development experience is shown in the following figure:
△ (the picture comes from the Internet)
The first stage is the exploration period, mainly based on the fact that in the 1980s, American companies and laboratories began to study the field of visual programming of programs, and made the 4GL "fourth generation programming language", which was later derived into VPL (Visual Programming Language Visualization). Programming language).
The second stage is the development period. In 2014, the concept of "low-code/no-code" was formally proposed by the research institute Forrester Research.
The third stage is the outbreak period. In 2018, the Dutch company Mendix was acquired by Siemens for $700 million, and the American low-code unicorn company Outsystem received $150 million in financing. This acquisition event and the occurrence of financing events brought the low-code market into the vision of the capital side, and the low-code market began to enter an explosive period.
Low-code platforms replace programmers developing thousands of lines with complex code and syntax. Its role is to allow developers and business people to use the platform in a "drag and drop" way to create complete applications. At the same time, it breaks through the complexity of communication between traditional businesses and the characteristics of long delivery time, enabling continuous development.
Low-code, no-code
Low-code platforms include low-code and no-code, the differences between the two are as follows:
△ (the picture comes from the Internet)
- No code: Mainly for business personnel, business personnel with zero development experience can quickly build various applications without writing code by dragging and dropping. No-code is more suitable for applications in single-point scenarios, and platform applicability is higher than low-code.
- Low-code: mainly for developers, through automatic code generation and visual programming, you can quickly build various applications with only a small amount of code. Low-code has a high market share and is suitable for building interactive applications in complex scenarios. Platform flexibility is better than no-code.
But in essence, both low-code and no-code can lower the development threshold, quickly respond to business needs, and improve development efficiency.
Next, let's take a look at the specific low-code platform technology route.
The technical route of the low-code platform
Because the low-code platform is derived from the visualization, modularization and integration characteristics of the Integrated Development Environment (IDE), and according to the use of the target audience, it can be roughly divided into two lines: the first is business reuse , mainly including application development platform, smart form, SAAS aggregation, characterized by complete separation of data and logic, independent model-driven, suitable for developers. The second is the development tool type, which mainly includes online IDE, DSL development framework, and component code base. It is characterized by a form-driven integration of data and storage structure, which is suitable for business personnel.
△ (the picture comes from the Internet)
A technical route for developers
Let's first look at the technology roadmap model-driven for developers. Model the functions involved in the software by model-driven, and then take the application development platform as the core, carry various development tools and complex logic, and visualize them. And then supplemented with a small amount of code, it can be used as the core of the technology middle platform to help developers quickly produce a complete set of systems that meet the needs of enterprises. Examples of specific processing scenarios are as follows:
Developers operate through the left and right sides of the figure. On the left are some specific components, which are dragged into the canvas in the middle. The blocks in the figure are independent of each other, and they need to be associated with the grammar on the right to generate the required scene application, which is a model-driven approach.
Technical route suitable for business people
This route is a non-IT mode, with form-driven data as the core, and business analysis and design are carried out by dragging and dropping data tables. In order to completely de-IDE, build program logic according to the process like building blocks. It is suitable for completely zero-based personnel, such as personnel administration for data filing, OA approval, sales staff customer management, etc.
Examples of processing scenarios are as follows:
On the left is the drag and drop component, in the middle is the canvas, and on the right is the edit property. We arrange events on it by dragging the form on the left for simple data collection. On the right is the data processing of the form, such as settings such as title, width, and required lines. It is suitable for business personnel to operate and fill in data forms and quickly generate the data collection they want. This is a form-driven method.
For products of this type of technical route, Paiyun has developed a set in 2020. Next, we will take a look at the specific application scenarios of form-driven through Paiyun low-code products.
Application of low-code visual drag and drop platform
The product uses a drag-and-drop method to generate the required forms. After the form is generated, the display panel will take out the json data included in the form array, and then use it to identify the order of components to compile and display. The product page structure is as follows:
△ Product page structure
Editor implementation ideas
The editor implementation ideas of this product are as follows:
First, maintain the data in the editor using the array componentData .
Second, drag the component to the canvas for mobile layout through drag and drop events. Of course, to make a component draggable, you need to add the draggable attribute to it, and there are two key events when dragging the components in the component list to the canvas:
- dragstart event
- drop event
The dragstart event , which is triggered at the beginning of dragging, is mainly used to pass the dragged component information to the cloth. The following figure is the sample code:
The drop event is triggered at the end of the dragging, and its main function is to receive the component information of the dragging. The sample code is as follows:
The new component data is then added to componentData using the push() method. For example, the VLE framework used by Paiyun is to identify the components we want through attributes. Specifically, the component V-item is the width of the text data. You can bind the upper and lower data through its corresponding attribute value, and fill the data into the array.
The component data is as follows:
Finally, we use the v-for instruction to traverse the componentData, mainly through the is attribute to identify which component is really to be rendered, and render each component to the canvas one by one. For example, the component data to be rendered is { component: 'v-text' }, then <component :is="item.component" /> will be converted to <v-text />.
The core code for editor rendering is as follows:
After all is completed, let's take a look at the whole. If the canvas is set to relative positioning position: relative, and then each component is set to absolute positioning position: absolute, you can move only by listening to three events. The three events are: :
- Mousedown event, when the mouse is pressed on the component, record the current position of the component, that is, left and top in css.
- In the Mousemove event, each time the mouse moves, the current latest left and top are subtracted from the first left and top to calculate the moving distance, and then change the component position.
- Mouseup event, the movement ends when the mouse is raised.
The above is the overall implementation idea of the compiler.
Talking about the future of low-code platforms
According to market analysis by consulting firm Gartner, in 2023, more than 50% of the world's large and medium-sized enterprises will use low-code application platforms as one of the main occupation application platforms. Low-code app development is expected to account for more than 65% of total app development by 2024. This begs two questions: Will traditional software development be replaced? Is low-code the future?
In reality, low-code development will not replace traditional software development, but it will change software development in certain areas, changing those repetitive and inefficient businesses, which means that companies don't need to hire a lot of developers for this kind of business personnel, but more professional software developers are arranged to face the needs of customers and complex and unique software development problems.
Although low-code development platforms can significantly improve development efficiency compared to native development models, they are especially suitable for enterprise application scenarios with rapid business changes, limited budgets, and tight development time; however, low-code platforms also have obvious limitations, at least for now. That said, it's mostly used to build enterprise software. Because this kind of software architecture has certain rules, but low-code things that are more deeply interactive in software development such as entertainment and social networking are still impossible to achieve.
So I don't think low code is the future, it's just part of the future.