Bytedance Flutter architecture practice
1
Research on mobile cross-platform technology
◆ Why cross-platform?
◆ How does cross-platform technology develop?
Today’s headlines bytedance Flutter architecture practice
◆ What is the selection of cross-platform technology?
◆ What are the unique advantages of Flutter (why Flutter was chosen)?
◆ Why and where is Flutter high performance?
2
Analysis of Flutter engine principle
Take a look at the technical architecture of Flutter first:
C++ engine four core threads
The four core threads of Flutter have different responsibilities: platform thread, UI thread, GPU thread, and IO thread:
★ Platform threads correspond to android and iOS main threads.
★ UI Thread (UI Thread) The main Thread of Android itself, which is an independent Thread.
★ GPU Thread A Thread that runs on a GPU. It mainly processes Skia tasks.
★ IO threads mainly handle IO related tasks, such as image codec, etc.
The specific engine architecture diagram is as follows:
How does Flutter compile into a two-platform application
Thread communication (what mixed development must know)
Here is an example of Bytehop to explain the design of Flutter. Flutter threads rely on Dart apis, such as MicroTask and Future, which are very important and critical for asynchronous tasks.
We can see that the technologies are interlinked. In Android, there is a Handler, corresponding to a Looper Thread, and then a MessageQueue, which stores the Message. Cleverly, Flutter has a similar approach. Flutter has a Looper thread, the main thread reuses the Native thread, and then creates separate Loopers for the other three threads. Unlike Android, however, Flutter uses two queues, a MicroTaskQueue and a queue of regular deferred tasks. Flutter processes a task queue first and then a normal task queue. Compared to Android, TaskRunner is similar to Handler. PostTask is the process of putting a message into a message queue. This is very similar to the Android Handler. So when learning new technology, learn by analogy, flexible to learn better.
The Dart vm
There can be many isolates in the same process, but the heaps of two isolates cannot be shared. The Dart development team had this interaction in mind and designed a VM Isolate, a bridge between user isolates that runs in UI threads. We can put the data in the kernel state, because the kernel state can share the data, and then put the data in the other party’s queue, and the other party can get it and use it. For those of you familiar with Android, this should sound familiar; it’s very similar to what we know as “interprocess communication.”
Bytedance Flutter architecture practice
Maybe it’s not very clear, but what does the process look like? See the picture below:
Bytedance Flutter architecture practice
Isolate1 is the sender, creating a SendPort, and Isolate2 is the receiver, creating a ReceivePort. When we created an Isolate, it had a worker thread that could put tasks into it. SendPort calls the send method to send data to PortMap. Each port in this PortMap corresponds to a MessageHandler of the Isolate. This Handler contains two contents: Normal message queue, one is the OOB high priority message, the order of the data into the queue is prioritized. Finally, the message is encapsulated into a MessageTask and sent to another Isolate. Think back to android-like message queues?
Platform Channels
Bytedance Flutter architecture practice
Flutter provides channels for interacting with Native functions. Android uses MethodChannel, IOS uses FlutterMethdChannel. Finally, Flutter connects the two platforms by using a unified specification to connect the two platforms, exposing some functions and interfaces, and then it is easy to use Flutter to invoke Native functions. This depends on the level of the developer and requires a good understanding of Android or IOS to write plug-ins. Pub. dev also has a lot of open source libraries, but the requirements are always changing during development. The open source libraries are far from meeting the function points of actual development needs, so it is better to master the knowledge points of Platform Channels by yourself.
Bytedance practice on Flutter architecture
Here’s a look at some of byteDance’s key architectural practices:
Containerized architecture
The Bytedance Flutter architecture practices what I personally call “containerization”, similar to the idea of componentization or business layered architecture of native platforms. Is to build extensible interfaces and codes of conduct for common businesses. However, the Flutter containerized architecture should adapt to both Android and IOS platforms. Uniform standards and specifications should be defined for business behaviors of different platforms, and some common business module functions should be encapsulated (some of which can be regarded as base classes of basic businesses). For example: Image call, go directly to the protocol layer here, direct call can be, internal encapsulation is good, direct call, which has a default adaptation, you can also customize. With a “containerized” architecture, differences in the platform’s underlying apis are eliminated, and developers can quickly develop new requirements by invoking internal functional modules or interfaces.
Practice of multi-dimensional integration
Bytehop Flutter architecture practice is to write an application that can run on Android, IOS, and The Web at the same time, saving a lot of development cycles. It integrates multiple aspects of Flutter and Flutter Web, and then customizes the architecture of some internal engines and function modules. Finally, this multi-terminal integrated engineering architecture was created.
Monitoring system
The granularity of Flutter’s built-in performance monitoring tool is crude, using physical averages rather than reflecting real per-frame statistics. The UI thread and GPU thread are handled differently, so physical averaging is really not intuitive.
A common practice for many companies in the industry is that the framework layer counts the time taken by UI threads, posts messages to the UI, and then posts them to the GPU. But there are two drawbacks to this approach: One is that the waiting time is not taken into account. The other is that the UI thread is very fast, but the GPU thread is very slow. When the UI thread sends messages to the GPU thread, it posts at most two messages, and the GPU thread still cannot process the messages.
Bytedance uses a “high precision non-intrusive performance monitoring solution” : the engine layer provides a mechanism to know how many frames to draw, count how many signals you send, and count GPU threads. Another “non-intrusive” aspect is that the framework system automatically recognizes when the performance monitoring roll starts and ends.
Flutter Turbo
This is a performance improvement solution, such as message scheduling, GC suppression, off Semantics, off anti-aliasing, etc. In addition, to improve performance, there is an internal Benchmark running, with these solutions to greatly improve application performance.
Image transparent transmission optimization scheme
There are some optimizations: compilation optimizations; The data side of Flutter products was compressed, Skia was pruned, unnecessary things were deleted, and the engine library was pruned for some functional tripartits.
Although I see the clouds in the fog, I still feel very severe appearance.
In the third keynote of this conference, experts from Bytedance also talked about package size optimization, which I will share with you in a future article.
Start speed optimization
Modified engine code, optimized startup speed, almost doubled. (Although it is awesome, I can’t see or touch it, and I don’t know how to modify it. I can only say that I hope to contribute to the Flutter community as soon as possible, so that all of us who eat melon can enjoy the good fortune of Flutter and get some light from it.)
recommended
Keep your eyes on me! As a developer, it is particularly important to have a learning atmosphere and a communication circle. This is my iOS communication group: 651612063, enter the group password 111, share BAT, Ali interview questions, interview experience, discuss technology, and exchange learning and growth together!
Click to enter group password: 111
