preface

Global IT spending will reach $4 trillion in 2021, according to a new forecast from Gartner, a leading information technology research and consulting firm. Then, as an economic power and IT power in the Asia-Pacific region, China’s application development market will attract an explosion period, and its growth rate will exceed the global average level in the next few years. With limited RESEARCH and development resources, companies are more focused on saving human costs and improving human efficiency, and most applications are inseparable from the list layout. With the increasing demand for lists and complex and diverse types, and limited research and development resources, the existing development model has been unable to meet the growing demand. Therefore, the FRONT-END R&D team of iPaaS of JD retail launched a technical scheme of DRIp-table for building Web lists through LowCode to realize visual list building and save development manpower.

With the continuous optimization and iteration in recent months, the framework has become stable and is now open source.

  • Source code address: github.com/JDFED/drip-…
  • Drip-table.jd.com

Usage scenarios

1. Users with no programming background want to build custom list applications.

2. Developers create lists efficiently, customizing requirements with a little code.

How to use

First through the motion picture to show you ~.

You can also directly open the Drip-Table case to build a list.

Architecture Solution introduction

The overall process of the list is as follows: Firstly, use drip-table-generator visual construction tool to build the list, configure component properties, and configure custom components if business scenarios cannot be satisfied. Then, write online rendering logic with embedded template data, and finally generate JSON Schema protocol data. The drip-table renderer is used to dynamically render the list so that the business side can directly fulfill the list-related business requirements without development.

Drip-Table-Generator

Drip-Table-Generator is a visual scaffolding list solution.

Drip-table-generator basic capabilities

So what are the basic capabilities of a good visual building list scheme? It mainly includes the following five points:

1.HTML Tree editing (style editing)

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

2.Com Ponent Tree Editing

Select components from the component list and drag them into the page

3.Custom Development

R&d can be involved in developing custom components for customized scenarios

4.Data editing

Visual editing of the data portion of the page, such as text, URL

5, Dynamic Logic editing (Logic editing)

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

List components and configurations

Based on the component

Basic components are common list components, including text, graphics, labels and other components.

The business component

Business components typically serve only a specific business, and developers can add custom business components based on the API methods exposed by Drip-table- Generator.

Custom Components

Custom components solve the problem of not manipulating data fields and not validating syntax and logic. Build tools or an online code editor that allows users to write LowCode code to generate business components and then check the syntax, as well as preview the business logic. In addition, the code editor supports data manipulation through nested templates.

Json Schema protocol definition

Understanding JSON Schema is adopted to define JSON data formats for global and list items. With configuration items, we can decide to turn certain functions on or off, or set table styles, etc.

Drip-Table

Drip-Table is a rendering dynamic list solution based on Json Schema. The Schema is mainly divided into four JSON Schema definitions, which are Columns Schema, Configs Schema, Refs and EventCallback. Antd-design and DRIp-Design theme packs are also supported.

  • Columns Schema defines the data specifications for the list components.
  • Configs Schema Defines the global configuration of the list.
  • Refs Exposes list instance parameters.
  • The Event callback defines the list frame Event callback.

Successful cases

Use of low code projects on JINGdong launch platformDrip-TableBuild material list, now built72A list of materials, effectively support the double eleven group to promote the demand, online use is stable, save r & D manpower75%.

The follow-up development

Drip-table will focus on the list vertical and integrate industry-common capabilities to empower various businesses and save r&d resources. Welcome to use Drip- Table and participate in the construction. We also hope to support us by clicking a Star on Github.

Reference material

  • Drip-table :github.com/JDFED/drip-…
  • Drip-table drip-table.jd.com drip-table.drip-table
  • Micro-app official website link :github.com/micro-zoe/m…
  • Leo source address :github.com/JDFED/leo