Disclaimer: This post is approved by our React Native and Flutter developers and our CTO.
Since Flutter and React Native are the most popular tools for mobile app creation, as a cross-platform app development company we've been comparing them a lot on this blog. However, we've always been diving deep into details that can help either developers to select the next tool for mastering, or entrepreneurs to decide which tool better fits their business goals.
This blog post is special since it's dedicated to CTO and tech managers trying to make a hard choice between these two frameworks. We'll drop things like history, popularity, number of commits, learning curves, and other stuff.
Instead, we'll focus on development peculiarities, competitive differences, and our engineering insights. And if you want to learn more about these tools, you might want to check out the next blog posts overviewing Flutter and React Native:
Flutter VS Xamarin VS React Native: What’s Best in 2021?
How to Successfully Convert Your Web App into a Mobile App
What is The Best Framework for Mobile App Development in 2019?
Essentials
Flutter is based on Dart, while React works on top of JavaScript. Both are free, open-source, and allow cross-platform development.
JavaScript is much more mature and thus more functional than Dart, Google's custom programming language. Tests show that in most cases JavaScript consumes less memory and executes quicker.
Yet React Native uses a JavaScript bridge to translate its source code into the native environment of the device. This extra interlayer requires extra resources and time and becomes a bottleneck that is absent in the case with Flutter that compiles the code into the ARM (and x86) native libraries directly.
Flutter comes with Flutter SDK. With React Native you'll need to discover, learn and rely on third-party libraries to build an app. That brings additional flexibility at the expense of the effort required to review and selected the libraries that fit you best. And our experience in iOS and Android cross-platform development shows many of those libraries are already abandoned, outdated, or simply poorly documented.
Although taking different approaches, they both are aimed at speeding the development of mobile apps and are based on reactive programming. Both are used by tech giants in various projects: Google Ads and Alibaba.com are based on Flutter, while Walmart and Facebook Ad Manager run on React Native.
We also have many projects utilizing one of these technologies. One of the most prominent is Zutobi, which was initially built with React Native. Yet further scalability requirements and load expectations required major refactoring and we decided to redo it in Flutter. Learn more about this project in our case study.
Top 5 Things You Should Know About Flutter and React Native
1. Business Logic
Flutter follows the BLoC pattern, and React Native runs on Flux. In short, Flux lets React-based apps manage data within a single process, which brings better performance. Flutter's advantage is that it puts a higher priority on incoming requests, which fits apps that require heavy synchronization.
That makes React Native a better choice for building MVPs, while Flutter will be a nice fit for synchronous processing solutions like ride-sharing or taxi driver services.
2. Coding Speed
Flutter and React Native allow faster coding thanks to the prominent features called Hot Reload and Fast refresh correspondingly. They let developers make changes to the code and see the outcome in the app immediately (previously, you'd need to recompile the whole project or a part of it). This is especially helpful when developers work closely with designers to make design-driven decisions.
However, with React Native you might want to optimize the code for each platform due to it using native and bridge elements only. This aspect slows the development with React Native, and this is one of the most first pitfalls we report as mobility app consultants.
3. Codebase Sharing
Both Flutter and React Native allow writing the same code for both Android and iOS platforms, as well as for the web.
However, starting from Flutter 2 you can use your code to make apps for Windows, macOS, and Linux, while React Native supports only Windows 10 at the moment.
4. Testing Effort
With either of the tools, you will write approximately half less as automated tests to cover your QA needs compared to writing native apps. This is often noticeable in the business cost analysis that we prepare for our clients.
However, Flutter is not supported by Jenkins and Travis, the most popular continuous integration platforms for automated deployment and testing. Instead, you'll need to switch to Bitrise or Codemagic.
5. User Interface
Flutter contains widget sets for Android and iOS design that help your app look natively on the mobile platforms by imitating their design. And the app will have the same look on different OS versions (of the same platform, of course).
React Native takes advantage of the mobile operating system's components, i.e. it translates the code into the native UI. That means your app's interface will consist of actually native user interface elements. (And you can use third-party libraries to enable older versions of the UI for older mobile operating systems.)
Yet that means that any OS UI update will result in the unexpectedly – and sometimes improperly – updated look and feel of your React Native app. In addition, Flutter shows better performance in graphic rendering thanks to its Skia engine.
Our Personal Insights
As a company using both Flutter and React Native to provide hybrid app development services, we collected a few significant hands-on insights from our experience. Here they are:
- While React Native indeed translates the code in the native UI, in most cases you'll still spend a lot of effort to style your app as RN UI components are too basic and might not include a certain native method. And if Google or Apple releases new UI components, you might wait for too long for them to appear in React Native. Flutter's widgets are much more customizable and adaptive in this regard (although far from perfect as well).
- A single codebase for both mobile platforms means that apps will work in the same way, but due to the differences of the mobile operating systems, your apps can't access system resources in the same way. This has to be developed separately for each platform and you'll need to understand the amount of this effort beforehand for both tools. And, obviously, if most of the work will be put in Kotlin/Swift, it's better to go native from the beginning.
- Since React Native utilizes the JavaScript bridge interlayer, a significant amount of your effort will be directed at performance optimization. You'll be optimizing the work of components, Flux stores, RAM bundles, and main threads. But the outcome is worth it.
Bottom line
If comparing the tools alone, Flutter will easily seem a better choice. On the web, you'll find mostly stories about switching from React Native to Flutter, and not vice versa.
However, when it comes to real life, as a technical manager you'll consider such aspects as the setup and experience of your team, available budget, deadlines, and the complexity of your project.
For instance, if you have mostly JavaScript developers and your project isn't complex, going for React Native will be an obviously better choice.
When our potential clients reach our software/QA consulting experts with this question, they prefer to dive deep into their project and technical requirements to make a long-lasting choice. And sometimes our recommendations might be quite unexpected.
If you want to learn more about our project evaluation processes, feel free to reach us via any available channel or request a free one-hour consultation with our top-tier experts.
