background

Serverless, hailed as the next generation of cloud computing, has been very popular in the industry since the concept was introduced because of the speed of r&d delivery and cost reduction. The architecture evolution and innovation of Xianyu client is based on Flutter. After improving r&d efficiency through the integration of Flutter on both Android and iOS, it is hoped that Flutter+Serverless can solve the following problems and further improve overall R&D efficiency.

  • There is a lot of synergy between various roles, resulting in low overall r&d efficiency.
  • The mobile end is getting further and further away from the business, and the server has no time to do the underlying domain settling.

Evolution of r&d architecture

Let’s review the history of the evolution of the front and back end development architecture with these two questions.

In the early stage of PC Internet, there was no concept of front and back end. At this stage, a single business requirement can be completed by a developer, and front-end web page and back-end logic are written in a project. As the business becomes more and more complex, it has become inefficient for developers to be responsible for front and back end research and development. At this stage, with the outbreak of mobile Internet, the server needs to serve PC, Android, iOS and other front-end services.

There is always a question on the server side: should the server design its interface for the UI or for a generic service? In one solution, Backend For Frontend serves as BFF (Backend For Frontend serves the back-end of the Frontend) as an adaptation layer between the front and back ends. The core of the Backend is to solve data aggregation and orchestration and explore a more reasonable hierarchical collaboration mode.

Server side writing BFF brings new problems, always the package interface fails to improve personal capabilities. This problem can be solved if BFF is developed by the end – side students, and the specific technical solution is also the problem we need to think about next.

Cloud integration technology solution

Serverless consists of Backend as a Sevice (BaaS) and Function as a Service (Faas). BaaS mainly includes database storage, message queue and other capabilities. For complex requirements, it is suggested that the server encapsulate domain services in the BaaS layer for the FaaS layer. As side to side development, the core focuses on the client and FaaS layer of code development.

At present, the FaaS environment of the company supports Java, Kotlin, Swift, Dart, Node.js and other languages and frameworks. Xianyu uses Dart to integrate Android (Flutter), iOS (Flutter) and FaaS (Dart Runtime). And realize the integration of protocol and engineering.

Language integration: Dart language is used for Android, iOS and FaaS layer development, realizing the language unification of the three ends and effectively shielding the language learning cost of FaaS layer.

Protocol integration: communication details are shielded through the integrated framework, and the State at the front and back ends are the same, reducing protocol conversion. When the front-end students call FaaS service, it is as simple as calling local functions.

Integration of engineering: The front and back ends can be developed in the same project, and THE Hot Reload mechanism can be used for rapid development.

For details about how to build the Dart Runtime environment based on FaaS, see Dart Compilation Technology on the Server.

Single page integration practice

Taking xianyu single page integration as an example, the practical process of integration is carried out through page rendering and interaction.

Single rendering integration

As can be seen from the left side of the figure above, the client needs to request 5 interfaces at the end to render this page, process the logic between the rendering interfaces, and convert the Data returned by the interfaces into ViewModel. After the integration transformation, the original logic on the end side is moved to the FaaS layer, including the aggregation of 5 domain services, business logic processing, field mapping and page layout, without any rendering and business logic on the end side, directly obtain the returned ViewModel to refresh the page. Here’s a flow chart of cloud integration.

Single page interactive operation integration

Can be seen from the chart on the right side, there are four kinds of operating will change real payment, otherwise the operation processing logic in the client side processing, after integration, end side there is no logical calculation, the client can request the service side, each operation with FaaS red envelopes are overdue and other data validation, and back to refresh the page data.

Integrated RESEARCH and development framework

Nexus Framework: An integrated mobile UI Framework based on Flutter.

Logic Engine: An integrated communication and scheduling framework based on Flutter.

Nexus Server: An integrated Server framework based on Dart Runtime.

Code sample

The following figure shows an example of the client’s single-page initialization code

The following figure shows how the FaaS layer handles the initialization request initiated by the client

The above is an example of the development of Flutter+FaaS two-ended protocol. Both ends interact with each other through BinderAction. The State in the Action is of the same type, thus effectively shielding communication details and improving research and development efficiency.

Benefits and Effects

The single page has been launched. Reviewing the whole research and development process, we can see that the cloud integrated research and development architecture is not only a new technical solution, but also the value of expanding the end-to-end working boundary and bringing the reshaping of production relations.

Synergistic efficiency improvement: The three-terminal architecture of Flutter improves overall R&D efficiency by a further 30% compared to the two-terminal integration introduced by Flutter.

Business closed loop: The end and side can also feedback and respond to the business more quickly and make continuous attempts, so as to build a more perfect product model and create more value for the business.

Personnel growth: End-side has changed from a development resource that only focuses on user experience to a technical person in charge of the whole business research and development, from a local perspective that only focuses on end-side to a global perspective that focuses more on business closed loop. The Faas layer calls the underlying domain services to complete its business, so the original server can focus more on the precipitation of domain services.

Summary and Prospect

The three-end integrated RESEARCH and development architecture of Flutter+Serverless can solve the two problems of the original research and development architecture proposed in this paper. By changing the end-to-end functional boundary, the synergy can be effectively reduced. The client can take charge of the whole business, and the server can have more time to settle the field. However, Xianyu also encountered the following challenges when implementing the three-terminal development architecture of Flutter+Serverless:

  • The DEVELOPMENT experience of FaaS layer needs to be further improved. Debugging can only be viewed through GAIA logs. The current plan is to capture platform logs locally and provide remote debugging function of FaaS codes.
  • Operation and maintenance costs increase, such as problem location, link request, pressure measurement, work transfer of safety production, and how to smooth the difference with service.

The above new challenges found in the process of practice have been included in the next stage of work, and I will continue to share my thoughts and solutions on these challenges.

The Idle Fish Team is the industry leader in the new technology of Flutter+Dart FaaS integration, right now! Client/server Java/architecture/front-end/quality engineer recruitment for the society, base Hangzhou Alibaba Xixi Park, together to create creative space community products, do the depth of the top open source projects, together to expand the technical boundary achievement!

* Send resumes to small idle fish →[email protected]