Original link: medium.com/swlh/flutte… Author: inVerita

Research the back story

In Verita and its mobile development team continuously delve into the performance of the cross-platform mobile solutions available on the market to answer which technology is best for your product, and even your career, Flutter or React Native (or Native), This is how Flutter vs React Native vs Native Part I appears. Yes, this is quite debatable because people can say we don’t perform multiple calculations per day using React Native — probably — but in this case, the processor’s heavy tasks are best performed by the Flutter or Native app.

That’s why, in this article, we decided to look at user interface performance, which has a greater impact on everyday users of mobile apps.

Measuring user interface performance is complex and requires engineers to implement the same functionality in the same way on every platform. We use Game Bench as a global testing tool to dispel doubts and ensure that we remain objective (this doesn’t change the fact that we really like Flutter in most ways 🙂 and still run many React Native and Native projects). Game Bench has a lot of room for improvement, but we managed to put each application into a single test environment with its help, which was our goal.

The source code is open, so please try it out and share your thoughts with us if you’d like. User interface animation is mostly done on different platforms using different tools, so we’ve narrowed everything down to the libraries that each platform supports (in one case), or at least we’ve made every effort to achieve this. Test results may vary and depend on your approach to implementation, and we believe that as a potential true expert in a particular technology, you can push your particular toolset beyond the limits of our numbers, and we are pleased if you do. Now, let’s look at these cases.

Hardware information:

For testing purposes, we used the reasonably priced Xiaomi Redmi Note 5 and Apple 6S.

Repurchase link:

The source code

Use Case 1 – ListView benchmarking

We implemented the same UI on Android and iOS using Native, React Native, and Flutter. We also use Recycler View for automatic scrolling speed. SmoothScroller on Android. On ios and React Native, we use a timer and programmatically scroll to position. In Flutter, we use the Scroll Controller to Scroll the list smoothly. In each case, we have 1000 items in the list view and the scroll time to reach the last list element is the same. In each case, we used image caches from different libraries for each platform. More details can be found in the source code.

Third party libraries to use in this case:

ios

  • Loading and caching images – Nuke

The android system

  • Load and cache images – Glide

Reaction to the native

  • Load and cache images – reflect native fast images

Android — benchmark does not support GPU test results (unfortunately, we have a lot of devices :))

The test results

  1. All tests showed roughly the same FPS.

  2. Android Native uses half the memory of Flutter and React Native.

  3. React Native requires the most serious CPU attack. The reason is that using the JS Bridge between JS and native code leads to wasted serialization and deserialization resources.

  4. When it comes to battery development, Android native has the best results. Reaction machine lags behind Android and Flutter. Running continuous animations on React Native consumes more battery power.

The iPhone 6 s test

The test results

  1. FPS. React Native results were worse than those of Flutter and Swift. The reason is that IoT compilation cannot be used on ios.

  2. Memory. The Flutter almost matches the native machine in terms of memory consumption, but is still heavy on CPU. React Native lagged far behind the Flutter and the Machine in this test.

  3. The difference between the Flutter and Swift. Flutter is actively using CPU, while ios Native is actively using GPU. The coordination in Flutter increases the CPU load.

Use Case 2 — Heavy animation test

Today, most phones running Android and iOS have powerful hardware. In most cases, with normal business applications, you won’t notice a drop in FPS. That’s why we decided to do some testing with heavy animation. Heavy enough to drop FPS. We used vector animations animated with Lottie on Android, iOS, React Native, and the same animations for Flutter as Flare.

Test animation for Flutter using Lottie for Android, iOS, React Native and Flare.

Download Lottie for Android

The test results

The test results

The android system

  1. Android and React Native share performance similarities. This is obvious because of the native lodi’s use of native means (16-19% CPU, 30-29 FPS).

  2. The result of Flutter was so amazing, even though it messed up a bit in one performance. (12%CPU and 9 FPS).

We found that removing a specific animation from the grid increased the FPS of the Flutter by up to 40%. We assume that the Flare is heavier and not optimized for this task, which is why the Flutter gets such a drop in FPS.

Blame this one:

Download Lottie for Android

3.Android requires the least memory (205 Mb); React Native requires 280 Mb and The Flutter requires 266 Mb.

4. Start the cold application. According to this metric, Flutter is the leader (2 seconds). For Android Native and React Native, it takes about 4 seconds.

ios

  1. The results of ios and React Native in this test are almost identical to Lottie for React Native using Native means.

  2. It’s surprising that Flare and Flutter don’t stop. Flare certainly has some way to go: D

  3. Ios Native requires minimal memory (48 Mb). React Native requires 135 Mb and Flutter requires 117 Mb;

  4. Cold application starts. According to this metric, Flutter is the leader (2 seconds). For ios and React Native, it takes about 10 seconds;

Please note: we ** use a different library in Flutter and it is much heavier compared to other platforms, which may be the reason for the FPS drop.

Use case 3 – Even heavier animation tests include rotation, scaling, and fade-in.

In this test, we compared the performance of animating 200 images. Perform zoom rotation and fade-in animation at the same time.

200 images

The test results

The android system

  1. Native shows the highest performance and most efficient memory consumption.

  2. The Flutter shows enough performance to work comfortably, but the memory overhead increases by two times compared to Native.

  3. Reaction machine – does not perform well in this case.

The test results

ios

  1. The iPhone 6s is powerful and doesn’t drop the FPS in all three situations.

  2. Native uses less resources and mainly uses GPU.

  3. React Native primarily uses a CPU for rendering, while Flutter uses a GPU.

  4. React Native uses more memory.

conclusion

For ordinary business applications with little animations and shiny looks, technology doesn’t matter at all. But if you’re doing heavy animation, remember that locals have the best acting skills. Next comes the Flutter and React Native. We definitely don’t recommend using React Native for very CPU-heavy operations, and the Flutter is ideally suited for such tasks from a CPU and memory perspective.

The tool you choose depends on your particular product and business case. If you want to develop a single platform MVP — use local means, but keep in mind that Flutter apps can be built for mobile, web, and desktop environments, and it feels like Flutter may become the king of cross-platform development in the near future, because even today, Flutter also creates a very nice competition for native development tools, especially if your development budget is not too tight, but you are still looking for good performance from your application on different platforms.

We face the fact that there may be many factors influencing the implementation and benchmarking of each technology, and many of you may be true experts on a particular platform and can squeeze more out of your beloved tool set. We tried to increase as much transparency as possible by creating a test environment and a set of tools for measuring performance for each application, and I hope you enjoyed the results. Our Mobile and Flutter teams are happy to accept and take responsibility for your feedback and suggestions.