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.
|code reusability||up to 90%||up to 90%|
|user interface||uses native UI controllers||uses custom widgets|
|major use cases||Facebook
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
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?
- 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
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.
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…
Have a disruptive cross-platform app idea in mind? Let's talk and see how we can help you bring it to life.