The increasing demand for cross-platform apps – which can perform on both iOS and Android (and some other systems as well) using one codebase and thus companies normally put into creating apps – has brought about the need for developing technologies to build them. Although quite a few solutions have been created, two seem to be most prominent: Flutter and React Native.
Source: Google Trends
The former, brought to you by Facebook, is more mature and boasts greater community support but Google is not going to throw in the towel – in fact, it constantly arms its framework with some competitive features. So what’s the state of this duel right now? Which solution should you choose for your business? Let’s compare them considering a few most important cross-platform mobile development factors as well as the business perspective.
| React Native | Flutter | |
|---|---|---|
| backed by | ||
| launched | 2015 | 2018 |
| programming language | JavaScript | Dart |
| performance | near-native | superbly near-native |
| code reusability | up to 90% | up to 90% |
| user interface | uses native UI controllers | uses custom widgets |
| major use cases | Facebook |
Google Ads Alibaba Groupon |
Stability
To evaluate the frameworks’ stability, we need to take into account a few factors like who supports their growth, when they were released, and who uses them. This can tell us a little bit more about the maturity of a given technology and the further perspectives of its development. Credibility is everything when you consider using such fresh solutions. What matters is not only the framework’s current state but also the high probability that it will evolve and will continue to be supported by its founders and community in the future.
- The story behind the frameworks
Cross-platform technologies are still relatively novel in the app development landscape so most of them don’t have an impressively long story.
React Native was born as a fruit of Facebook’s internal hackathon carried out in the summer of 2003 but it wasn’t until January 2015 that its first public preview saw the light of day at the React.js Con. Two months later, in March 2015, Facebook published React Native on GitHub, thus making it available to thousands of cross-platform enthusiasts all around the globe.
The history of Flutter is shorter but by no means less intriguing. The first version of Google’s cross-platform framework was shown to the public at the 2015 Dart developer summit and back then, it went by the name of “Sky”. The first stable version of Flutter, however, was released only in December 2018. A couple of days ago, on December 11, 2019, Google released version 1.12 and announced Flutter to be the first UI platform designed for ambient computing.
- Flutter vs React Native: the battle of communities
Being open-source and free cross-platform app development frameworks, both solutions have managed to assemble active communities around them. React Native boasts 2044 GitHub contributors who, as of end 2019, made over 18 970 commits. Flutter, on the other hand, has 493 contributors and 16 937 commits.
Speaking of community support, it’s worth taking a closer look at the results of the 2019 Stack Overflow survey as well. When asked about their framework preferences, over 74% of software engineers named Flutter as the loved technology. As far as React Native, 62% of interviewees considered it preferable.
Source: 2019 Stack Overflow Survey
In short, the community around Facebook’s framework is much bigger but the engagement and the improvement intensity are pretty much comparable in both cases.
- Major use cases
Here’s the category whereby React Native rules beyond any doubt. It’s not only because of its longer presence on the app development market but also due to a bunch of other reasons such as using JavaScript.
Looking at the React Native portfolio, you’ll see big players like Uber, Zomato, and Walmart, as well as startups like Soundcloud Pulse, Townske or Huiseoul. And we can’t forget about Facebook with Instagram and Messenger, of course!
Flutter, on the other hand, was initially the core of Google’s services like Google Ads only. However, as the framework is growing, it’s rapidly gaining advocates – among them, you’ll find The New York Times, Groupon, and Alibaba Group.
Performance and UI
This is probably the biggest challenge cross-platform mobile development technologies have to respond to, especially if we’re taking into account the seamless user experience provided by native apps. Quick performance, intuitive navigation, delightful and pixel-perfect design – these are the expectations of most users that Google’s and Facebook’s frameworks have to bear in mind. How do React Native and Flutter look compared to native applications, then?
- Communication
Although there are many factors contributing to the performance, what mostly matters in Flutter vs React Native comparison is the way they communicate with native modules. RN needs JavaScript bridges to do it – which ultimately slows down the app’s work– while Flutter doesn’t. How come? It all boils down to Dart having most of the necessary components inbuilt which allows for immediate access to the native components.
- UX and UI
The difference in the aforementioned way of communication arises from the distinct approach to User Interface adopted by Flutter and React Native. The former cross-platform mobile development framework provides its own set of widgets for Material Design and Cupertino. This, in turn, allows to implement designs of the particular platform as well as to customize them.
React Native, on the other hand, uses not only native UI controllers but also a ReactJS library rich in UI elements. We need to remember, however, that if we deprived React Native of the third-party libraries, little UI elements would be left at our disposal. Thus, nn this regard, the Flutter vs React Native battle is more likely to be won by the former.
Speed and simplicity of development
Time-effectiveness and cost-efficiency are the main advantages of cross-platform mobile development. Speeding up app delivery together with budget savings constitute a perfect mix for startups and SMBs. This value stems mostly from the ability to reuse the code but also from some other attributes as mentioned below.
- Learning Curve
React Native is based on JavaScript which is the most commonly used programming language within the software development community. This alone has two major benefits. On the one hand, since React Native is based on JavaScript, it shouldn’t be a problem for a JS dev to master creating apps with Facebook’s framework. On the other, companies may find it easier to hire knowledgeable coders as the talent pool of JavaScript is relatively vast.
Most popular programming languages 2014 - 2019. Source: The State of Octoverse
Flutter, on the other hand, uses Dart which may have not made it to the programming language mainstream yet but it’s seen the biggest surge in popularity this year according to GitHub’s Octoverse. What’s more, software developers admit that Dart is easy to learn and use as it has a lot of similarities with Java, JavaScipt, and C#. On top of that, comprehensive documentation facilitates understanding all the complexities of this particular language.
- Add-ons
Ready-made add-ons provided by both frameworks’ creators and the community around them are what make cross-platform app development even easier and faster. React Native boasts a massive collection of libraries and other ready to use components that significantly shorten the time to market. Flutter may offer a smaller collection of addons; nonetheless, the ones it offers are its own (not third-party) which makes the framework much more independent.
- Making changes
Dynamic app development calls for a fast implementation of changes. For this reason, features shortening the time needed to introduce modifications are more than welcome in the cross-platform world.
React Native responds to this need by providing the hot reload option and OTA (Over-the-Air) updates (using Expo or CodePush). The former enables tweaking the UI and fixing some minor bugs while the app is running, thus preventing losing the state of the app. The latter allows deploying updates directly to users’ devices without having to publish the changes within Apple App Store or Google Play Store first.
Flutter utilizes hot reloading as well. When invoked, it sends the updated code to the running Dart Virtual Machine, which then reloaded libraries with the modified code to ultimately rebuild the widget tree. Unfortunately, there are also occasions in which the hot reload doesn’t rebuild the widgets or isn’t supported at all.
A preview of how hot reload works with Flutter. Source: Flutter.dev
The solutions simplifying the process of modification are also useful in maintaining the apps as cross-platform mobile development is still very fresh technology and involves frequent upgrades.
Flutter vs React Native - and the winner is…
...none of them. Neither React Native nor Flutter is a silver bullet to create apps using cross-platform mobile development technologies. Right now, the Facebook framework is more mature and stable. Not to mention that it facilitates the software development process by using the most popular programming language – JavaScript – and assuring the support of the wide community around it. At the same time, Flutter seems to grow much faster than React Native. It may be just a matter of time for it to reach equal (if not greater) popularity and approval in the software development world.
Have a disruptive cross-platform app idea in mind? Let's talk and see how we can help you bring it to life.