Flutter Analysis and Practice: Integrated Architecture of Flutter and FaaS in the Cloud

This article discusses the challenges of traditional hybrid development and explores how we can resolve them with an integrated architecture in the cloud.

With the booming development of mobile smart devices, a mobile multi-terminal development framework has become a general trend. Download the Flutter Analysis and Practice: Evolution and Innovation of Xianyu Technologies eBook for step-by-step analyses based on real-life problems, as well as clear explanations of the important concepts of Flutter.

5.2.1 Challenges of Traditional Hybrid Development on the Native, Web, and Server

With the development of wireless technologies and the Internet of Things (IoT) and the advent of 5G, multi-client mobile app development is becoming the trend. The traditional development based on the native, web, and server has low efficiency and cannot meet the needs of development.

We hope to explore an efficient development architecture for independent apps, such as Xianyu. The main ideas are to solve the multi-client problem around Flutter and integrate Flutter with serverless capabilities, such as FaaS, to form a cloud-client integrated development framework and support multi-client development in one cloud, as shown in Figure 5-9.

Figure 5-9

5.2.2 Cross-Client Solution: Flutter or React Native?

Xianyu selects Flutter for high performance. The high performance of Flutter comes from the AOT compilation capability of Dart and the self-developed UI rendering engine, as shown in Figure 5-10. This eliminates the need for switching to native controls by avoiding problems, such as thread jumping.

Figure 5-10

Table 5-1 lists other comparisons.

Table 5-1

	Flutter	React Native/Weex
Performance	Same as that of native	Close to that of native, but weak in long list and rich animation scenarios
Consistency	High	Low
Dynamics	None	High
Standard	Self-developed	W3C subset
Technology stack	Dart	JavaScript and native
Cross-platform support	Mobile, web, desktop, and embedded	Mobile and Weex-web
Community	High-speed growth	Mature

There is no easy way to solve these problems. Flutter and React Native have their own advantages. Many factors determine your choice. The key factor is how to choose solutions. For example:

Do the team members mainly use the frontend HTML stack or the native stack? If the front-end stack is used, you will be more accustomed to writing React Native. If Android or iOS is used, you will be more accustomed to writing Flutter because the development tools and experience of Flutter are more similar to those of native.
Which is more important, dynamics, or the performance of complex interactions? If dynamics are more important, React Native is more suitable. If performance experience is more important, Flutter is more suitable. Flutter's dynamic solutions, such as the solution for transferring JavaScript to the Flutter engine, the Dart CodePush solution, and componentized server assembly solution, are not as effective as those of React Native.
Is a multi-client layout, such as IoT, required? Flutter has an embedded design, ensuring better performance.

5.2.3 Dart as the First Preferred Language for the FaaS Layer

Connecting cloud-client technology stacks is a good way to reduce collaboration. Previously, we used the front-end and Node.js integrated solution. However, if Flutter is used on the client side, Dart is the first choice for the cloud side, as shown in Figure 5-11.

Figure 5-11

Dart is definitely a good choice for the FaaS layer because FaaS runs on the cloud, but is Dart suitable to servers?

Dart emerged earlier than Flutter and was designed for web and servers. Dart has some characteristics of the server-side languages: strong typing, predictability, GC, asynchronization, concurrency, and high-performance JIT and Profiler.

Xianyu tries to use a Dart server to replace the traditional Java server and then embeds the Dart container into the FaaS container. The creation of the Dart server is the first step and also a major step.

Figure 5-12 shows Xianyu's idea about the creation of the Dart server.

Figure 5-12

1) Development period:

Inspired by the hot reload of Flutter, we transplanted hot reload to the server side, which allows the server to be deployed in seconds as the client does.
Each developer was assigned an isolate in the development environment to solve the environment conflicts.

2) Runtime:

Dart is a single-thread asynchronous model, and the concurrency capability needs to be supported by the isolate.
The zone feature of Dart can be used to easily track the call process and record the trace log.
The C++ Extension supported by Dart can be used to access middleware packages that support C++ in Dart. In addition, a service mesh is used to decouple service calls between heterogeneous languages.

5.2.4 In-Depth Thinking on Integration

Although the technology stacks of Flutter and Dart FaaS have been unified, developers on the client side and the cloud side cannot complement and integrate these technologies. The reasons are listed below:

How can we maximize the service closed-loop benefits from integration? Integration not only improves efficiency, but it also allows developers to connect the cloud side to the client side, forming a service closed loop.
How can we remove technical barriers from the cloud? Only technology stacks are implemented. Developers on the client side still cannot write cloud-side apps because they do not understand the development ideas of cloud-side apps. Technical barriers on the cloud side need to be truly removed.
How can the total workload be reduced (1 + 1 < 2)? It is of little significance if all the workload is pushed to one person after integration. Instead, the total workload needs to be reduced.
How can we promote the reshaping of production relationships? Production relationships need to adapt to new productivity.

Figure 5-13 illustrates Xianyu's ideas for solving these problems.

Figure 5-13

The service closed loop enables business developers to think about business in a complete and focused way.
The service closed loop is the workflow direction.
In an early architecture, the cloud side and client side are separated. After the architecture is integrated, there is more space to sink, which brings the possibility of a total workload of 1 + 1 < 2.
Sink-in in the field and tool support ensure architecture integration.

5.2.5 Cases

Case 1: Integration reflects resource balance. In a recent project, the cloud-client integration reduced the project time by 20 days, as shown in Figure 5-14.
Case 2: Integration reflects the service closed loop. As shown in Figure 5-15, developers focusing on business growth need to deliver the right content to the right people under the right circumstances. Integration can free business development from cloud and client restrictions.

Figure 5-14

Figure 5-15

Integration is the direction for building an efficient development framework, which significantly improves efficiency in integration scenarios. Even in non-integration scenarios, the integrated technical components, such as Flutter and FaaS, can be used separately, which also improves efficiency. However, building development frameworks in an integrated manner can make cloud and terminal architecture systems more consistent and make integrated architecture settling possible. In the future, Xianyu hopes to try and explore integration in more directions, such as integrated tools, integrated business platforms, and data-based intelligence.

Community

Flutter Analysis and Practice: Integrated Architecture of Flutter and FaaS in the Cloud

5.2.1 Challenges of Traditional Hybrid Development on the Native, Web, and Server

5.2.2 Cross-Client Solution: Flutter or React Native?

5.2.3 Dart as the First Preferred Language for the FaaS Layer

5.2.4 In-Depth Thinking on Integration

5.2.5 Cases

Read previous post:

Read next post:

XianYu Tech

You may also like

Comments

XianYu Tech

Related Products

mPaaS

Alibaba Cloud Flow

Mobile Testing

DevOps Solution