Water drop low-code construction - 6 times the efficiency, the road to practice of the new material review system for the first release

In the process of promoting the online and regularization of new products business, it is necessary to add a new material review CMS and embed it in the marketing center to provide a more convenient scoring and review experience for business operations. In the process of technology selection, the new product team learned that the water drop low-code platform has the ability to visually build a CMS, and has built-in rich capabilities to build a CMS efficiently and quickly, such as forms, permission management, and micro-frontends. The product form is highly compatible with the business requirements, the design style is consistent, and the micro-frontend is supported by default. It can achieve almost zero cost in operation and maintenance deployment, and it is very convenient to embed the product in the marketing center. After technical research and comparison of the 40+ person-days required for all development, the team chose the more efficient Waterdrop low-code as the CMS implementation method, and completed the entire co-construction and construction process within 6 person-days. This article takes the construction of the Marketing Center-New Product Launch Material Review CMS (hereinafter referred to as the New Product CMS) as the best practice, and introduces how to use the water drop low-code platform from 0.

01Water drop - CMS quick solution

Waterdrop has the advantages of programming and low-code. The two complement each other and provide developers with solutions covering all aspects of the middle and background management systems. The main highlights include:

Water drop feature highlights

The following will lead you to build a new CMS in the marketing center from the perspective of developers, as a best practice, step by step from requirements review, to component development, to page construction, and finally to release the CMS online.

The final effect of the new CMS

02Analysis of new product CMS demand

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

Complex business: Strong correlation between modules and high data complexity Many interaction scenarios: There are more jumps between pages, data transfer requirements, and more interaction requirements between modules High UI restoration: It needs to meet the The design language of the marketing center maintains a consistent design style Micro-front-end combination: The new CMS is not used independently, but is embedded in the marketing center as a sub-application. Short development cycle: 3 pages (6 forms, 4 forms), from development to Test, only 6 days

In addition to the feature analysis, the author also sorts out the pages and components. Due to the customization scenarios of business and interaction, there are still 4 business components that need to be customized and developed. Fortunately, Waterdrop has the ability to build together, and developers can customize the business component set and import it into the system.

Need to sort out

03Component co-construction and development

After the requirements are sorted out, the next step is the process of customizing business components. Developers can perform related custom development after downloading the custom component template library.
The template contains code templates, common dependencies, debugging tools and commands for component development. After the development is completed, it can be published to jnpm through commands. In this way, you can install the corresponding component set in the plug-in management of the water drop workbench, and you can use it on the build page after the installation is complete.

Custom component development process

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

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

3. The installed components can be dragged and dropped on the build page.

At this point, all the components needed in the page have been developed, and then we will enter the page construction link~

04Page visualization construction

The page building link is very simple. Waterdrop provides a form table designer. You only need to drag and drop to adjust the layout and style of the components to the ones in the UI design draft.

In order to reduce the number of operations for users to adjust the layout and modify the style, the water drop team and the UI design team of the basic business experience department have formulated the middle and back-end visual standards and implemented them into the low-code platform, so that the ideal style can be achieved with one drag and drop. .

Waterdrop Form Designer

In addition to interface construction, Waterdrop also supports complex logic configurations such as form linkage and asynchronous data pull. Developers can flexibly switch to the Schema interface to write various logic configurations. In terms of form verification, dozens of common verifications such as url, https, image size, and array upper and lower limits are built-in. If they are not satisfied, you can either fill in custom regular expressions, or configure other complex verifications through Schema.

Waterdrop Form Designer: JSON Editing Capability

05 Front-end event orchestration

In addition to the interface layout, business logic and interactive jumps also need to be handled. Here, JS actions can be written and bound to the various events exposed by the module through the event orchestration function of the waterdrop workbench.

In the new submission form, although the form component itself already provides basic verification capabilities, it still needs to perform some personalized verification logic before the form is submitted, which can be achieved by writing JS actions here.

In addition, it is necessary to perform some structural transformation on the data collected by the form to meet the definition of the background interface document. In the event "before form submission" in the event configuration, the corresponding JS action can be bound to process the data transformation logic .

Event binding and action writing

06Interface and data source

After the interface construction and event logic arrangement are completed, the interface can be jointly debugged with the background interface to connect the interface and the data source. Different from common low-code platforms, DripWorks not only provides front-end dimension building, but also connects data sources through FaaS.

Through FaaS, interface developers can avoid the trouble of operation and maintenance deployment details, and can generate desired functions through simple configuration and connect to data sources such as DUCC through preset templates. It is very fast to create various CRUD interfaces including NodeJS, JAVA, etc.

In the scenario of the new CMS, there is already a corresponding background service, so after simply modifying 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~

Bind interface service

07Permission control

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

In terms of authority control, Waterdrop provides complete role authority management and control capabilities, which can set different roles and assign corresponding menus, pages and function permissions to them.

In addition to providing users with page-level viewing permission control, it also provides back-end callable API services, which can call services for more refined permission control.

Role and Permission Control

08 Operation and maintenance-free cloud construction, deployment and version management

After completing the construction, you can click Build and Publish to go online. Waterdrop will automatically generate source code, build it on the cloud, and finally push the build product to Pubfree, the front-end publishing platform of JD.com for deployment. The advantage of this is that the completed product will be solidified and will no longer be affected by platform changes. At the same time, the source code can also be obtained for secondary development or private deployment. For CMS types with low frequency of changes but high business complexity Better stability and flexibility.

At the same time, Waterdrop also provides three environments for testing, 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 on the published link address, you can jump to the online application, so you can get the final output CMS, and the product built by Water Drops by default conforms to the Micro-App micro-front terminal application specification, and can directly communicate with the marketing center and other micro front-ends. The framework is combined, so that the entire process of building, developing and deploying is over.

09 Summary

Through the practical process of the new CMS application, we can see that Waterdrop not only supports drag-and-drop visualization to build a CMS system, but also has flexible and deep component co-construction and logical expansion capabilities, which can meet the business demands of different CMS. The built-in permissions, components, menu routing, and construction and deployment are also convenient and reduce repetitive development, which can significantly improve performance. However, there are still many areas to be improved, such as the enrichment of the content of various functional modules, the threshold for learning and getting started, etc. The Waterdrop team will continue to enhance the ease of use of the platform in the spirit of excellence and the needs of users. , scalability.

At the same time, in terms of open source construction, Waterdrop has also open sourced and continued to iterate on the excellent underlying functions, including forms, forms, etc. You are welcome to experience and make valuable suggestions~!

related resources

Drip form open source capability: https://github.com/JDFED/drip-form
Open source capability of water drop table: https://github.com/JDFED/drip-tabl

Author: Huang Hao