Community Blog Flutter+Serverless: An End-to-end R&D Architecture

Flutter+Serverless: An End-to-end R&D Architecture

In this blog, we will look at how the team at Xianyu improves R&D efficiency by combining Flutter with a serverless architecture.

The Serverless architecture is hailed as a new generation in cloud computing. Since its introduction, Serverless has become extremely popular in the industry due to its increased R&D delivery speed and reduced costs. The Xianyu client performs architecture evolution and innovation based on Flutter. After Flutter unifies Android and iOS terminals to improve R&D efficiency, we hope to solve the following problems through the Flutter+Serverless architecture, further improving the overall R&D efficiency.

  1. A large amount of collaboration between different roles reduces the overall R&D efficiency.
  2. The mobile team does not need to dig deep into specific business process, and the server team has no time to accumulate experience and data from underlying fields.

R&D Architecture Evolution

Next, let's review the evolution history of the frontend and backend R&D architecture with respect to these two problems.


In the early stage of the PC Internet, the frontend and backend concepts were not used. At this stage, a single business requirement could usually be completed by one developer, and the frontend web page and backend logic were written in one project. As businesses became increasingly complex, frontend and backend R&D became increasingly inefficient. With the spread of mobile Internet, the servers needed to serve multiple frontends, such as the PCs, Android devices, and iOS devices.

The server team faced a question: When you design interfaces on the server, should the server be oriented to the UI or general services? One solution is to extract some part of the server to function as a Backend For Frontend (BFF), an adaptation layer between the frontend and backend. This primarily solves data aggregation and orchestration problems and prompted developers to explore more suitable hierarchical collaboration models.

BFF on the server brings a new problem: Package interfaces do not facilitate individual capacity building. If BFF is developed by client developers, this problem can be resolved. Next, we will consider a specific technical solution.

Technical Solution for Cloud and Device Integration


The Serverless architecture is composed of two parts: Backend as a Service (BaaS) and Function as a Service (FaaS). BaaS provides capabilities such as database storage and message queue. We recommend that the server encapsulate domain services at the BaaS layer for use at the FaaS layer to meet complex requirements. Client-side development focuses on code development on the client and at the FaaS layer.

Currently, the FaaS environment of Alibaba Cloud supports Java, Kotlin, Swift, Dart, Node.js, and other languages and frameworks. Xianyu uses Dart for Android (Flutter), iOS (Flutter), and FaaS (Dart Runtime) to integrate languages, and implements protocol integration and project integration.

Language integration: The Android, iOS, and FaaS layer use Dart for development to integrate the languages on the three sides, effectively reducing language learning costs at the FaaS layer.
Protocol integration: The integrated framework shields communication details. The frontend and backend share the same State, reducing protocol conversion. For frontend staff, calling FaaS services is as simple as calling local functions.
Project integration: The frontend and backend can perform development in the same project. The Dart feature allows fast development and joint commissioning through the Hot Reload mechanism.

Integration Practices on the Order Confirmation Page

The following uses the order confirmation page integration on Xianyu as an example to explain integration practices through page rendering and interaction.


1. Integration of rendering on the order confirmation page:

As shown on the left of the preceding figure, to render this page, the client needs to request five interfaces on the client side, process the logic between rendering interfaces, and convert Data returned by the interfaces to ViewModel. After integration reconstruction, the original logic on the client side is moved to the FaaS layer, involving the aggregation of five domain services, business logic processing, field mapping, and page orchestration. The client side directly obtains the returned ViewModel and refreshes the page without any rendering or business logic. The following figure shows the flowchart of the process after cloud and device integration.


2. Integration of interaction operations on the order confirmation page:

As shown on the right of the preceding figure, four operations can change the actual payment. Originally, these operations were processed on the client side. After integration reconstruction, no computing logic exists on the client side. Each client operation sends a request to the server. After FaaS performs data verification, such as the check on red packet expiry, data is returned to refresh the page.

3. Integrated R&D framework


Nexus Framework: a Flutter-based integrated mobile UI framework.

Logic Engine: a Flutter-based integrated communication and scheduling framework.

Nexus Server: an integrated server-side framework based on Dart Runtime.

Sample Code

The following figure shows a sample of the initialization code of the order confirmation page on the client.


The following figure shows how the FaaS layer processes an initialization request from the client.


The preceding is a development example of Flutter+FaaS dual-side protocol integration. The two sides interact with each other through BinderAction, and the State in Action is of the same type, effectively shielding communication details and improving R&D efficiency.

Benefits of Flutter+Serverless Integration

The order confirmation page has been launched. Looking back on the entire R&D process, we see that the cloud and device integration R&D architecture is not only a new technical solution, but also an extension of the working boundary on the client side that reshapes production relations.

Improved collaboration efficiency: Compared with the dual-side integration made possible by Flutter, the three-end integration architecture further improves the overall R&D efficiency by 30%.

Closed business loop: The client side can quickly feedback and respond to the business, and continued attempts help us build better product models, creating more value for the business.

Personnel growth: The client staff originally focused only on development resources related to the user experience. Now, they have become technical leaders of the entire business R&D process. They no longer take the local view of the client, but must adopt a global view of the entire closed business loop. The FaaS layer calls underlying domain services to complete its own businesses. Therefore, the server team can focus more on the accumulation of domain services.

Conclusion and Prospects

The Flutter+Serverless three-side integration R&D architecture can solve the two problems of the original R&D architecture we mentioned in this article. By changing the functional boundaries on the client side to effectively reduce collaboration, the client team can take responsibility for the entire business and the server team has more time for domain accumulation. However, Xianyu must deal with the following challenges when applying the Flutter+Serverless three-side integration R&D architecture:

  • Further R&D experience improvement required at the FaaS layer: Debugging information can only be viewed through GAIA logs. In the future, we plan to capture platform logs locally and provide a remote debugging function based on FaaS code.
  • O&M cost increase: The work of problem locating, request processes, stress testing, and safe production is transferred, and we need to reduce the differences with services

These new challenges will be addressed in the next phase of our work, and we will share ideas and solutions for these challenges in the future.

0 0 0
Share on

Alibaba Tech

15 posts | 1 followers

You may also like


Alibaba Tech

15 posts | 1 followers

Related Products