One more flutter vs react native comparison, but on a real case
Big finance company was thinking about launching a new product with a mobile app. They needed a fast solution for both platforms and they started to choose between two cross platform frameworks. It was React Native and Flutter.
Besides parameters such as performance, framerate, battery consumption — there are some valuable business characteristics like hiring difficulty, team cost expertise support.
When this company approached us with this problem, we decided, in addition to answering standard questions, to show them the difference using a real example by building an mvp with minimal functionality that will answer many of their questions, since both expertises were present in our team.
Project: app with 2 screens.
1 — read data from credit card with camera
2 — read data form credit card with nfc
Performance/graphics
Flutter:
Stable 60 fps, support for 120 Hz displays, warming up shaders, good at animations, fast animation development, fast application start
React Native:
Up to 60 fps, does not cope well with heavy animations, application startup takes longer.
Framework support
Flutter:
Supported by Google and the community, they develop ready-made libraries for use, as well as a very large number of popular libraries from the community.
React Native:
Supported by the facebook team, lots of libraries, big community, easy to access because javascript is very popular.
Integration with native platform (android and ios)
Flutter:
Stable and fast bridges are used to deliver messages with (if necessary) payload. Native libraries are connected in the same way as when developing a native application and are used in the same way. You can also open native screens and use all other native functionality.
React Native:
To work with the native, it is necessary to develop communication bridges with the native, which are difficult to develop and still have several unresolved problems.
Developing speed
Flutter:
Fast due to hot reload, hot restart and widget system. A large number of ready-made widgets.
React Native:
There is a similar hot refresh, but in most cases it does not work stably, breaking the work of libraries, javascript is unsafe, many components need to be updated manually.
QA
Flutter:
Widget testing, unit tests, integration testing. Test SDK comes with Flutter.
React Native:
Testing tools are inefficient as different javascript engines are used for different debugging modes.
Hiring
Flutter:
Fewer resumes and vacancies due to relative novelty, but Dart is a mixture of other OOP languages, which significantly lowers the threshold for entering the language for a completely unfamiliar person, which affects the quality and speed of selection, and the average salary is higher.
React Native:
More vacancies and resumes, low entry threshold due to javascript, which has a greater negative impact on the quality and speed of selection.
Hours for developing demo project:
Flutter: 10
React Native: 16
Problems encountered during this development:
Flutter:
There was no flutter library to read the card number. In the native part of the library, I had to use part of the code from another native library.
React Native:
Problems with the gradle version for connecting libraries, long project initialization, non-working project release due to library versions.
Application build time from scratch (Macbook Pro m1), sec
Flutter: 60s
React Native: 2m 40s
Assembly file size (debug version), mb
Flutter: 30,8
React Native: 50,4
As a result, after analyzing the risks, the company chose Flutter to develop its product.
Would love to hear your opinion on that, we are always happy to discuss it
Written by PurplePlane
Found our articles interesting and want to partner with us or join our team? Feel free to write at manager@purpleplane-it.com
