Streaming Page Container Architecture for Xianyu's Flutter Home Page

Currently, Xianyu's main business scenarios are built on streaming pages. Two types of pages exist: complex interaction pages (e.g., publish page, product detail) and lightweight, dynamic pages that support personalized operation configuration and rapid A/B testing (e.g., home, search, my page).

These lightweight pages share common logic: layout, data management, event‑driven data changes, and data‑driven view updates, which often lead to duplicated code.

Because business changes rely on version releases with a typical two‑week cycle, the long release time hampers fast delivery. To address this, Xianyu designed a streaming page container architecture during a Flutter home‑page redesign.

Architecture Overview

1. Platform side provides page building, component management, and protocol orchestration, integrated with the delivery, A/B testing, and monitoring platforms.

2. Client side adopts an MVVM model, defines a generic event protocol, abstracts page layout, data management, and event handling to reduce code duplication and improve development efficiency. The layout management tightly integrates with the PowerScrollView list container for efficient rendering and data‑driven refresh.

3. Alibaba Group's DinamicX is used as a DSL to implement dynamic template rendering, satisfying both delivery and operation needs.

4. The communication protocol follows a cloud‑native approach using Flutter + FaaS. A unified event protocol reduces release dependencies and improves delivery speed.

Protocol Design

The page container protocol consists of three layers: Page, Section, and Component.

• Page layer includes sections information and configurations such as pull‑to‑refresh and load‑more.

• Section layer contains layout info, initEvent, loadMoreEvent, and component list.

• Component layer is business‑specific and treated as a black box; DX parsing/rendering handlers are provided by default.

All communication adopts event transmission (client‑server, component‑component, page‑component, page‑app), enabling flexible event handling on either client or server side.

Event Center Design

Eight generic event types are defined:

1. Restart – refreshes a page or section.

2. LoadMore – handles pagination.

3. Update – updates data source and UI.

4. Context – updates contextual information such as page number.

5. Replace – replaces section information (e.g., tab switch).

6. Remote – triggers remote requests.

7. Native – local events like navigation, toast, or analytics.

8. Custom – business‑defined events.

Example: a pull‑to‑refresh generates initEvent for each section, which is added to the event center. The appropriate handler (e.g., remoteHandler) processes the event, invokes FaaS, receives data, and dispatches a new event back to the client, completing the flow.

Data Center Design

In the MVVM architecture, the data center acts as the ViewModel, handling Update events. Xianyu abstracts four update types: overload, patch, override, and remove. PowerScrollView combined with DXFlutter provides high‑performance list rendering and partial UI refresh.

List Container – PowerScrollView

PowerScrollView offers features such as waterfall layout, card exposure tracking, anchor positioning, and partial refresh, solving UI update challenges after data changes.

Dynamic Template Rendering

DXFlutter uses DinamicX DSL to achieve efficient dynamic template rendering on Flutter. Component‑level events are linked to the PowerContainer via a custom powerEvent, enabling actions like removing a card by emitting an update event with subType = remove.

Each component receives a unique ComponentKey (SectionKey + ComponentKey) that is passed to the event center, allowing precise data model updates and localized UI refresh.

Section State Management (Code Example)

void updateSectionState(String key, PowerSectionState state) {
    final SectionData data = _dataCenter.findSectionByKey(key);
    if (state == PowerSectionState.loading) {
        // Get loading widget from ViewCenter config
        final Widget loadingWidget = _viewCenter?.config?.loadingWidgetBuilder(this, key, data);
        // Replace UI
        _viewCenter.replaceSectionOfIndex(loadingWidget);
        data.needRefreshWhenComplete = true;
    } else if (state == PowerSectionState.error) {
        ...
    } else if (state == PowerSectionState.noMore) {
        ...
    } else if (state == PowerSectionState.complete) {
        if (data.needRefreshWhenComplete ?? false) {
            final int index = _dataCenter.fineSectionIndexByKey(key);
            if (index != null) {
                final SectionData sectionData = _dataCenter.containerModel.sections[index];
                final PowerSection section = _viewCenter.initSection(sectionData);
                _viewCenter.replaceSectionOfIndex(index, section);
            }
            data.needRefreshWhenComplete = false;
        }
    }
}

After a state change, PowerScrollView’s replaceSection method refreshes the UI.

Tab Container Support

Tabs are modeled as Slots in the Section protocol. Switching tabs triggers a Replace event that updates the Section information.

Replace Sections (Code Example)

void replaceSections(List
sections) {
    if (sections == null || sections.isEmpty || _dataCenter?.containerModel?.sections == null) {
        return;
    }
    for (int i = 0; i < sections.length; i++) {
        SectionData replaceData = sections[i];
        assert(replaceData.slot != null);
        // Find matching slot index
        int slotIndex = _findSlot(replaceData);
        // Update dataCenter
        _dataCenter.replaceSectionData(slotIndex, replaceData);
        // Convert to PowerSection
        final PowerSection sectionData = _viewCenter?.convertComponentDataToSection(replaceData);
        // Update viewCenter
        _viewCenter?.replaceSectionOfIndex(slotIndex, sectionData);
        // Send Restart event
        sendEventRestart(replaceData.key);
    }
}

PowerScrollView’s replaceSection method, combined with section state management, resolves tab switching and loading‑state handling.

Conclusion and Outlook

The streaming page container design enables rapid page construction, improves development efficiency, and reduces release dependency for dynamic, lightweight pages. PowerContainer has been deployed in Xianyu’s Flutter home‑page, cutting repetitive code by half and delivering smoother performance through partial refresh, element reuse, and frame‑by‑frame rendering.

Future work includes a true WYSIWYG building platform, deeper server‑less integration, and striving toward less‑code or no‑code business development.