How Xianyu Built a High‑Performance Stream‑Based Page Container in Flutter

Stream Page Container Architecture Design

Xianyu’s main business scenarios are built on stream‑based pages. Two types of pages exist: complex interaction pages (e.g., publishing, product detail) and lightweight, dynamic pages (e.g., home, search, profile) that require per‑user configuration and fast A/B testing.

These lightweight pages share common logic such as layout, data management, event‑driven state updates, and view rendering, leading to a lot of duplicated code.

To improve development efficiency and reduce the two‑week release cycle, Xianyu introduced a new architecture during the Flutter home‑page redesign.

Key Architectural Solutions

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

Client side: adopts an MVVM model with a generic event protocol, abstracts layout, data handling, and event processing, and tightly integrates with the PowerScrollView list container for efficient rendering and data‑driven refresh.

Uses Alibaba’s DinamicX DSL for dynamic template rendering, satisfying both delivery and operation needs.

Implements a cloud‑native Flutter+FaaS integration, defining a unified event protocol that reduces release dependencies and speeds up delivery.

Protocol Design

The page container protocol is organized into three layers: Page, Section, and Component.

Page layer : contains the list of Sections and configuration for pull‑to‑refresh, load‑more, etc.

Section layer : defines layout, initialization events, load‑more events, and its Components.

Component layer : business‑specific, treated as a black box; rendering is delegated to the business side via a DX parser handler.

All communication follows an event‑driven model (client↔server, component↔component, page↔component, page↔app), enabling flexible handling of events on either side.

All is event;

In the PowerContainer design, every data change—whether UI update, network request, or custom logic—is expressed as an event. Xianyu defines eight generic event types (Restart, LoadMore, Update, Context, Replace, Remote, Native, Custom) that flow through the EventCenter to trigger UI refreshes or business logic.

Data Center Design

Within the MVVM architecture, the Data Center acts as the ViewModel, handling Update events and supporting four update modes: overload, patch, override, and remove. The PowerScrollView list container, combined with DXFlutter dynamic templates, provides high‑performance rendering and partial UI refresh.

Dynamic Template Rendering

DXFlutter uses DinamicX as a DSL to achieve efficient dynamic template rendering on the Flutter side. Xianyu leverages DXFlutter for Component‑level rendering.

To bridge DX card events with the PowerContainer, Xianyu defines a powerEvent that maps card events to the container’s event types. For example, a “remove recommendation card” action is expressed as an update event with subType=remove, which updates the data model and triggers UI refresh.

Each Component receives a unique ComponentKey (combined with its SectionKey) that identifies the data model for updates and enables PowerScrollView to perform localized refreshes.

Section State Management

Sections expose a state field (loading, error, noMore, complete). The EventCenter updates this state based on Remote request events, and registered render handlers return appropriate widgets.

void updateSectionState(String key, PowerSectionState state) {
    final SectionData data = _dataCenter.findSectionByKey(key);
    if (state == PowerSectionState.loading) {
        final Widget loadingWidget = _viewCenter?.config?.loadingWidgetBuilder(this, key, data);
        _viewCenter.replaceSectionOfIndex(loadingWidget);
        data.needRefreshWhenComplete = true;
    } else if (state == PowerSectionState.error) {
        // handle error
    } else if (state == PowerSectionState.noMore) {
        // handle no more data
    } 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;
        }
    }
}

Tab Container Support

Tabs are implemented via a Slot concept in the Section protocol. Switching tabs triggers a Replace event that updates the Section information, and PowerScrollView’s replaceSection method refreshes the UI accordingly.

void replaceSections(List<dynamic> 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);
        int slotIndex = _findSlot(replaceData);
        _dataCenter.replaceSectionData(slotIndex, replaceData);
        final PowerSection sectionData = _viewCenter?.convertComponentDataToSection(replaceData);
        _viewCenter?.replaceSectionOfIndex(slotIndex, sectionData);
        sendEventRestart(replaceData.key);
    }
}

Conclusion and Outlook

The presented architecture enables rapid construction of lightweight, dynamic pages, improves development efficiency, and reduces release dependency by moving business logic to the cloud via FaaS. In the Xianyu Flutter home‑page rewrite, PowerContainer cut repetitive code by half and delivered smoother performance through partial refreshes, element reuse, and frame‑by‑frame rendering.

While not a silver bullet for all scenarios, this design excels in display‑centric, lightly interactive pages and aligns well with serverless environments. Future work will focus on true WYSIWYG page building, further reducing code, and expanding no‑code capabilities.