Flutter VS React Native, cross-end solution big PK

On December 30, 2021, the second phase of the industry's first programmer variety show "Ape Desk Party" hosted by Rongyun was launched. The program focuses on the enduring technology selection problem, is it cross-end or native? Is it Flutter or React Native?

Here's a great review:

From the perspective of cost and market coverage, the advantages of the cross-end solution are huge, and the entire platform can be run by writing once.

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

Flutter VS React Native: Ecological Comparison

Compare the ecosystems of the two parties through the basic data of Flutter and React Native on GitHub.

The basic data of Flutter: Watch 3.6K, Fork 19.9K, Starred 134K.

Fork represents potential developers, and nearly 20,000 people follow the language. Needless to say, the number of Stars proves its popularity. When choosing a third-party framework, looking at the number of stars will also help developers reduce screening costs.

There is also an important indicator, the number of Issues. Currently a total of 5K+, 50,000+ have been closed. These data show that the team is very attentive in maintaining the Flutter community and solves the problems encountered by users in the process of use in a timely manner.

Basic data of React Native: Watch 3.7K, Fork 21.6K, Starred 100K. In fact, in terms of time period, React Native's data has advantages. Under this premise, the Watch and Fork scores of the two sides are almost the same, and the number of Stars lags behind. Combined with time period considerations, Flutter wins.

The number of Issues is 1.9K. In comparison, Flutter has a larger number. First of all, this may be because there are many people who use it, and there are many end lines involved, so there must be more problems; secondly, Issues does not mean that there is a problem with the code or framework, or it may be that developers simply do not understand some designs when using them.

So, community prosperity: Flutter > React Native

Flutter VS React Native: Performance PK

From several dimensions, compare the processing efficiency of Flutter and React Native for the same project.

List view benchmarking of performance PK

List view benchmarking, list testing.

FPS, Native 60, RN 58, and Flutter 60 are basically flat. In relatively complex views, the refresh rate is similar.

CPU, while maintaining 60 FPS, Native's CPU usage is 2.4%.

The CPU usage of React Native is 11.7%, which is 6 times that of Native, indicating that it has a lot of redundant work.

Flutter's CPU usage is 5.4%, almost twice that of Native.

Memory, Native is 58, React Native is 139, Flutter is 114. Because Flutter is equivalent to another set of rendering engines.

In terms of power, Flutter is better. The power is proportional to the CPU usage, and React Native is still relatively power-hungry.

In short, from the comparison of List view, Flutter beats React Native.

Heavy animations test of performance PK

Use Lottie to measure the Heavy animations test and see which side performs better when there are many AE animations on the same screen.

Surprisingly, the FPS in the case of many Lottie animations at the same frequency, Native is 30, which is the best; React Native 29; Flutter 9.

React Native may be implemented with Native through the bridge, and only undertakes the task of transfer, so the gap with Native is not big.

CPU usage Native is 18.9; React Native is 15.6; Flutter has a minimum of 12.8. The power is almost the same.

In terms of animation, the performance of React Native is better than that of Flutter, probably because Flutter is not optimized for animation scenes like Lottie.

Performance PK of Even heavier animations test

See how both sides perform on more complex animation effects.

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

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

But we can see that the 2020 version of Flutter has shown great potential. In the case of insufficient optimization, the performance is greater than or equal to React Native.

Coupled with Flutter's performance in community building, it has been adopted by many domestic manufacturers and has developed very rapidly.

From technical solution selection to technology development path

The PK of the cross-platform solution is essentially the choice of a technical solution, and the selection of the extension to the technology development path is also worth discussing. Suppose you want to master a new technology, or dig deep into a technology. How will you choose? The guests also shared their experiences in the program.

On the one hand, based on the accumulation of the front-end, you can choose to be biased towards the back-end to gain a deeper understanding of the architecture of the back-end system.

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

More importantly, Flutter is open source, giving us the opportunity to dig deeper into UI system construction, memory management, compilation, etc. Even if we don't need Flutter in the future, we can use it to understand how a language is constructed, how programs are loaded, how the entire tree is constructed, and how the rendering engine works. These are treasures. Changes remain the same, and if you master the underlying principles, you will have nothing to fear.

Along this line of thought, Rust is a very good direction. At present, manufacturers that use C++ a lot, including Microsoft, have also issued an announcement that they may rewrite 60 to 70 percent of the underlying C++ libraries in Rust.

There is another very important point about technology selection. Your technology selection must be related to the current business, because when learning a language, you must first have a goal or a problem to be solved, and then try to solve it with a new language and technology, which will give you a greater sense of achievement. More effective.

So, what do you think about this issue?
————————————————
Copyright statement: This article is an original article by CSDN blogger "Rongyun", which follows the CC 4.0 BY-SA copyright agreement. Please attach the original source link and this statement for reprinting.
Original link: https://blog.csdn.net/weixin_44764152/article/details/122343812