Dolphin System Custom Layout Architecture and Implementation

Background

Dolphin is the JD International channel business support system responsible for native, M‑site, and mini‑program multi‑terminal requirements. The homepage and its three‑level category pages present business modules as floors, including product display, user acquisition, advertising, and operations. With brand upgrades, personalized demands surged, making the previous static floor templates insufficient, prompting Dolphin to explore a custom layout mode.

Goal

To meet rapid personalized business needs with minimal or zero coding, Dolphin upgraded its architecture from the configuration platform to backend services and frontend. Business users can now drag‑and‑drop custom floors on the configuration platform, bind them to internal or advertising assets, publish with one click, and have the backend push the floor data to the frontend without developer involvement.

System Overview

The system splits page data into layout data (describing architecture and floor structure) and content data (the actual items displayed). Decoupling these enables independent module updates with minimal frontend cost. Custom elements are categorized as floors, containers, and views; containers can be horizontal, vertical, absolute, or grid layouts, and initially only image and text views are used. The UI structure is expressed in JSON, supporting simple click and swipe interactions, covering over 80% of layout needs.

Module Introduction

Dolphin's custom layout consists of three modules: a visual configuration platform, dynamic services, and frontend display. The platform allows layout and content configuration and binds them via control IDs. Dynamic services provide layout and content data services, formatting the published information into JSON and exposing it through layout and content APIs. The frontend (Android, iOS, Flutter, M‑site, mini‑program) retrieves the layout JSON, parses it with a custom SDK, renders containers and views hierarchically, and finally updates view content.

Dolphin provides a complete configuration platform for JD International channel pages, supporting page structure, floor modules, and various operation entry configurations. Over 30 fixed‑template floors have been accumulated, and custom floors are treated as special templates that require drag‑and‑drop construction of a container tree (root container can be horizontal, vertical, absolute, or grid, with nested containers and leaf view nodes).

Business users configure custom layouts using the platform's controls, combining vertical and horizontal containers with image and text views. An example layout nests a vertical root container with two horizontal sub‑containers, one of which contains further vertical containers, each holding an image and a text view. The resulting tree structure is illustrated in the following diagram.

After configuring container hierarchy, position, size, and style attributes (corner radius, color, margins, etc.), users set content data by assigning image URLs and text strings to the respective views. Layout and content data are linked via control IDs; upon publishing, both are uploaded, formatted, and kept in the same nested relationship, producing a standard JSON payload delivered to the frontend.

The frontend (Android, iOS, Flutter, M‑site, mini‑program) implements parsers and renderers for this custom data, ensuring that custom floors appear indistinguishable from fixed‑template floors.

Conclusion

This article covered the first half of Dolphin's efficiency improvement exploration, detailing the background, objectives, system architecture, and three core modules of the custom layout solution, with an emphasis on configuration and data structures; the next article will delve into the frontend rendering process.