Author: Idle fish technology – Kaihang
The Flutter is a cross-platform mobile UI framework developed in the Dart language for high performance, high fidelity Android and IOS development using a self-built rendering engine. While the Base Flutter has not yet been tested in a large commercial application, our technical team has put the technology into practice on the most complex and important product details page with good results. This article is an attempt to share the thought/practice process with developers or teams interested in doing similar practices.
Flutter characteristics
In the face of a series of mobile development technologies: IOS, Android, Weex, RN, Kotlin, H5… What does Flutter feature?
Development language selection
Those of you who have read Flutter know that it was developed in the Dart language, rather than popular languages like Java and Javascript, which the Flutter team chose after a careful evaluation of more than 10 current popular languages. Because Dart encompasses the benefits of most programming languages, it is more in line with the way Flutter builds its interface.
Why did Flutter choose Dart
Flutter vs ReactNative framework comparison
| ReactNative | Flutter |
|---|---|
 |
 |
ReactNative
- Using Javascript development, need to learn React, high cost
- JavaScript bridge is required to achieve JS to Native conversion, performance costs
- When accessing the native UI, frequent operations can cause performance problems
- Support online dynamic, can effectively avoid frequent version updates
Flutter
- Dart development can be directly compiled into Native code (easy to learn)
- Built-in UI components and renderers, relying only on system-provided Canvas (no bridge consumption)
- Online dynamics is not supported for now
Why is Flutter revolutionary?
Each framework is created to solve a specific problem. There is no best framework, only the one that works best for your team. Xianyu is an App with rapid business development. It tries and explores more businesses. It adopts the current popular framework and can support online dynamic demand. However, the main link is still only native development for personalized interaction and smooth experience (home page, product details, release idle, etc.). For cross-end development and high performance needs, Xianyu chose Flutter after a full call. To verify the performance of the Flutter, The master selected the important and complex main link business (commodity details) as the first Flutter page practice point in a way to quickly expose and resolve Flutter related issues.
Idle fish Flutter breakthrough point
Flutter and Native mix programming solutions
With the continuous iteration of the Flutter, the stability and quality have gradually improved, and the market has seen the emergence of pure Flutter apps. The free fish adopted the strategy of “from point to surface, one by one” with the Flutter. Firstly, the product details were transferred to the Flutter page, and then gradually expanded to other functional modules. However, it was inevitable to involve the mixed calls of the Flutter and Native page (as shown below) :
| Flutter | Native(Android) |
|---|---|
 |
 |
So mixing calls involves two problems:
- Mixed stack management
- Inter-component call
Mixed stack management
The purpose of Flutter is to unify Android/IOS programming, so an App developed entirely on Flutter needs only to provide a page containing FlutterView, and subsequent page additions/removers/jumps are managed in the FlutterView Navigator. But now we only changed some modules into Flutter development. It is impossible for us to redo all the other pages with Flutter in order to manage the unified page stack. Considering the cost and risk, we need to manage the mixed stack of Native pages and Flutter pages in a unified way. To this end, Xianyu proposed four solutions (as shown below) :
- Launch a new FlutterView every time you start an Activity (Solution 4);
- Extract a single FlutterView or FlutterNativeView, and then reuse the FlutterView or FlutterNativeView every time an Activity is started (Solution 2 or 3);
Considering that a new set of Flutter rendering mechanism is created every time a page is launched, which is too expensive, scheme 2 is adopted in the practice of Flutter. Compared with this scheme, the performance of FlutterView is relatively stable and easy to operate. The following is a comparison of whether FlutterView is reused, mainly to observe the increase of Java memory and Native memory:
The Memory of Android Flutter
How to manage page stack in flutter/native hybrid App
Support multiple shells in a single process
Inter-component call
Having solved the problem of hybrid Programming with Flutter and Native, the next step was to deal with the problem of hybrid engineering, which was caused by the fact that our project was not a complete Project with Flutter (i.e. Android /ios + Flutter). The structure of the mixed engineering project and the Flutter products are shown below:
The project structure
Flutter product
In fact, for the general Flutter project, the application of AndroidStudio to compile the Flutter is the same as the application of Native project. When it is deployed to the server for MTL compilation, the server lacks the environment to compile the Flutter. As a result, the project cannot be compiled. There are two ways to solve this problem:
- Deploy the Flutter compilation environment on each server
- Native engineering relies remotely on the Flutter compilation product
For 1, it would be impractical to deploy the Flutter environment on all servers (even if there are only a few). For 2, Xiaofu exported the intermediate product compiled by the Flutter project in the form of AAR and uploaded it to the Maven library. At last, Native project incorporated the AAR into the final APK in the form of dependency package, which decouples the Native team’s dependence on the Flutter team. Of course, the practical process was certainly not that simple. We optimized the Pod/Gradle compilation script, engine and Flutter_tools during the compilation process, which laid the foundation for the subsequent promotion of Flutter by the group.
Ali Flutter ecological adaptation
The application of Flutter to Xianyu inevitably requires the use of the basic component library provided by the group, but these component libraries are all Native. Considering that for the subsequent promotion of Flutter in the group and the construction of ali Flutter ecosystem, Xianyu team has made appropriate support for the internal basic component library of the group, and private warehouses can be established in the future. Direct Git references.
Principle and performance of ecological adaptation
Multimedia solutions
In an era where content is king, multimedia technology attracts much attention. The performance of the multimedia technology directly affects the user experience. However, the default function of Flutter multimedia has the following defects:
- Single function, such as: the player lacks filter, there is a certain gap with Native Taobao player
- Poor compatibility
In order to improve the experience and optimize performance, Xiashu has made the following improvements to the Flutter player and image performance:
Texture connects to custom video players
Specific plan:
Image performance optimization
Those who have experience in mobile development know that picture display is a high frequency scene in OOM. However, Flutter adopts LRU algorithm-based image cache strategy by default, and the MaxSize of image cache is 1000, which occupies a high memory. Therefore, Idler adopts the following two strategies to optimize picture performance
The on-line effect & Performance comparison & maturity of Flutter
The problem with Flutter is solved, and the product needs to be presented to the user with a stable performance, smooth interaction, and beautiful interface. The following illustrations of the application page, performance, and maturity of the Flutter are based on the details of the online version of the Flutter.
Free fish baby details Flutter application effect online
Native Performance Comparison
The test environment
- Test model: iphone6
- IOS version: 11.3
- Idle fish version: 6.1.3
- Test method: Perform the same operation on each detail page of the Flutter and Native versions: 10 different detail pages from my published page
Note: The diagram below provides only a rough comparison of the performance of the Flutter and Native
Flutter maturity
Extend the discussion
At present, Flutter is still in the Preview stage and has not been tested in large-scale practice. The maturity and stability of the framework still need to be improved. The above is only a brief description of some of the problems encountered by the Xianyu team during the development of the Flutter and the solutions. The problems that a product faces from development to launch are certainly far less than these. With the increase of Flutter coverage, problems will continue to emerge, and a sound and effective performance and stability monitoring system is indispensable. In order to build a new integrated RESEARCH and development system based on Flutter and improve development efficiency, there are a number of issues that need to be addressed, such as dynamic requirements, standardized Dart coding, unified middleware bridging mechanism, rapid release capability, and complete automated test construction. If you are interested in this topic, please join us
Resume delivery: [email protected]