Use case 1 — List view benchmarking

We implemented the same UI on Android and iOS with the use of Native, React Native, and Flutter. We also automated scroll velocity with the use of RecyclerView.SmoothScroller on Android. On iOS and React Native we used an approach with timer and programmatically scrolling to position. On Flutter, we used ScrollController to smoothly scroll over the list. In each case, we had 1000 items in the list view and the same scrolling time to reach the last list element. In each of these cases, we used image caching with different libs per platform. More details could be revealed in the source code.

Third-party libraries used in this case:

iOS

• Loading and caching images — Nuke

Android

• Loading and caching images — Glide

React Native

• Loading and caching images — React-native-fast-image

Android — GPU tests results are not supported by the benchmark (unfortunately, with the devices we have, and we have many:)) )

Test results

1. All tests have shown approximately the same FPS.
2. Android Native uses half as much memory compared to Flutter and React Native.
3. React Native requires the most significant CPU exploitation. The reason is the use of JSBridge between JS and Native code that incites the waste of resources on serialization and deserialization.
4. Regarding battery exploitation, Android Native has the best outcome. React-native is lagging behind both Android and Flutter. Running continuous animations consume more battery power on React Native.

iPhone 6s test

Test results

1. FPS. React Native results are worse than those of Flutter and Swift. The reason is the inability to use IoT compilation on iOS.
2. Memory. Flutter almost matches native in Memory consumption but is still heavier on CPU. React Native falls far behind Flutter and native in this test.
3. Difference between Flutter and Swift. Flutter is actively using CPU when iOS Native is actively using GPU. Reconciliation in Flutter increases the load on the CPU.

Use case 2 — Heavy animations test

Nowadays most phones running on Android and iOS have powerful hardware. In most cases using usual business apps, no fps drops could be noticed. That’s why we decided to do some tests with heavy animations. Heavy enough to get fps drops. We used vector animations animated with Lottie on Android, iOS, React Native and adopted the same animations to use with Flare on Flutter.

Testing animation with Lottie for Android, iOS, React Native, and Flare for Flutter.

Lottie for Android

Test results

Test results

Android

1. Android and React Native have similarities in their performance. It’s obvious because Lottie for React Native uses Native means (16–19% CPU, 30–29 FPS).

2. Flutter’s outcome is such a surprise, though it screwed up a bit during a performance. (12% CPU and 9 FPS).

We discovered that removing one specific animation from the grid increases FPS up to 40% on Flutter. We suppose Flare is heavier and not optimized for this kind of task that’s why Flutter got such an FPS drop.

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

4. Cold app start. According to this indicator, Flutter is the leader (2 seconds). For Android Native and React Native, it takes around 4 seconds.

iOS

1. iOS and React Native outcomes on this test are almost the same as Lottie for React Native uses native means.
2. Flare and Flutter are not going to stop surprising. Flare definitely has a way to go :D
3. iOS Native requires the least amount of memory (48 Mb). React Native needs 135 Mb and Flutter requires 117 Mb;
4. Cold app start. According to this indicator, Flutter is the leader (2 seconds). For iOS and React Native it takes around 10 seconds;

_Take note: _we used a different library for this case with Flutter which is much heavier compared to those we used for other platforms and it might be the reason for fps drops.

#flutter #react native