Frontend Architecture, Component Reuse, and Automation Strategies in JD Family Account Project

Guide

JD Family Account centers on family relationships to drive user acquisition, activation, and shopping consumption, while enabling multiple teams to expand business and functionality. The frontend continuously optimizes the project toward SaaS and PaaS, empowering various services.

Background Introduction

The project is a strategic initiative with a tight development schedule and many new features to explore, requiring support for Android, iOS native, H5, and WeChat Mini‑Program. A mature, cross‑platform stack was needed.

1.0 Stage Technical Selection and Business Support

Key pain points: multi‑platform support, frequent feature updates, and the need for a decoupled, extensible architecture. After comparing solutions, React Native was chosen as the best fit for Android, iOS, and H5, leveraging JD’s customized JDReact framework.

Family Account Evolution Diagram

The architecture is built on a core JDReact framework with second‑level encapsulation of components and APIs, separating base APIs, component library, and business modules.

Architecture Highlights

Decoupled business logic via base APIs.

Plug‑in UI modules using reusable base components.

Dynamic extension of APIs and component library.

2.0 Stage Demand‑Stable Iteration and Architecture Optimization

With stable iteration, the project introduced three‑level component reuse, automation scripts, and improved UI fault‑tolerance.

Component Reuse Strategy

Three‑level reuse: base component library → business base components → business core components, illustrated in the UML diagram.

Component Three‑Level Reuse Example

Resulting architecture diagram:

Family Account 2.0 Architecture

Automation Script for Code Generation

Using React‑Redux as an example, a script can generate the common Redux file structure, avoiding repetitive work. The script can be installed via npm install @stonescott/reduxscripts .

Redux File Auto‑Generation Script Flowchart

UI Fault‑Tolerance Mechanism

A three‑layer mechanism handles interface errors: status‑code handling, core data validation, and UI fallback. This ensures graceful degradation and consistent user experience.

3.0 Stage Successful Model Consolidation and External Empowerment

The team collaborated with JD Retail, JD Tech, and JD Health, extending features like family coupons, quick chat, and payment assistance to other products. The family relationship network is being upgraded to a “intimate relationship” model, offering SaaS and PaaS capabilities.

External Empowerment Practices

Family coupons (H5/RN) for targeted discounts.

Invitation onboarding flow (RN & H5) supporting multiple channels.

Family Assistant SDK (native) for chat and sharing, with open‑app and router calls.

Current Empowerment Methods

Future Plans

Plans include providing more data services via independent SDKs (H5 JS SDK and native SDK), expanding multi‑platform support for coupons, and optimizing the Family Assistant SDK for all scenarios.