Flutter Architecture Design and Application in Streaming Scenarios

By Guangjiu from Xianyu Technology

Currently, major business scenarios of Xianyu are all constructed based on stream scenarios. There are two types of pages: One is the page with complex interaction, such as the publishing page and the product details page. The other includes pages such as homepage, search page, and my page, which are light interaction pages and require a certain level of dynamic capability to meet the needs of customized operation configurations and fast A/B testing.

There are many common processing logics in these light interactive and dynamic operation scenarios, such as page layout, data management, event logic-driven data change, and data-driven view state update. Most of these tasks are recurring with repetitive code logic.

For R&D and delivery efficiency, business changes often depend on the release cycle, which usually takes two weeks. It is challenging to run for the jobs that require quick release and response.

Can a stream page building capability be designed to quickly create pages, reduce duplicate codes, and improve R&D efficiency? Can we improve the efficiency of online delivery by providing dynamic business and reducing the dependence on publishing?

To solve these problems, Xianyu has designed a set of page building architectures for streaming scenarios on the occasion of changing homepage revision in Flutter.

Architecture Design of Streaming Page Container

In business scenarios, stream layout allows you to design end-to-end containers for streaming pages through the following aspects:

1) On the platform creation side, capabilities such as page building, component management, and protocol orchestration are achieved and connected with delivery platforms, A/B testing platforms, and monitoring platforms.

2) On the client-side, use the MVVM model to design a general event protocol, abstract standard page layouts, data management, and event processing capabilities, and reduce duplicate code development to improve R&D efficiency. In terms of page layout management, it deeply integrates with the list container PowerScrollView to achieve the capabilities such as efficient page rendering and data-driven page refresh.

3) Using DinamicX of Alibaba Group as a DSL to realize the dynamic template rendering and meet the advertising and operation requirements.

4) In terms of communication protocol with the server-side, Xianyu has been developing the cloud-terminal integrated development in Flutter + FaaS to define a cloud-based integrated event protocol. It can solve the problem of dynamic business logic, reduce the dependency on publishing, and improve delivery efficiency.

The streaming page container architecture mainly includes the Protocol Layer, Event Center, and Data Center. The following describes the details of these templates.

Protocol Design

In the design of page container protocol, after combining Xianyu business with some technical solutions of Alibaba Group, Xianyu adopts the three-layer protocol design: Page, Section, and Component.

1) The Page layer protocol mainly includes the Sections' information on the page and the configuration information, such as pull-down to refresh and pull-up to load more.

2) The Section layer protocol contains the layout information, Initialization Events, LoadMore Event, and Components of the current Section.

3) The Component layer protocol is related to the specific business, and it is a black box for the container. The specific rendering will be left to the business side. DX parsing and rendering handler is available by default.

In the design of communication protocols, all adopt the way of event delivery, including client and server, components and components, pages and components, and pages and app. This is the integrated cloud-terminal design. Theoretically, developers only need to consider how to send and receive events. Whether events are processed on the client or the server is determined by the corresponding handlers. With the cloud-device integrated design, the event processing is more flexible, and the logic can be moved behind more conveniently. This also reduces the dependency on releases when business changes occur.

Then, let's focus on the design of the Event Center.

Design of Event Center

Everything is an Event;

In the design of a PowerContainer, everything is an event: be it data update, message delivery, network request, results returned by the server, or custom local processing logic. Xianyu abstractly defines eight types of the common event. The entire page container renders and refreshes the page UI and expresses and runs the business logic through the flow of events.

Take a network request as an example. A pull-down refresh will obtain the initEvent of each Section and add it to the Event Center. Then, the Event Center finds the corresponding handler for processing according to the event type.

If the initEvent is configured with the remote request, the remoteHandler is responsible for sending the network request to transmit the event to FaaS. After the event is received in FaaS, it is distributed in the FaaS Event Center to locate the corresponding HSF service and obtain data. Finally, it is assembled into an event and sent to the client. After the event is received, the client continues to make the event flow in the Event Center.

After the remote event is processed, Event Center broadcasts the end of the event to facilitate business processing of related custom events.

General Event Abstraction

Let's talk about the abstraction of general events.

1) Restart event: Specify the refresh event of the entire Page or Section. If you want a Section refresh, add the initEvent to the Event Center. initEvent is generally a remote event or any other event.

2) LoadMore event: It handles scenarios where more data is displayed on multiple pages.

3) Update event: It updates data sources and refreshes the UI.

4) Context update event: For each Section, a context value is present, which indicates the context of the request from the server and the client. The Remote request for each Section sends the context to the server by default. A server can update the context information of a specified Section by sending context events. And there are some specific scenarios, such as the page number loaded by paging.

5) Replace event: It replaces Section information, applicable in scenarios such as Tab switching.

6) Remote event: It is a remote request event.

7) Native events: These are the local common events such as page jumps, toast tips, and data tracking.

8) Custom events: Custom business events embedded in the version.

Design of Data Center

In MVVM architecture, the data center plays the role of ViewModel, processes Update events, and is mainly responsible for data update and UI view refresh. Xianyu abstracts the common types of data Update events - including overload, patch, override, and remove - based on its own service scenarios. In terms of UI rendering, Xianyu combines the list container PowerScrollView with dynamic template rendering DXFlutter to realize page rendering and page refreshing after data updating.

List Container

PowerScrollView is a fully functional and high-performance list layout container implemented by Xianyu. It meets the requirements of page containers for features such as waterfall, card exposure, and anchor positioning. In terms of view rendering and refreshing, PowerScrollView refreshes the list locally, which solves the problem of view refreshing after data updating.

Design of Section, Footer, and Header of the second-level protocol corresponds to that of PowerScrollView. The second-level protocol Section defines the unique identifier key, which corresponds to the SectionKey of PowerScrollView in UI rendering. After data is updated, the page container implements a local refresh of the view based on the SectionKey.

For more information about the detailed design and introduction to PowerScrollView, see the article on Xianyu technical official account.

Dynamic Template Rendering

DXFlutter uses DinamicX of Alibaba group as DSL to realize the efficient dynamic template rendering on the Flutter side. Xianyu uses DXFlutter to realize dynamic template rendering of the Component layer protocol.

We already know that the Component layer protocol is a black box for page containers. Then, how does the DX card event connect to the page container PowerContainer? How does the data of the black box update?

In DSL, Xianyu customizes the powerEvent of PowerContainer, which generates common event types of the page container and connects the events of DinamicX cards to the Event Center of the page container. Taking the above figure as an example, in the "delete recommended cards in the follow list" scenario, you only need to define an Update-type event in the onTap event. The subType is remove, and you can delete the data and render the UI after deletion.

However, no identity is defined here, and the list contains multiple identical cards. How do you know which data to operate?

A unique ComponentKey is generated for each Component, and a unique identifier of the card is generated based on SectionKey + ComponentKey. In each powerEvent, a Key is passed into the event center to locate the data model of any components. And the data model is updated based on the event type. You can also use the PowerScrollView Key to perform a local refresh in the UI.

Section State Management

During page loading, it is often necessary to show some loading state processing, such as loading animation, retry button in the loading failure state, and prompt information without more content state.

In terms of protocol design, each Section defines the Section state and updates it when the Event Center handles the Remote request events and response events. The Widget in the loading state is returned by registering the render handler according to different states of Section.

void updateSectionState(String key, PowerSectionState state) {
    final SectionData data = _dataCenter.findSectionByKey(key);
    if (state == PowerSectionState.loading) {
        // Obtain loadingWidget from config in ViewCenter
        final Widget loadingWidget = _viewCenter?.config?.loadingWidgetBuilder(this, key, data);
        // Viewcenter calls the replace section method to update the UI
        _viewCenter.replaceSectionOfIndex(loadingWidget);
        // The Section that needs to be refreshed.
        data.needRefreshWhenComplete = true;
    } else if (state == PowerSectionState.error) {
        ...
    } else if (state == PowerSectionState.noMore) {
        ...
    } else if (state == PowerSectionState.complete) {
        if (data.needRefreshWhenComplete ?? false) { // Determine whether Section needs to be updated
            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 Section state changes, use replaceSection method provided by PowerScrollView to refresh the UI view.

Support for Tab Container

On the homepage of Xianyu, the page container needs to support the layout of Tab containers. How does PowerContainer support Tab containers?

Xianyu introduces the Slot concept in Section protocol. When building a page, it specifies the Slot Section of the Tab container and does not display any information about the empty Slot by default. You can use the Replace event to modify the Section information of the page container when switching to the Tab container.

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);
        // Find the index that matches the Slot in the Section list
        int slotIndex = _findSlot(replaceData);
        // Update dataCenter
        _dataCenter.replaceSectionData(slotIndex, replaceData);
        // SectionData is converted to the PowerSection that the PowerScrollView requires
        final PowerSection sectionData = _viewCenter?.convertComponentDataToSection(replaceData);
        // Update viewCenter
        _viewCenter?.replaceSectionOfIndex(slotIndex, sectionData);
        // Send the Restart event that replaces the Section to the event center.
        sendEventRestart(replaceData.key);
    }
}

PowerScrollView also provides the replaceSection method, which combines with the Section state management to solve tab container switching and loading state management problems perfectly.

Summary

This article describes how to design and realize a set of stream page-building capabilities. It also explains ways to quickly build pages and improve R&D efficiency from aspects such as building pages, designing protocols, implementing containers on clients, rendering dynamic templates, and synchronizing events to the cloud in a light interaction and dynamic operation scenario. In addition, it provides dynamic business capability, which reduces the dependency on releases and improves the delivery efficiency of releases.

Currently, page container PowerContainer is designed and implemented in the reconstruction of the Flutter version on the Xianyu homepage. The PowerContainer process dramatically reduces the repeated code on the three tabs of the homepage and manages the code logic in a unified manner, which reduces the person-day workload by half. In terms of performance, with the optimization of PowerScrollView in the local refresh, element reuse, and frame rendering and differentiator, the fluency is better than the native experience.

No silver bullets! Such a set of page containers is not suitable for all scenarios. It is ideal when the demonstration is in the first position, and the operation is implemented with light interaction and dynamization. Event protocols integrating the cloud require the encapsulation of event protocols on the server-side, making the scenarios with Serverless more suitable..

In the future, Xianyu will try to build more platforms to realize the fast page-building capability of "What you see is what you get." At present, in terms of dynamic business logic, more efforts are made to integrate with FaaS and move the logic backward. However, it is still unable to solve the problem that the local custom event depends on release, so more attempts will be made in this respect in the future, such as realizing the business development of less code and even no code.

Community

Flutter Architecture Design and Application in Streaming Scenarios

Architecture Design of Streaming Page Container

Protocol Design

Design of Event Center

General Event Abstraction

Design of Data Center

List Container

Dynamic Template Rendering

Section State Management

Support for Tab Container

Summary

Read previous post:

Read next post:

XianYu Tech

You may also like

Comments

XianYu Tech

Related Products

Serverless Workflow

Web Hosting Solution

Serverless Application Engine

ACK One