In the process of promoting the online and standardized new business, it is necessary to add the first release material review CMS and embed it in the marketing center to provide a more convenient scoring and review experience for business operations. During the technical selection process, the new product team learned that the Waterdrop low-code platform has the ability to visually build CMS, built-in rich capabilities, and can build CMS efficiently and quickly, such as forms, tables, permission control, micro front-end, etc. The product form is highly consistent with the business requirements, the design style is consistent, and it supports micro front-end by default. In terms of operation and maintenance deployment, it can almost achieve zero cost, which is very convenient to embed the product in the marketing center. After technical research and comparison of all the development needed for 40+ people, the team chose the more efficient Waterdrop low-code as the implementation method for CMS and completed the entire joint construction and construction process in 6 days. This article takes the construction of the marketing center-new product first release material review CMS (hereinafter referred to as new CMS) as a best practice and introduces how to use the Waterdrop low-code platform from scratch.

01

Waterdrop — CMS rapid solution

Waterdrop has the advantages of both programming-oriented and low-code, which complement each other and provide developers with a comprehensive solution covering all aspects of the middle and back-end management system. The main highlight features include:

Waterdrop feature highlights

Below, we will guide you to build the new marketing center CMS as a best practice from the perspective of developers, step by step from requirement review to component development, to page construction, and finally publish the CMS online.

Final effect of the new CMS

02

New CMS requirement analysis

Understanding, first of all, MCube will judge whether to obtain the latest template from the network based on the template cache status, and then load the template after obtaining it. During the loading phase, the product will be converted into the structure of the view tree, and after the conversion is completed, the expression engine will parse the expressions and obtain the correct values. The event parsing engine will parse the user-defined events and complete the event binding. After the parsing and assignment and event binding are completed, the view will be rendered, and the target page will be displayed on the screen

After sorting out the requirements, the following characteristics of the new marketing center CMS application are analyzed:

Complex business:The correlation between modules is strong and the complexity of data is high

Multiple interaction scenarios:There are many page jumps and data transmission needs between pages, and there are many interaction needs between modules

High UI fidelity:It needs to comply with the design language of the marketing center and maintain a consistent design style

Micro front-end combination:The new CMS is not used independently, but embedded in the marketing center as a sub-application

Short development cycle:3 pages (6 forms, 4 tables), from development to delivery, only 6 days are available

In addition to feature analysis, the author also sorts out pages and components. Due to the customization scenarios of business and interaction, there are still 4 business components that need to be customized for development. Fortunately, Waterdrop has co-construction capabilities, and developers can customize business component sets and import them into the system.

Requirement Analysis

03

Component Co-Development

Understanding, first, MCube will judge whether it is necessary to obtain the latest template from the network based on the template cache status. After obtaining the template, it will load the template, during which the output will be converted into a view tree structure. After conversion, the expression engine will parse expressions and obtain the correct values, and the event parsing engine will parse user-defined events and complete event binding. After parsing assignment and event binding, the view will be rendered, and the target page will be displayed on the screen.

After requirement analysis, the next step is the process of customizing business components. Developers can perform related customization development after downloading the custom component template library.

The template includes code templates for component development, common dependencies, debugging tools, and commands. After development, you can publish to jnpm via commands. This way, you can install the corresponding component set on the plugin management of the Waterdrop workbench, and after installation, it can be used on the construction page.

Custom Component Development Process

1. During local development, you can debug the interface of form and table components while coding.

2. After the custom component set is developed and successfully published to the jnpm repository, it can be installed and used on the Waterdrop workbench.

3. After installation, the components can be used by dragging and dropping on the construction page.

So far, all the components needed on the page have been developed. Next, let's move on to the page construction phase.

04 Page Visual Construction

The page construction process is very simple. Waterdrop provides a form and table designer, where you can adjust the layout and style of components to the UI design draft by simply dragging and dropping.

To reduce the number of operations users need to perform on adjusting layout and modifying styles, the Waterdrop team, in collaboration with the UI design team of the Basic Business Experience Department, has established visual standards for the mid and back-end and implemented them on the low-code platform, making it possible to achieve the desired style with just one drag and drop.

Waterdrop Form Designer

In addition to interface construction, Waterdrop also supports complex logic configurations such as form联动 and asynchronous data fetching. Developers can flexibly switch to the Schema interface for various logic configuration writing. In terms of form validation, it has built-in validations such as url, https, image size and dimension, array upper and lower limits, and dozens of commonly used validations. If the built-in validations are not sufficient, you can either fill in a custom regular expression or configure other complex validations through Schema.

Waterdrop Form Designer: JSON Editing Capability

05 Front-end Event Orchestration

In addition to the interface layout, it is also necessary to handle business logic and interaction jumps. Here, you can use the event orchestration feature of the Waterdrop workbench to write JS actions and bind them to various events exposed by the modules.

Although the form component itself has provided basic validation capabilities in the new product submission form, some personalized validation logic still needs to be performed before the form submission. Here, you can achieve this by writing JS actions.

In addition, some structural transformation of the data collected by the form needs to be done to meet the definition of the background interface document. You can bind the corresponding JS action to handle the data transformation logic in the 'Before Form Submission' event in the event configuration.

Event Binding and Action Writing

06 Interface and Data Source

After the interface construction and event logic arrangement are completed, you can perform joint debugging with the background interfaces and connect the interface and data source. Unlike common low-code platforms, DripWorks not only provides front-end construction but can also connect data sources through FaaS.

Interface developers can free themselves from the trouble of operation and maintenance deployment details through FaaS and generate the desired functions by simply configuring with predefined templates and connect to data sources such as DUCC. It can create various CRUD interfaces including NodeJS and JAVA very quickly.

In the scenario of the new CMS, there is already corresponding background service, so after simple modification of the interface input and output parameters, you can directly bind the corresponding interface URL. In this way, the built module is successfully bound to the interface provided by the background service.

Binding Interface Service

07 Permission Control

After the development and interface joint debugging of the page are completed, it is necessary to customize the permission control for the CMS application.

In terms of permission control, Drop provides comprehensive role permission control capabilities, which can set different roles and allocate corresponding menus, pages, and functional permissions to them.

In addition to providing page-level view permission control for users, it also provides backend callable API services for more refined permission control.

Role and Permission Control Role and Permission Control

08 Free Operation Cloud Construction and Deployment with Version Management

After the construction is completed, you can click the build and publish button to go online. Drop will automatically generate the source code, perform cloud construction, and finally push the construction products to the JD Front-end Publishing Platform Pubfree for deployment. The advantage of this is that the completed construction products will be solidified and will not be affected by platform changes. At the same time, you can also obtain the source code for secondary development or private deployment, which is better for the stability and flexibility of CMS and other types with low change frequency but high business complexity.

At the same time, Drop also provides three environments: test, pre-release, and production. Developers can choose different historical versions according to the situation and switch between the three environments in seconds.

Version Management

Click the link address after publishing, and you can jump to the online application, thus obtaining the final CMS. By default, the products built by Drop comply with the Micro-App micro-frontend sub-application specification and can be directly integrated with micro-frontend frameworks such as the marketing center. In this way, the entire process of construction, development, and deployment has been completed.

09 Summary

Through the practice of the new CMS application, it can be seen that Drip not only supports drag-and-drop visual construction of CMS systems, but also has flexible and in-depth component co-construction and logic extension capabilities, which can meet the business requirements of different CMS systems. The built-in permissions, components, menu routing, and construction and deployment also facilitate and reduce redundant development, providing obvious help to efficiency. However, there are still many areas that need to be improved, such as the richness of various functional module contents, learning and entry thresholds, etc. The Drip team will also adhere to the spirit of continuous improvement, guided by user needs, and continue to strengthen the ease of use and extensibility of the platform.

At the same time, Drip also opens up and iteratively improves the excellent underlying functions in the open source construction, including forms, tables, and more, welcome everyone to experience and provide valuable suggestions ~!

Related Resources

• Drip Form Open Source Capabilities:
• https://github.com/JDFED/drip-form
• Drip Table Open Source Capabilities:
• https://github.com/JDFED/drip-tabl

Author: Huang Hao