How Drip-Table Low-Code Framework Revolutionizes Web List Development

Background

According to Gartner, global IT spending will reach $4 trillion in 2021, and China’s application development market is expected to grow faster than the global average. Limited R&D resources push companies to seek ways to reduce labor costs and improve efficiency, especially for increasingly complex list‑layout requirements.

Solution Overview

JD Retail iPaaS front‑end team released Drip‑Table, a low‑code framework that enables visual construction of web lists, thereby saving development effort. After six months of iterative optimization the framework became stable and was open‑sourced.

Key Features & Architecture

Drip‑Table consists of a visual builder (Drip‑Table‑Generator) and a runtime renderer. Users design a list by configuring component properties, adding custom components if needed, writing low‑code logic for data binding, and finally generating a JSON‑Schema definition that the renderer consumes.

Core Capabilities

HTML Tree Editing : modify page structure and styles.

Component Tree Editing : drag‑and‑drop components onto the canvas.

Custom Development : develop custom components for special scenarios.

Data Editing : edit text, URLs, and other data fields visually.

Dynamic Logic Editing : add validation rules and business logic.

Component Types

Basic components cover common UI elements such as text, images, and tags. Business components serve specific domain needs and can be extended via the framework’s API. Custom components address cases where built‑in components cannot manipulate data fields or perform syntax checks.

JSON Schema Definition

The framework follows the international JSON Schema specification to describe both global table settings and individual row data. Configuration options allow enabling/disabling features and customizing table styles.

Implementation Details

Drip‑Table’s architecture is divided into four parts: Columns schema, Configs schema, Refs, and EventCallback. It also supports theme packages such as Drip‑design and Antd‑design.

Case Study

Within JD’s advertising platform, Drip‑Table has been used to build 64 different material lists, supporting large‑scale events like the 11.11 shopping festival, achieving stable online performance while reducing development effort by about 75%.

Future Direction

The project will continue focusing on list‑centric scenarios, integrating common industry capabilities to further reduce R&D resources.