From a cost and market coverage point of view, the advantage of cross-end solutions is huge, write once to run the full platform.

So, how to choose the cross-end solution? Flutter or React Native?

Flutter VS React Native: Ecological comparison

Compare the ecology of Flutter and React Native with their underlying data on GitHub.

Fundamental data of Flutter: Watch 3.6K, Fork 19.9K, starmode 134K.

Fork represents potential developers, with nearly 20,000 people following the language. The Star numbers, needless to say, attest to its popularity. When choosing third-party frameworks, looking at the Star count can also help developers reduce filtering costs.

There is also an important indicator, the number of Issues. At present, the total is 5K+, and 50,000 + have been closed. These data show that the team has taken great care to maintain the community of Flutter and to solve problems encountered by users in a timely manner.

React Native base data: Watch 3.7K, Fork 21.6K, and starred-100K. Actually, React Native data has advantages in terms of time cycle. Under this premise, the scores of Watch and Fork are almost the same, while the number of Star is behind. Given the time period, Flutter wins.

The value of Issues is 1.9K, compared with that of Flutter. First of all, it may be because there are more people using it and there are more problems involved. Secondly, Issues does not mean that there is a problem with the code or framework, or that developers simply do not understand some design when using them.

So, community prosperity: Flutter > React Native

Flutter VS React Native: Performance PK

Compare the processing efficiency of Flutter and React Native for the same project from several dimensions.

List view benchmarking of performance PK

List view benchmarking

FPS, Native 60, RN 58, Flutter 60, basically flat, relatively complex views, similar refresh rate.

CPU, Native CPU usage is 2.4% at 60 FPS.

React Native’s CPU usage is 11.7%, which is six times higher than Native’s, indicating that it has a lot of redundant work.

The Flutter’s CPU usage is 5.4 percent, almost twice that of Native.

Memory, Native is 58, React Native is 139, and Flutter is 114. Because Flutter is just another rendering engine.

Power, the Flutter is better. Power is proportional to CPU usage, and React Native uses a lot of power.

In short, according to the comparison of List view, the Flutter blows React Native.

Performance PK Heavy Animations Test

Use Lottie to test the Heavy Animations test to see which side performs better with many AE animations on the same screen.

Surprisingly, FPS with lots of Lottie animations in the same frequency, Native is 30, which is the best; The React Native 29; Flutter 9.

React Native may be implemented with Native through the bridge and only performs the transfer task, so it is not much different from Native.

CPU usage Native is 18.9; React Native is 15.6; Flutter has a minimum of 12.8. Electricity is almost even.

In terms of animation, React Native outperforms Flutter, probably because Flutter is not optimized for Lottie.

Performance PK Even Heavier animations Test

See how both sides perform in more complex animation effects.

FPS, Native is 58, Flutter 19, React Native is the worst with only 7.

It should be noted that these test data are for last year’s version. Flutter was released in Version 1.7 in October 2020, version 2.0 in 2021, and recently version 2.8.

However, we can see that The 2020 version of Flutter has shown great potential. Even with less optimization, Flutter has better performance than React Native.

With the performance of Flutter in community construction, it was adopted by many big factories in China and developed rapidly.

From technical scheme selection to technical development path

The PK of cross-platform scheme is in essence a choice of technical scheme, and the choice of technical development path is also worth discussing. Suppose you want to master a new skill, or dig deep into a skill. How would you choose? Guests also shared their experiences on the show.

On the one hand, on the basis of the accumulation of front-end, you can choose a little bit of back-end, in-depth understanding of the architecture of back-end system.

On the other hand, the cross-end orientation of the Flutter is a good choice. First for each end to develop a set of the same interface, the same function, the cost is very high. By doing it across the end, the threshold is significantly lower.

More importantly, Flutter is open source, giving us the opportunity to delve into UI system builds, memory management, compilation, and more. Even if we don’t use Flutter in the future, we can use Flutter to learn how a language is built, how a program is loaded, how a whole tree is built, how a rendering engine does it. These are treasures. There is nothing to fear from mastering the underlying principles.

Along this line of thinking, Rust is a very good direction. Many C++ users, including Microsoft, have announced that 60 to 70 percent of the underlying C++ libraries will be rewritten in Rust.

There is another important point about technology selection. Your technology selection should be relevant to your current business, because when you learn a language, you need to have a goal or problem to solve and then try to solve it with a new language and technology, which is more fulfilling and effective.

So, what do you think about this?