Flutter v/s React Native v/s Native
Overview
As of today, there are two leading Cross-platform app development frameworks available, Google's Flutter, and Facebook's React Native.
It's been a long debate about which framework is better. There are a lot of articles on the web that try to draw out comparisons both qualitatively and quantitatively. Since most of the online articles about this comparison are based on general metrics.
Note: Even though the comparison is between Flutter and React native mainly, Android Native (with Kotlin) and iOS native (with Swift) is also evaluated, so as to measure which Cross-platform framework is close to native.
Test Environment
Android: Samsung Galaxy M40 (SM-M405F, 6GB RAM, 128GB storage)
iOS: iPhone 7 Plus (3GB RAM, 128GB storage)
After every test, device memory is cleared to make fresh space for the new test.
Test Setup
Android: FPS and CPU load and GPU load were measured with Samsung One UI's GPUWatch feature which is available under 'Developer options.
Memory usages were monitored with the Android profiler tool (available in Android studio)
iOS: CPU load, Memory, GPU load, FPS was measured in the XCode profiler.
Test Scenarios
These scenarios have been chosen to evaluate the frameworks.
- CPU Intensive calculation
- Voice Recognition
- Libraries/Tools support
CPU calculations (JSON parsing)
A simple use case of such an event would be JSON parsing. A large JSON is parsed in each platform to measure the time taken. In this example, COVID APIs are used to fetch the cases count of all countries in the world, and these are sorted in descending order based on the number of cases.
Results
React native shows high CPU utilization when suddenly fast scrolled on a list, whereas Flutter has almost no change in CPU usage while scrolling fast.
Voice Recognition
Just the voice recognition support is checked here. Any quantitative metric is not calculated since basically both frameworks are doing is make a native framework API call (microphone) through a bridge.
Results
Libraries/Tools used
A short comparison is drawn between each platform on the availability of tooling/library support that is commonly used in a Production apps. This is just a table of availability of the libraries. A detailed study on some of these libraries is being done parallel to check the feasibility of the actual implementation.
Major Issues in the framework
1. Flutter
WebView API lacks support to interact with the WebView in Android TV apps. (due to which dispatching touch, motion events on the WebView is a challenge.
a. Building AppleTV apps is not officially supported yet. (Github #Issue)
b. Building AppleWatch apps entirely with Flutter is not supported yet (Github #Issue).
There is, however, a workaround with the Apple watch extension.
2. React Native
Building Apple Watch apps entirely isn’t with React native isn’t possible. Similar to flutter, It can be done with an Apple Watch extension.
Few General comparisons
1. Testing Support
Both Flutter and React Native support unit tests and integration tests, but the Flutter documentation looks neater and organized when compared to React Native documentation. Flutter also provides codelabs and lots of samples to learn more.
2. Community Support
Having more active developers for a framework could mean the framework could get more mature. Here’s a statistic of both the frameworks from cuelogic’s article dated September 4, 2020.
We can see that Flutter is catching up quickly with React native despite being announced 2 years later.
3. Developer Productivity
Compared to React Native, Flutter can be seen as being a more productive language. IntelliJ officially supporting the development itself is a huge leap in productivity. Along with that, the documentation, the hot reload time, debugging, all seem smooth and straightforward in flutter.
4. UI Components And Development API
Both Flutter and React native support developing custom components very easily, but the Flutter documentation of all standard widgets, along with the simplicity of the UI concept makes flutter easy to work with. Simple tasks like setting up Google Maps can be seen more easily in Flutter compared to react. The ability to control any pixel on the screen in Flutter gives it even more power.
React Native uses the bridge to port JSX views to Native views which gives a slight drop in UI performance, but React Native seems to be working on eliminating the bridge altogether in the future re-architecture.
4. Setup and Project Configuration
Even though Flutter and React Native both have documentation on the setup of creating new projects, Flutter along with powerful support from IntelliJ IDE plugins, feels more easy and simple than React Native. Flutter also provides a CLI tool called doctor that helps the developer see if Flutter is set up correctly. While React Native, on the other hand, there might be chances we missed something during setup and wonder what it was.
5. Programming Language
React Native uses JavaScript/TypeScript, and Flutter uses Dart. Both languages are fairly easier to learn, support most aspects of app development, and have enough community support for new developers.
Conclusion
Both React and Flutter were tested against different scenarios, but one pattern seems obvious around all tests. When it comes to intensive UI rendering and animations, Flutter always beats React native. React native also shows better results in tasks like sorting, parsing, webview, etc, but for the majority of the metrics, we can see that Flutter is close to Native performant.
References
Flutter vs React Native vs Native: Deep Performance Comparison | by inVerita | The Startup
Flutter VS React Native: A Comparison Based On Criteria.
Flutter vs Native vs React-Native: Examining performance | by inVerita | The Startup
React Native's re-architecture in 2020 | by Rémi Gallego | The Startup
