Design and Architecture of the Dolphin System for JD International App

The existing JD International channel in the JD app required personalized features such as floor interactions, marketing activities, and user operations that the original system could not satisfy; React Native (RN) was used for custom development but suffered performance gaps and could not integrate external native floors or invoke external APIs.

After extensive research on platforms like Atoms and Orion, a new approach was proposed: the Dolphin system, which combines native and H5 technologies with a component‑based, configurable architecture to support JD International’s personalization needs.

The solution involves three main parts: a configuration platform, services, and the front‑end. The front‑end follows a front‑back separation model, communicating via AJAX with JSON payloads, achieving full decoupling, independent development, and faster delivery while reducing maintenance costs.

The Dolphin configuration front‑end adopts a mature React stack, chosen for its virtual DOM, componentization, single‑page application routing via react‑router‑dom, lazy loading of routes, and state management with react‑redux, which together improve performance, reusability, maintainability, and user experience.

The system follows a component protocol separating structure (layout) and data (content), enabling fine‑grained template components and dynamic custom floors, achieving a “template floor + custom floor” model that works uniformly across Android, iOS, and H5.

Cross‑platform configuration publishing ensures that terminals render identical interfaces based on the same logic, with unified exception handling and on‑device monitoring to guarantee consistency.

The architecture maintains isolation between business modules, so changes in one module do not affect others, allowing independent configuration of marketing activities, channel pages, and other features.

Real‑time capabilities are provided by pre‑built floor templates and custom layout technology, enabling business teams to publish complete rendering and behavior pages on demand, minimizing native client version constraints.

Security is addressed through a gateway‑SOA‑atomic service flow that validates access permissions, monitors traffic and exceptions, and includes rate limiting, degradation strategies, and fallback data handling.

Clients first query a switch interface to determine degradation; if not degraded, they request layout and content interfaces, which adapt responses based on client type and version, supporting multi‑terminal display.

Overall, the Dolphin system achieves the construction of JD International’s native homepage, meeting most business requirements while acknowledging current limitations such as lack of algorithmic support, and outlines future plans for richer templates, custom configurations, and collaborative component development.