Native vs Flutter vs React Native: testing performance in working with UI elements
We constantly study the performance of cross-platform mobile solutions available in the market. We want to know which technology is best for developing a product.
In this article, we decided to investigate the performance of GUI rendering, which is of great importance for users of mobile applications. In simple words, any brakes will be visible to the naked eye.
Measuring user interface performance is a complex task that requires the same implementation of the same functionality on all platforms. As a testing tool, we used GameBench to be confident in our objectivity (this does not change the fact that we really love Flutter, and still doing a lot of projects on React Native, as well as doing native development). We managed to put each application in a single test environment.
The source code is open, so if you want, experiment and share your thoughts with us. In UI animations, different tools are used depending on the platform, so we narrowed our scopes down to the libraries supported by each platform (except for one case), or at least we did everything possible to achieve this. Testing results may vary and depend on your implementation approaches. We will calculate that you, as a true expert in a particular technology, can choose and customize your set of tools that will provide higher rates. We will be happy if you do this and tell us what happened.
For test purposes, we used Xiaomi Redmi Note 5 and iPhone 6s.
Link to repository: Source code
Test 1: List view
We implemented the same interface natively (on Android and iOS), on React Native and on Flutter. We also automated the scroll speed using the RecyclerView.SmoothScroller on Android. On iOS and React Native, we used a timer and software scrolling. On Flutter, we used the ScrollController to smoothly scroll through the list. In each case, we had 1000 items in the list, and we fixed the same scroll time to the last item in the list. In each of these cases, we used image caching with different libraries for each platform. See the source code for more information.
Libraries for loading and caching images
Unfortunately, the benchmark does not produce GPU test results for Android devices. We tried different but alas.
Other Android test results
- All tests showed approximately the same FPS.
- Android Native uses half as much memory as Flutter and React Native.
- React Native requires the most CPU usage.The reason is the use of JS Bridge between JS and Native code, which leads to the loss of resources for serialization and deserialization.
- Regarding battery life, Android Native has a better result. React Native lags behind both Android and Flutter. Running continuous animation consumes more battery power on React Native.
Test results for iPhone 6s
- FPS. React Native has worse results than Flutter and Swift. The reason is the inability to use IoT compilation on iOS.
- The amount of memory. Flutter is comparable to Swift in terms of memory consumption, but it loads the processor harder. In this test, React Native lags far behind Flutter and Swift.
- Flutter vs Swift: Flutter actively uses the CPU, Swift actively uses the GPU.
Test 2: Heavy Animation
Currently, most phones running on Android and iOS have powerful hardware. In most cases, when using regular business applications, no FPS crashes were noticed. That is why we decided to conduct some tests with heavy animation. To create vector animations, we used Lottie for Android, iOS, React Native and Flare - for Flutter:
Lottie for Android, iOS, React Native and Flare for Flutter .
Test results for Android
- Android Native and React Native are comparable in performance. This is obvious because Lottie for React Native uses native calls (16–19% CPU, 30–29 FPS).
- The result of Flutter was surprising, although it was screwed up a bit during testing (12% CPU and 9 FPS).
- Android Native requires the smallest amount of memory (205 MB); React Native requires 280 MB and Flutter requires 266 MB.
- Cold start application. According to this indicator, Flutter is the leader (2 seconds). For Android Native and React Native, it takes about 4 seconds.
We found that removing one animation from the grid increases FPS to 40% for Flutter. We assume that Flare is heavy and not optimized enough for this kind of task. That's why Flutter had such a drop in FPS.
Take a look at this:
Test results for iOS
- The results of iOS and React Native in this test are almost the same as those of Lottie for React Native.
- Flare with Flutter never ceases to amaze. Flare in this test is generally well done!
- The native code for iOS here requires the smallest amount of memory (48 MB). React Native requires 135 MB and Flutter requires 117 MB;
- Cold start application. According to this indicator, Flutter is the leader (2 seconds). For native iOS and React Native code, it takes about 10 seconds.
Please note: here we used a different library with Flutter, which is much heavier than the ones that we used for other platforms, and this may cause the FPS for Flutter to drop.
Test 3: Heavy animation with rotations, scaling, and fading
In this test, we compared animation performance with 200 images. Rotation and scaling are performed simultaneously.
Test results for Android
- Android Native has shown the highest performance and most efficient memory consumption.
- Flutter showed very close to Native fps and twice as much memory consumption, but still decent performance.
- React Native showed poor performance in this test.
Test results for iOS
- iPhone 6s is powerful enough to prevent FPS from falling in all 3 cases.
- The operation of native code required less resources, since the GPU was mainly used.
- React Native primarily used a processor for rendering, while Flutter used a GPU.
- Also, React Native ate a little more memory.
For business applications with ordinary animation and beautiful appearance, the choice of technology for development is not essential. But if you need heavy animation, keep in mind that in this case native development will provide the best performance. Next comes Flutter and then React Native. We would definitely not recommend using React Native for tasks that can consume a lot of processor resources, while Flutter is great for tasks both in terms of processor and in terms of memory.
The choice of tool depends on the specific product and situation. If you want to develop MVP for one platform, you can choose the native development, but keep in mind that Flutter allows you to create applications for both mobile devices and the web. So, perhaps, Flutter in the near future will become the market leader in cross-platform development. Already today Flutter is very worthy of competition with native development tools, especially if your development budget is small, but you still want to provide an acceptable level of application performance.
There are many factors that influence the process and development standards for each technology. We tried to maximize the transparency of the process, providing a single test environment for each application and a unified set of tools for measuring performance.
Need a server for a mobile application ? Take a look at our epic servers ! These are servers with the latest AMD EPYC processors! The maximum configuration will allow you to place a project of any complexity - 128 CPU cores, 512 GB RAM, 4000 GB NVMe.