Introduction: "Hippocampus Design Middle Platform - Low-Code Engine" will be divided into two chapters to introduce you in detail. Today, we will first focus on the introduction of the project, and communicate with you from the aspects of project background, core advantages, internal R&D process optimization, trial demo, and partition functions, so that you can have a deeper understanding of the various functions of the project. In the following chapters, we will further delve into the project architecture, design thinking, and more.
1 Background of the hippocampus design middle platform project
With the growth of the company's business, many problems will be encountered in the development stage, such as at least 50% of the pages in the B-end system with similar interaction scenarios, resulting in duplicate development costs and iteration costs; The UI vision of each system is inconsistent, and it is difficult for new partners to quickly implement the specification by relying on R&D and UI design. The product is designed with different interactions for similar functions, resulting in inconsistent interactions and duplicate R&D costs.
In response to the above problems, low-code engines came into being. It is a general development framework that deconstructs the commonly used functions of low-code platform systems, divides them into multiple functional modules, and defines corresponding protocols and development paradigms for each module, so that developers can easily customize and develop their own business systems according to their own business needs.
Figure 1 The development process based on a low-code engine
2 Core Highlights
Figure 2 Highlights of the low-code core engine
The low-code engine in the design middle office adopts a flexible system architecture, and its excellent overall architecture provides a high degree of customization freedom, allowing users to choose different modules to build their own exclusive designer like building blocks. In addition, the plug-in architecture makes it easy for users to extend business-related functionality.
In the design middle-end low-code engine, plugins are roughly divided into three categories based on their location: toolbars/plugins/settings, which correspond to the top area, left area, and right area, respectively. toolbars plugins are mainly biased towards tool plugins that do not require a UI or have a relatively simple UI, plugins are business function plugins, which are displayed on the left (or bottom) drawer page, and can be expanded and collapsed or toggled by clicking on it.
These features are like individual building blocks that the user can selectively keep or delete. At the same time, users can also develop their own plugins or tools and install them in the corresponding locations. Designing a mid-office low-code engine gives them the flexibility to decide what business interface they want to develop.
3 Comparison of conventional R&D process and design middle platform
Comparison of the process of "conventional front-end R&D" and "design middle platform", with "standardized construction of design middle platform" as the core, introduces the use process of the design middle platform in business in detail, and explains the advantages and development experience of the use process in multiple dimensions.
Figure 3 Comparison between the conventional front-end R&D system and the design middle-end R&D system
By comparing the four stages of the conventional front-end R&D system and the design middle-end R&D system, it can be intuitively found that standardization, standardization and process can be carried out in the page design, upstream and downstream collaboration, development stage, and construction stage. It can also be found that the efficiency and error rate of the design center are greatly reduced.
- Improve R&D efficiency: Quickly build pages and produce corresponding code by building a platform. From 8 hours to 1 hour on a single page
- Consistency of interactive visual design: By building a platform, the visual and interactive effects of components are standardized, because the development functions cannot be customized, so as to achieve consistency
- Product PRD consistency: By building a platform, the drawing method of product PRD is constrained, so that the product can quickly produce high-reduction PRD
- Team code specification: Improve the development experience with consistent interaction, component precipitation, standardized interface specifications, and direct code file standardization
4 Try the design middle platform (low-code engine) demo
Blocks in the low-code editor mainly contain the following function points:
Figure 4 Introduction to the features of the low-code editor
4.2 Introduction to the block function
4.2.1 Left: Panels and Operation Areas
- Items panel
You can find components and drag them into the editor canvas from there
- Outline panel
You can adjust the structure of the component tree within the page
- Source panel
You can edit the configuration of the page component data
- Out of the code
The code used to build the VUE3 project
4.2.2 Middle: Visualization page editing canvas area
Click on a component to display the property configuration options for the corresponding component in the right panel
Drag and drop to change the order in which the components are arranged
4.2.3 Right Side: Component-level configuration
- Selected components
From the page to the currently selected component position, click the corresponding name to switch to the corresponding component
- Select the configuration of the component
The large category options of the current component include the following subcategories depending on the component type:
- attribute
Set the base property values of the component
- style
The styling configuration of the component, such as the table background color
- event
Events exposed to the outside world by binding components
- Senior
Loops, conditional rendering, and key settings
4.2.4 Practice - Build a list query page
- 创建tableData
- The API is bound to tableData
5 Material construction
Figure 5 Material system construction
Strong building capabilities are indispensable for the support of materials, components, and blocks, and the current support capabilities are as follows:
- First, build a front-end material system, define and unify the front-end development standards, and build a front-end material resource system, including resources such as design and unit testing.
- Second, implement instrumental management, improve the engineering system, unify the front-end development process and technology stack, and ensure the resource reuse rate;
- Third, develop a collaborative process, including a multi-person release process, code review process, version number management, etc
- Last but not least, incremental development is the key to development, as it determines whether the material can be reused optimally once it is finished.
Fig.6. Hippocampus front-end material library documents
Fig.7 Overview of the Hippocampus Material Component tool
6 Summary
This article delves into the low-code engine of the Hippocampus Design Middle Platform, a flexible and efficient development tool that aims to solve the problems of repetitive development, visual inconsistency, and interaction inconsistencies encountered by enterprises in the process of business development. The low-code engine provides developers with the freedom and convenience to customize their business by deconstructing common functions and dividing them into multiple functional modules.
This article focuses on how to build a platform to achieve the consistency of interactive visual design and product PRD. By standardizing the visual and interactive effects of components, the drawing method of product PRD is constrained, which effectively improves the development experience. Functions in the low-code editor, such as the materials board, outline board, source board, and code output, allow developers to build pages and produce code more efficiently.
The low-code engine of the Hippocampus Design Center is a powerful and flexible development tool, which can significantly improve the R&D efficiency and code quality of enterprises, and promote the rapid development of business. With the continuous advancement of technology and the deepening of applications, low-code engines will play a more important role in the future and create greater value for enterprises.
Author of this article
Murray, from the front-end team of Mantu Internet Center.
Source-WeChat public account: Mantu coder
Source: https://mp.weixin.qq.com/s/C9N8gIuR6kKFqnbrCiNPzQ