Technical Evolution of the Yanxuan App Home Page: Architecture, Componentization, and Dynamic UI

The home page is the core entry of the Yanxuan APP and must guarantee online business stability while meeting high requirements for performance, flexibility, and user experience.

This article summarizes the technical evolution of the home page from the perspective of its underlying infrastructure.

1. Overview

The home page is built on a layered architecture:

Base library and abstraction layer provide independent components such as permission management, event tracking, image loading, AB testing, and logging.

The Tangram open‑source framework (vLayout on Android, LazyScroll on iOS) serves as the core layout engine, offering UI layout, data parsing, and a middle‑layer service called TAC (Tangram App Container).

The top layer consists of business modules that aggregate channel entrances, promotional venues, and personalized “Guess You Like” feeds.

2. Component‑Based UI Solution

2.1 Introduction

Because the e‑commerce home page has complex, heterogeneous layouts, a component‑based solution is required to achieve high performance and cross‑platform consistency.

2.2 Practice

Hundreds of Cell components are used on the home page. Manual registration is inefficient, so an Annotation Processing Tool (APT) is employed to annotate Cells at compile time, automatically collect them, and register them at runtime.

The registration workflow consists of three modules:

CellAnnotation : defines the annotation used by developers to mark a component.

CellProcessor : runs during compilation, scans annotated classes, and generates a component container (a Map of all Cells).

CellRegister : runs at app startup, reads the generated container and registers each Cell with the Tangram framework.

3. Component Loading

Layout inflation and reflection are costly on the UI thread. An asynchronous loader AsyncViewHolderCreator offloads XML parsing to a background thread, then posts the created View back to the UI thread, reducing jank and ANR occurrences.

4. Data Parsing and Binding

After the home‑page API returns data, TangramEngine parses it into Card objects, creates Cells, and binds model data to the corresponding Views via the adapter.

5. Middle‑Layer Service (TAC)

TAC is a middle‑layer service between client and server that provides data aggregation, mock data, and shared logic (e.g., event tracking, version control). It reduces communication overhead and allows independent deployment.

Evolution stages:

1.0 : TAC tightly coupled with backend code, causing permission and compilation issues.

2.0 : Data parsing extracted to a separate library; mock data and testing modules added, but manual sync between library and TAC caused inconsistencies.

3.0 : TAC split into a Maven artifact, decoupling it from backend services and enabling independent version upgrades.

6. Dynamic UI

6.1 Background

Before dynamic UI, any UI change required a new app version, leading to delayed releases and high development cost.

6.2 Technical Selection

A comparison of RN/Flutter, H5, and VirtualView was performed across performance, dynamic capability, learning cost, manpower cost, and package size. VirtualView offered a balanced solution with high performance, low integration cost, and negligible package overhead.

6.3 Practice

The chosen solution is based on the open‑source VirtualView framework, which uses XML templates to define UI components that can be updated without releasing a new app.

Tooling : XML layout editor with real‑time preview; compiled to binary .out files; custom components can be declared.

Client Container : Handles template registration (via annotations), exception reporting, component management, data binding, event handling, and template verification (MD5 check).

Resource Configuration Center : Stores template metadata (version, URL, MD5) and delivers resources via CDN. The client checks the version on startup, downloads updated zip packages if needed, verifies MD5, decompresses, and caches the JSON templates.

Example of a configuration response:

{
    "code": 200,
    "data": {
        "templateConfig": {
            "version": 0,
            "url": "https://xxx.zip",
            "md5": "xxxx"
        }
        // ...
    }
}

Example of a template list payload:

{
    "templateList": [
        {
            "templateType": "homepage/twocolumncard",
            "templateLayout": "QUxJVlYAAQAAAA...",
            "appVersion": "7.0.0"
        },
        {
            "templateType": "commoditydetails/promotionbanner",
            "templateLayout": "QUxJVlYAAQAAAA...",
            "appVersion": "7.2.0"
        },
        {
            "templateType": "shoppingcart/probanner",
            "templateLayout": "QUxJVlYAAQAAAA...",
            "appVersion": "7.1.5"
        }
    ]
}

7. Conclusion and Outlook

The Yanxuan home page has evolved from native Android/iOS implementations to a unified Tangram + TAC component architecture, and finally to a VirtualView‑driven dynamic UI. This progression improves flexibility, reduces release latency, and lowers development cost. Future work will focus on enhancing the resource configuration center, expanding the component library, and further performance optimization.