Due to the length of the report, it is divided into three parts: 01 background research – 02 Links, architecture and difficulties – 03 Industry achievements display. This is the first part, which introduces the front-end visual construction from four dimensions (What, Who, Why and How).
👨🏽💻 : RECENTLY, I had an opportunity to dig deeply into the field of visual construction and make a small report. Although I have never done such a thing in my own business, IT does not prevent me from sorting out some data for you from the perspective of a researcher.
This report probably took a total of two or three days. After reading these three reports, you will not be able to complete a visual construction system immediately, but at least you will be able to appreciate the progress and appearance of visual construction.
Visual construction covers a lot of content, and the more you go into it, the more you can find that each point is a very complicated research proposition. The author himself is also constantly improving this small research.
0. Some prior knowledge
The granularity of common reusable code snippets
In terms of the granularity of reusable snippets, the concepts we commonly encounter are as follows:
Base Component, Business Component (block/widget), template (page body)
- Basic components, such as fine-grained components completed by major component libraries,
Button\Input\FormAnd so on. - Business components: According to the business scenarios of different projects, there are some large-granularity components that can be reused but are not enough for general use. We package them as business components.
- Template, the largest granularity of components, such as active page, form page template, background management page template, data visualization template, these are a large number of business practices, proven reusable page main architecture
Feibing gives a more detailed reference chart for granularity, where business components can also be distinguished as widgets and base components:
For the first two, we can use component libraries and business widget libraries to form a common repository of code snippets, while templates can also be managed by GUI (graphical user interface, also known as visual management platform) to manage common templates we encounter in business.
Among template building platforms, Ant Design Landing should be a typical and well-known solution.
It is a quick build solution for the product front page, including rich templates and templates corresponding modules, as well as an online editor.
Here is a screenshot of the template visual management platform completed by the political Cloud team that I think is very good, as follows
1. What is visual scaffolding?
Visual build refers to a graphical interface, through a series of editing operations, in a very short time to complete a complex page and publish online.
Visual scaffolding is a tool, a scaffold, a business accelerator and a platform for creative production.
Visual construction is the front-end superstructure of the efficient use of components. As a huge visual front-end application, it is built on a large number of front-end infrastructure (such as code specifications, scaffolding, component libraries, frames, etc.).
The following diagram describes the specific position of visual scaffolding at the technical development level and serves as an architectural example of visual scaffolding.
2. Who is the target of Who visual construction?
Who to face is a key question:
- If you’re building a marketing page or product home page, the user is usually a non-developer, and the overall visual solution will be closer to no-code, which is what we call zero code.
- If you are targeting the middle and background page building and the user is the developer, the overall visual solution will be more low-code, i.e. low code.
Although the ultimate goal is zero coding for all pages, some customization is required for scenarios where the technical and business logic is complex.
3. Why do visual construction?
With the continuous development of the company’s business, marketing activities, advertising, page revision and other needs are multiplying day by day, relying on pure manual manual code has been unable to keep up with the growth rate of demand. Work overtime? Hiring? It’s not smart enough, it’s not front-end enough, and efficiency becomes the key. How to improve efficiency? Where to start? That has to mention is the front-end effect – visual building system.
Visual scaffolding is one of the most effective ways to reduce duplication and release productivity when organizations reach a certain size.
Low code enables business people who do not understand code to become so-called Citizen Developers, filling the growing professional talent gap while enabling the ultimate BizDevOps of deep collaboration between business and technology.
For traditional developers, in the actual business development process, they should pay attention to both business complexity and technical complexity, while low code platform (visual build) is to shield technical details as much as possible and transfer most of the technical complexity, thus reducing the burden of line of business development.
Summarize the goals to be achieved by front-end visual construction:
- Fast business delivery
- Reduce business development costs
The preliminary understanding of the vision of front-end visual construction can be as follows:
Mobilize all the non-front-end development manpower, release the workload of front-end development, so that everyone can participate in the page building, improve the delivery efficiency of the project.
Of course, the future of visual construction is far more than this, such as Serverless, DevOps full link through, combined with AI applications.
In addition, there are some “why” questions for users to discuss: If developers or non-developers don’t want to use low-code platforms, why?
-
Low code platforms have limited capabilities
According to the current low-code platform products, everyone’s application scenarios and maturity are very different, the specific value of the business scenario and frequency of use to consider this matter. If it’s just a low-code platform that uses templates to do business, it doesn’t need to be particularly sophisticated in itself, just able to quickly produce liveable promotional pages. If it’s a mid-back platform that involves a lot of business logic, low code also helps us reduce a lot of rework and let developers focus on business logic.
-
A low-code platform is like a toy, and I don’t understand its internal logic, nor can I trust the quality of its output
When the browser first came out, people did not say that they would actively understand the operation mechanism of its kernel, so the key is whether it can be used, used happily, used safely, which requires us to continue to establish data collection and analysis. In addition, security compliance and vulnerability risk should also be considered in the development process of low-code platforms. We can let people use them more, mobilize users to help us find loopholes, and establish a security mechanism to prevent malicious attacks.
-
Is a low-code platform easy to maintain?
Mature, low-code platforms provide well-regulated interfaces, complete build release chains, quality assurance systems, and simplicity of operation. If even the product manager can maintain it all the time, as a developer there is nothing to worry about.
4. How to do visual construction?
Basic idea: Start by calling a template as a skeleton, then control component properties to make the rough page look consistent with the business hi-fi map with a few code tweaks, and finally plug in the data interface to enter the build, test, and publish process.
The aliyun native technology team listed three core capabilities that the low-code platform needs to achieve:
In order to achieve such a capability dimension or realize such a core capability, many levels of support are needed, such as tool chain, material platform, engineering suite, interface arrangement, etc. The following shows a picture of Ali Mom’s product family, you can have a glimpse of it.
The specific architecture layer and some technical difficulties in the field of visual construction will be introduced in the second research report.
If you don’t want to worry about so many layers of architecture and just want to quickly build a visual prototype, this technical article from Pinecone Travel Engineer should help you
# Reference article
A lot of materials here are from the lecturers’ PPT materials of the early Chat conference that I participated in. I have made some screening and integration, and added my own analysis and charts. I also welcome you to pay attention to this conference full of goods.
Here are some other public articles or websites for reference:
- Visual Construction System of Front-end Engineering Practice (1)
- Visual Building System of MPM Store — Element Design
- Github – awesome-lowcode
- Ali Cloud Native – What is Low-code?
- Wiki – Low code development platform
- “Tencent-alloyteam-technical Essentials of Page Visual Building Tool”
- This is the Ice Material