LowCode table of solutions Drip-Table open source!

iceRao — Wed, 12 Oct 2022 03:40:53 +0000

Preface

LowCode table of solutions Drip-Table open source!

According to the latest forecast by Gartner, the world's leading information technology research and advisory firm, global IT spending will reach $4 trillion by 2021. Then China, as the economic powerhouse and IT powerhouse in Asia Pacific, the application development market in China will lead to an explosive period, with growth rates exceeding the global average in the coming years. With limited R&D resources, companies are more focused on saving labor costs and improving manpower efficiency, while most applications are inseparable from the list layout list demand is increasing day by day, and the types are complex and diverse, while R&D resources are limited, the existing development model is difficult to meet the growing demand. Therefore, Jingdong Retail iPaaS front-end R&D team launched a technical solution Drip-Table to build web list by LowCode, which can realize visual list building and save development manpower.

With nearly six months of continuous optimization and iteration, the framework has stabilized and is now open source.

Source code address: https://github.com/JDFED/drip-table
Official website address: http://drip-table.jd.com

Usage Scenarios

no programming-based users want to build custom list application
developers to efficiently create lists , customization requirements can be achieved through a small amount of code

How to use

First of all, we will show you our face through dynamic pictures.

You can also directly open the Drip-Table case for list building.

Introduction to the architecture solution

The overall process of the list is as follows: first use the Drip-Table-Generator visual builder to build the list, configure component properties, configure custom components if they cannot meet the business scenario, then write the rendering logic online with embedded template data, and finally generate JSON Schema protocol data. The list is dynamically rendered by Drip-Table renderer, and finally the business side can complete the list-related business requirements directly without development.

Introduction of Drip-Table-Generator architecture

Drip-Table-Generator is a visual list building solution.
Basic Capabilities of Drip-Table-Generator
So what are the basic capabilities that a good visual list building solution needs to have. It mainly contains the following 5 points：

HTML Tree editing (style editing)

Edit the visible elements of the page, can freely modify the page structure style

Component Tree editing (component editing)

Component list to select components, drag and drop to embed in the page

Custom Development (custom development)

R & D can intervene in the development of custom components to meet the customization of the scene

Data Editor (Data Editor)

Visually edit the data part of the page, such as text, URL

Dynamic Logic Editor (Logic Editor)

The ability to freely add business judgment logic, such as checksum rules

List components and configuration

Basic components

The basic components are common components of the list, including text, graphics, labels and other components.

Business components

Business components usually serve only specific business, R&D can add custom business components according to the API methods exposed by Drip-table-generator.

Custom Components

Custom components solve the problem of not being able to manipulate data fields and not being able to verify syntax and logic. Build tools or through the online code editor allow users to write LowCode code to generate business components and then perform syntax checks and also use the preview feature for business logic checks; in addition, the code editor supports data manipulation through nested templates.

Json Schema Protocol Definition

The international specification (Understanding JSON Schema) is used to define the Json data format for global as well as list items. Through configuration items, we can decide to turn on or off certain functions, or set table styles, etc.

Introduction to Drip-Table architecture

Drip-Table is a Json Schema based solution for rendering dynamic lists.

The architecture is mainly divided into four JSON Schema definitions, namely Columns schema, Configs Schema, Refs, EventCallback, and also supports Drip-design and Antd-design theme packages.

Columns schema defines the data specification of the list component.
Configs Schema defines the list global configuration.
Refs expose list instance parameters .
Event callback defines the list framework event callbacks

Success stories

Drip-Table is used to build material lists for low-code projects in the drop-in platform. 64 kinds of material lists have been built, which efficiently support the needs of group promotions such as 11.11, and are stable for online use, saving 75% of R&D manpower.

Future development

Drip-table will focus on the list vertical, integrate the industry's common capabilities, empower various businesses, and save R&D resources.
We welcome you to use Drip-table and participate in co-build, and hope you can support us on github with a Star ~.

Reference material

Drip-Table source code address :
https://github.com/JDFED/drip-table

Drip-Table official website link:
http://drip-table.jd.com

Drip-Form official website link :
https://dripform.jd.com

Drip-Desgin official website link:
http://drip-design.jd.com

Micro-App official website link:
https://github.com/micro-zoe/micro-app

Communication to Official Wechat group

DEV Community: iceRao