Flutter- Why do so many companies love Flutter

Background and Issues

The cost of maintaining an App is very high for small and medium-sized companies. Is there a way to reduce the possibility of the cost without the lack of maintenance of the code?
Is there a solution to a code that can run on multiple platforms and reduce communication costs?

Problem scheme selection

Companies have started to pay attention to and use cross-end solutions (including alibaba and Tencent). Currently, the mainstream cross-end solutions are mainly divided into two types: one is the solution that uses JavaScriptCore engine as virtual machine, representing the framework React Native; The other option is to use a non-javascriptcore virtual machine, representing the framework that is Flutter. Another option is to use Webview – which will be explained later.

The use of cross-terminal solution for development will inevitably replace the development technology of the original platform. Therefore, when we choose cross-terminal solution, we should not only rely on certain indicators, such as programming language, performance, technical architecture, etc., to judge whether it is suitable for our team and products. More engineering metrics like development efficiency, community support, build release, DevOps, CI support, etc.

At present, other projects of our company adopt the combination of Flutter and Swift. I feel that this project will also enter this mode in the next step, so I start the journey of Flutter.

I hope that through this blog, you can understand why Flutter is chosen and the differences between several platforms. Welcome to follow and like Flutter and make progress together, thank you!!

Scheme features and principles

Scheme 1: Webview

Webview is cross-platform based on JavaScript and Webview. The main work is done in Webkit

The earliest cross-platform frameworks are based on JavaScript and WebView, including PhoneGap, Apache Cordova, Ionic, and so on.

WebView mainly builds its interface through HTML and displays it in webviews of various platforms. However, it cannot call some local services (such as Bluetooth, camera, etc.) by default, so it needs to call JavaScript to bridge and call some Native codes to complete certain functions. But according to my own use of WebView, the performance of WebView is not ideal, and the pit in the development process is also more.

Below is a schematic of a WebView – take a closer look

Solution 2: React Native

React Native [RN for short] is a cross-platform mobile application development framework that Facebook opened source in April 2015. It is a derivative of Facebook’s early open source JS framework React on the Native mobile application platform. It currently supports iOS and Android platforms.

RN uses JSX, a JavaScript language similar to HTML, and CSS to develop mobile applications, and uses native UI components to implement the core rendering engine while retaining basic rendering capabilities, thus ensuring good rendering performance.

However, due to the nature of RN, which calls native interfaces through JavaScript VMS, communication is relatively inefficient and is rendered indirectly through native.

Method three: Flutter

Flutter is Google’s mobile UI framework for quickly building high-quality native user interfaces on iOS and Android. Flutter can work with existing code. Flutter is being used by more and more developers and organizations around the world, and Flutter is completely free and open source.

Overall, compared with the React Native framework, the advantages of Flutter are mainly in performance, development efficiency and experience.

React Native uses JavaScriptCore, which is used in browsers to interpret and execute JavaScript code in web pages. In order to comply with the legacy of Web standards, there is no way to optimize performance specifically for mobile. Flutter, on the other hand, uses the new Dart language, AOT and JIT compilation instead of HTML/CSS/JavaScript, and is significantly more efficient than JavaScriptCore.

In addition to the programming language of the VIRTUAL machine, Flutter’s advantages lie in the implementation of the UI framework. It rewrites the UI framework, from UI controls to rendering, completely rewrites the implementation, relies on Skia graphics library and system graphics rendering related interface, to ensure that different platforms can have the same experience.

Flutter uses the Skia drawing engine to draw directly on the CPU and GPU, without relying on any native controls. Native controls written on Android actually rely on Skia for drawing, so Flutter can even be higher on some Android systems than native ones – because the Native Skia must be updated with the operating system. The Flutter SDK is always up to date.

Flutter comparative advantage

Comparison of the Android platform: Flutter, native versus RN and other platforms shows that Flutter performs better than native development

Flutter analysis

Draw schematic diagram of Flutter

The GPU synchronizes signals to the UI thread
Dart is used by the UI thread to build the layer tree
Layer trees are composited in GPU threads
The synthesized view data is fed to the SKia engine
The Skia engine feeds the display to the GPU via OpenGL or Vulkan, so there are two Gpus forming a closed loop

Essential differences between a Flutter and a React Native:

React Native can only invoke system components using JavaScript VIRTUAL machine extensions, which are rendered by iOS and Android components
Flutter is a closed loop that does its own component rendering

Frame rate vs. refresh rate

1. Basic knowledge

FPS: Frame Per Second

Refresh rate: the frequency of the display, such as 60HZ on the iPhone

Development:

Why do we see animation-like effects? 1. That's because it plays so fast, research shows: Running frequency more than 16 p as the picture frame (16 images), the human eye can feel very smooth, when less than 16 frames, feel caton 2, so we usually see a movie, usually 24 frames or 30 frames (lee films shot 120 frames before, the purpose is to make the image interval smaller, picture more fluent)Copy the code

2. Frame rate and refresh rate

The CPU/GPU generates images from Buffer, and the screen retrieves images from Buffer, refreshes them, and displays them.

This is a typical producer-consumer model. Ideally the frame rate and refresh rate are the same, and the screen displays one frame for each frame drawn, but in practice they are often of different sizes. Without locks to control synchronization, problems can easily arise. For example, when the frame rate is greater than the refresh rate, the GPU has already generated the NTH frame before the screen has refreshed the NTH frame. Frame N-1 is overwritten from the top down. When the screen starts to refresh frame N-1, the top half of the Buffer is frame N-1 and the bottom half is frame N-1. The resulting image is a pronounced deviation in the upper and lower parts, called a “tear.”

Double Buffer

1. Basic concepts

To solve the “rip” problem of a single cache, dual caches and Vsync emerged.

The two buffers are the Back Buffer and the Frame Buffer.

The GPU writes data to the Back Buffer, and the screen reads data from the Frame Buffer.

The VSync signal schedules the replication from the Back Buffer to the Frame Buffer. Of course, the bottom layer is not through replication, but through the exchange of memory address, so it can be completed instantly, the efficiency is very high;

Workflow:

At some point, a screen refresh cycle is complete and a VSync signal is generated to complete the copy operation and then inform the CPU/GPU to draw the next image frame.
After the replication operation is complete, the screen starts the next refresh cycle, that is, the data just copied to the Frame Buffer is displayed on the screen.
In this model, the CPU/GPU will only start drawing when the VSync signal is generated.

**2, existing problems **

The drawback of dual caching is that when the CPU/GPU takes too long to draw a frame (say, more than 16ms), Jank (pause, or even white space) can be generated.

Blue indicates that the CPU generates Display List.

Green indicates that the GPU executes the command in Display List to generate the frame;

Yellow represents the completion of the generation frame, displayed on the screen;

The CPU generates the data of blue B, which is drawn by THE GPU, but this is too long. Because this is too long, the second A generates Jank.

After B is displayed on the screen, Vsync signal is sent and A begins to draw, but due to the drawing time is too long, Jank is generated in the second position of B

Rendering engine Skia

Skia (short for Skia Graphics Library (SGL)) is an open source Graphics Library written in C++. Skia is the way that Flutter provides data to the GPU.

Skia is already the official image rendering engine of Android, so the Flutter AndroidSDK does not need to have the Built-in Skia engine. For iOS, Skia is embedded into the iOS SDK of Flutter as the Flutter iOS rendering engine, since it is cross-platform. Instead of iOS closed source Core Graphics/Core Animation/Core Text, this is why Flutter iOS SDK packages are larger than Android.

Once the underlying rendering capabilities are unified, the upper level development interface and functional experience are unified, and developers no longer need to worry about platform-specific rendering features. That is, Skia ensures that the same set of code calls render exactly the same on Android and iOS.

conclusion

From November, I will enter into the field of Flutter, and my blog will be mainly based on the basic exploration of Flutter on iOS + initial experience of Flutter + small application research and development. Welcome everyone to pay attention to and like Flutter, so that we can improve our professional skills and talents in mobile terminal together!!

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Flutter- Why do so many companies love Flutter

directory

Background and Issues

Problem scheme selection