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.
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.
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.
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.
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.
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.
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:
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.
Constructing Hybrid Projects in Just One Minute with Flutter-boot
Candy for You: Design of Xianyu Flutter Interaction Engine Series
15 posts | 1 followers
FollowAlibaba Clouder - November 24, 2020
XianYu Tech - August 10, 2021
Alibaba Clouder - December 22, 2020
Alibaba Clouder - September 28, 2020
XianYu Tech - August 10, 2021
Alibaba Tech - April 24, 2020
15 posts | 1 followers
Follow
DevOps Solution
Accelerate software development and delivery by integrating DevOps with the cloud
Learn More
Serverless Workflow
Visualization, O&M-free orchestration, and Coordination of Stateful Application Scenarios
Learn More
Serverless Application Engine
Serverless Application Engine (SAE) is the world's first application-oriented serverless PaaS, providing a cost-effective and highly efficient one-stop application hosting solution.
Learn More
Architecture and Structure Design
Customized infrastructure to ensure high availability, scalability and high-performance
Learn MoreMore Posts by Alibaba Tech
