Posted on: Wednesday July 8, 2020
The inspiration behind research
Pro Web is a leading mobile app development company continuously dig into on-going trends of cross-platform mobile solutions to discover which technology is best Flutter or React Native (or Native) for mobile app development, that’s how Flutter vs. React Native vs. Native came into scenario. We understand that, it was bit controversial as many people would deny using React Native to perform multiple calculations daily — but in this case, CPU heavy tasks are better performed by Flutter or Native apps.
This is the primitive reason why in this post we decided to dive deeper for analyzing the performance of UI which is having a high impact on a regular mobile app users.
Calibrating UI performance is difficult and needs an expert to implement the same functionality in similar way across every platform. We choose a global testing tool to leave no doubts and ensure staying completely objective, since many of them still run (majorly on React Native and Native projects).
UI animations are done using various tools across different platforms so we streamlined everything to libraries supported by each platform. Test results can be variable as per your approaches to the implementation. We always believed in pushing the specific set of tools to such limit where it outperforms every number. Now, let’s have a look at the cases.
For our testing purposes, we were using an affordable Samsung Note 7 and iPhone 6s.
Test case 1 — List view benchmarking
We implemented similar UI on Android and iOS through Native, React Native, and Flutter, along with automatic scroll velocity by using of RecyclerView.SmoothScroller on Android. On iOS and React Native we utilized the approach of timer and programic scrolling to position. On Flutter, we utilized ScrollController for easy scrolling over the list. Here in every case, we got 1000+ in the list view and similar scroll time for reaching the last list element. Moreover we utilized image caching with different libs per platform. More details could be revealed in the source code.
Third-party libraries used in this case:
Loading and caching images — Glide
Loading and caching images — Nuke
Loading and caching images — React-native-fast-image
iPhone 6s test
Test case 2 — Heavy animations
In recent times, majority of phones running on Android and iOS are equipped with powerful hardware. In majority cases, no fps drops could be noticed using usual business apps. So we prepared for doing some tests with heavy animations that could get fps drops. We utilized vector animations created using Lottie on Android, iOS, React Native and capitalized same animations to use with Flare on Flutter.
Having a test on animation through Lottie for Android, iOS, React Native, and Flare for Flutter.
We came to know that removal of even a single animation from the grid increases FPS up to 40% on Flutter. We concluded that Flare is much heavier and not optimal for this type of task that’s why Flutter got such an FPS drop.
Blame this one:
Please Note: The library used here for this case with Flutter was much heavier in comparison to others getting used for more platforms and it might be the reason for fps drops.
Use case 3 — much heavier animations test with rotations, scaling and fade.
Here, we tested to compare the performance in the process of animating 200 images. We also executed scale rotating and fade animations at the same time.
Regular business apps having minor animations and shiny looks, doesn’t require much technology. But if require doing some heavy animations, Native offers the actual performance power to do it. Talking about Flutter and React Native. It’s not recommended to use React Native in a very CPU heavy operation, while Flutter is a great fit for such tasks from both CPU and Memory standpoint.
Moreover the tool you select is dependent upon specific product and business case. If you are looking to build a single-platform MVP — prefer native, but always remember that Flutter apps are compatible with every platform; mobile, web and desktop environments and several times considered as future king of cross-platform development real soon. Even today, Flutter has created a very decent competition for native development tools, especially if you have a restricted budget for development but are still looking for the decent performance of yours app.
We consider the fact that several factors are impacting implementation and benchmarks of each technology, and many of true experts in specific platform can bring out much more out of the preferred set of tools. Although we’ve tried to bring as much transparency into the process as we could by creating a single environment for each app to get tested and a single set of tools to measure the performance, and I hope you liked the result. Yet again our mobile and Flutter teams are happy to receive and carry all the burden of your feedback and suggestions.