Tom
14th October 2020 · 25 min read

The world. It just keeps on changing.

And nowhere is that more true than in the current cross-platform app development world, where a wild-west style showdown is brewing between Sheriff React Native & the mysterious stranger, Flutter. Both are clearly capable of delivering excellent results with big names increasingly, publicly, taking sides.

But which one should you choose when developing your next app? Let’s get to it.

Quick Overview
React Native Flutter
Released March 2015 F8 Conference December 2018 @Google I/O
Developer Facebook Google
Programming Language JavaScript Dart
Users: Microsoft; Skype; facebook; NatWest; nowtv; instagram BMW; googlepay; eBay motors; alibaba
Github Stars: 90.4k 102k
Components Library Very large inclusive library Smaller, non-inclusive
Adaptive Components? Some. adaptive automatically No, manual configuration required
Learning Curve easy, particularly React or JS users steep, Dart (basically: mixture of JavaScript, C#, and Java) is a proprietary language
Main Architecture Flux; Redux BLoC
Ecosystem mature, support of massive companies worldwide. many packages available new, promising client list. limited packages
Hot Reload Yes Yes
Technology JavaScript bridge Skia in C++
Outpace Competitors

You might know the tricks of the trade - but you need a technology team beside you every step of the way.

Chapter 1
Why are Mobile Applications Important?

New data released in early 2020 shows that we are increasingly using mobile apps to manage and plan virtually every part of our lives. 92 percent of the world’s internet users are now connected via mobile devices, with mobile apps accounting for 10 out of every 11 minutes spent using online services. The average user will now spend only 9% of their time online web browsing on mobile devices, and mobile users now account for 50.1% of time spent on the internet - surpassing more traditional means for the first time.

Nearly 60% of the world’s population is already online and more than 5.19 billion people use mobile phones. This is an increase of 124 million (2.4%) in 2019/20 and will continue to rise. So, as of January 2020, 4.5 billion people are using the internet, half of them are on mobile devices and most of the time they are using an app. But what type of apps? Here are the most popular apps used by category:

mobile apps graphic
Use of mobile apps by category

It is fair, therefore, to say that apps are here to stay, with 2.96 million published apps on Google's Playstore and 2.2 million on Apple's App Store. In terms of revenue, mobile apps are expected to generate $581.9bn in 2020 with the trend increasing year on year to over $935bn by 2023.

graph of mobile app revenue
Worldwide mobile app revenues
Chapter 2
Who, What, Why, Where, When, How? React Native vs Flutter

When comparing the options we first need to break down the two forces:

In React Native, Facebook are providing a framework that has been developed primarily as an internal interest but is free to use. This is achieved using existing architecture & language, therefore making it highly accessible and incredibly flexible. In theory - with the correct 3rd party libraries - you can make anything and the bare-bones nature of the framework encourages constructive freedom. But it is up to the developer community to “do” almost everything. Luckily, React Native developers are a passionate & supportive community.

vs.

Flutter. The people at Google, who have done what they do so well, are attempting to create a free to use, all inclusive environment packed full of tools & widgets in the form of a User Interface (UI) software development kit (SDK). Eventually, they hope this will lead to the holy grail - true single codebase - and global domination. Which, in itself, is both impressive and terrifying in equal parts.

But what are we actually talking about? What are the fundamental differences between the two options? Is there a reason to use one over the other or is it personal preference? What product is being provided for developers to use?

Chapter 3
Native vs. Cross Platform Development

When it comes to development, almost all developers and businesses are of a similar opinion when it comes to cost. Cost is bad. So only writing and maintaining one codebase for multiple platforms to manage the increasingly identical consumer experience means development costs should be lower. Which is good.

How much lower will depend on a number of factors, including the development team and business structure. But this can also make the development process significantly faster: “…[up to] 40% faster than development with native SDK”, according to Ardiansyah Putra, Mobile Developer at Eunomia International. Startups & SMEs are likely to benefit the most, primarily due to either being able to start from scratch or due to the inherent flexibility of smaller businesses.

Currently, funds allowing, native mobile app development (Android/iOS) is still superior to cross platform apps. So for apps where performance is critical, native solutions (android studio/xcode) are still the only real viable alternative. This is especially relevant for very large businesses where rigid structures are in place, security and stability are vital, or for businesses consisting of several related but fundamentally separate entities (e.g. HSBC) that need consistent customer facing portals.

There are several big problems with native apps. They are mainly:

Cost

The significant build and maintenance costs, as well as the likelihood of possibly requiring two developer teams to create, manage & maintain the apps long-term.

Its increasingly obvious natural obsolescence

Whether Google succeeds or not, cross platform development will continue to exist and humanity now knows a single codebase is possible. So it is just a matter of time before more singular solutions come to market.

Who you will need to contact to obtain these licenses will depend on where you are based.

Facebook are constantly redesigning React Native. Since 2019, they have taken each of the four core sections (React, Javascript, Bridge, Native) and improved them individually. This an attempt to overcome the very obvious limitation of asynchronous JSON messages via The Bridge, sent to the native code where there is the expectation but no confirmation of a response. Fundamentally, RN is just another work-around solution based on Javascript because it is an established language, but with the cost implications and current economic and pandemic climates this really does highlight the need for a complete cross-platform solution.

And that is something only really being proposed by Google. The biggest problem with Flutter lies in the fact that Google has a terrible habit of killing products. The fear of this is so great within the developer community that it virtually guarantees React Native’s safety as the only other viable solution. If Google can, as they appear to be doing, build confidence it becomes difficult to argue against their logic. But it is a big “If” as Google’s eventual solution would see Fuschia - Google’s own Operating System to run across all devices - work alongside and eventually replace Android. Android, of course, is also owned by Google.

Chapter 4
So You Want to Cross(-platform) to the Darkside...

But who will do the work for you? And using which cross platform framework? Do you already have a dev team with specific skills or passions? Need an MVP? Do you need to publish your app quickly?

Before making any decisions there are several factors to consider. Developers and engineers are available for both Flutter and RN, however finding experienced developers can be a problem and this is currently one of the biggest limitations of cross-platform development. Although RN’s greatest advantage is the established status of JavaScript, the extent of its reach and the reusability of existing code, being able to code in JS isn't enough on its own. Mobile platform experience is still vital and without this a period of lower productivity should be expected at least initially.

With Flutter the main problem lies within its infancy, exacerbated by the need to learn a new and unique programming language - Dart - and the environment application. As such, from a developer hiring stance, developing a new app from concept to deployment and beyond is more expensive with RN, mainly due to there being less demand, and a smaller pool of experienced devs (at time of writing) using Flutter. At Flutter’s current rate of growth, however, hiring costs will rise proportionally alongside the increased development experience and product stability until both options are similar. It is very difficult to put a price on bespoke app development as there are so many parameters, but once you have an experienced team in place, development can move much faster than native development. This is especially true of Flutter, where an experienced team can work very efficiently.

MVP

If you need to build an MVP (Minimum Viable Product) for your app – for a pitch to clients or showcase for potential investors – cross-platform is a good option, particularly Flutter if you need it done fast. There are many examples of Flutter being used to build and publish apps quickly, typically in 9-20 weeks.

"Flutter played a key role in the HuYu project. We were amazed by the speed in which we got the app to market – it took 16 weeks," - Karyn Mukerjee, dunnhumby’s Director of Data Innovation.

So for startups or businesses with a product new to the digital world, Flutter, for now, appears to perform better, uses less resources than React Native and in doing so behaves more like native solutions (Kotlin/Swift). Add to this the single codebase and better use of visually identical native components across both operating systems, and OS generations. So unless you have an experienced RN team on hand, Flutter is probably the most direct and effective solution.

Comparison:
User Interface (UI)

Flutter uses a technique called ‘Composition’ to build a UI with small UI blocks - or ‘widgets’ - and apps share a single codebase, so they look as good on the most current operating systems as they do on older versions. The apps look and behave similarly across iOS and Android thanks to Google’s UI toolkit-bundled Material Design (which implements Google’s design language) and Cupertino (for Apple’s iOS Human Interface Guidelines) widgets, as well as Skia C++ engine which includes all relevant protocols and channels.

With RN, a JS bridge connects the framework to native modules so application components look just like their native counterparts. Therefore, any OS UI update should also upgrade the app’s components. Which is great. However there is a - albeit small - risk of this breaking the UI. Which isn't great.

Build Speed

React Native uses Javascript and currently this makes it a better choice than Flutter when developing a complicated, large, deep-rooted cross-platform app. Especially if there is a chance it will be ported to the web or desktop at a later time. Additionally, the significantly larger pool of experienced developers, more robust support and extensive documentation is a big plus.

This will certainly become less of an advantage as more devs become familiar with the dart language and the community grows, but for at least the next six months (not least because the landscape changes every 6 months with new or different players entering/exiting the frame) there is little chance of this changing. Currently, RN's "learn once write anywhere" philosophy is slightly ahead because more people unfamiliar with your project would be able to progress faster should circumstances change.

Application Size

Although still much bigger than native apps, both RN & Flutter have been bringing the size of their apps down consistently with framework improvements and a simple "Hello World" app now comes in at under 5mb (Flutter) and 7mb(RN).

In a study by Leancode, the average app size comes in at 32MB for React Native and 11MB Flutter. Although apps aren’t always comparable due the differing nature of the apps themselves, these figures are supportive of a general trend as can be seen in the “performance” section, below.

Performance Comparison:

React Native requires the most significant CPU exploitation due to the architectural JavaScript Bridge between JS and Native code. This is a problem as it wastes resources on serialization and deserialization.

Flutter, on the other hand, generally performs better and faster as it utilises a javascript layer and compiles to ARM or x86 native libraries. This seems to become particularly relevant when dealing with heavy animations and large image files where - as inVerita discuss in detail - Flutter outperformed RN and arguably kept up with native.

Read More: inVerita's Results

From inVerita's results it is clear that RN is lagging far behind native solutions but Flutter is getting much closer and even outperforming Swift. This is supported by developers:

"React Native is just a wrapper over native methods, so it requires a bridge... this becomes a bottleneck when you have a lot of native calls happening. with Flutter components are designed by Flutter engineers, there are fewer native calls to the bridge," - Ishaan Bahal, Co-founder at Meeve.

In addition to the inVeritas reports, results from Xian Yu’s blog post can be seen below. They go further, showing significantly different performance depending on the hardware used; in this case testing, various performance factors of iOS: iPhone 5C (iOS 9.0.1) / iPhone 6S (iOS 10.3.2) & Android: Xiaomi Mi 2S (Android 5.0.2) / Samsung Galaxy S8 (Android 7.0). Xian Yu summarize that the Flutter team has targeted their approaches for different models in order to maximise the user experience based on the capabilities of the handset.

graph regarding iPhone 5C
iPhone 5C (iOS 9.0.1.)
graph regarding iPhone 6S
iPhone 6S (iOS 10.3.2)

As can be seen marked in red, in terms of CPU utilization, RN's performance is slightly better than Flutter on low-end models but lower on mid-range models. Although both share similar initial memory on low-end models, suddenly Flutter exceeds React Native by 28MB on mid-range models which is the result of Flutter's memory policies for low-end and mid-range models. But what policies? And what are the 30MB for?

The answer: Dart Virtual Machines (VMs). For low-end models or models with less available memory for processing, a Dart VM uses small amounts of initial memory, allocating memory resources at runtime instead. This results in greater CPU consumption as can be seen above. On mid-range models, more VM memory is pre-allocated thus reducing CPU intervention.

Android results were hugely in favour of Flutter, where in terms of memory usage Flutter initially exceeded React Native by 40 MB at the low-end, but:

"React Native's memory usage soared during tests, while Flutter's remained stable. The React Native code needs to be optimized. For a given set of code, Flutter's memory usage is similar on Android and iOS, while React Native's code needs to be adjusted on one of these two systems."

In terms of CPU utilization Flutter beat React Native on high- and low-end models, especially on the low-end, and in FPS and smoothness performance Flutter also outperformed RN.

Quality Control & Testing:

When talking about testing and the available tools for Flutter & React Native both score valuable points but for different reasons. Testing is a vital element of development. What both parties do is provide excellent options and this is certainly an advantage cross-platform has over native development.

It really doesn’t matter how good an app looks or if it performs complex calculations - if it doesn’t work, or works poorly, no-one will use it. Programs like Jest (RN) make writing tests much easier, and the easier tests are to write and run the more testing gets done! With Flutter everything is already in place for you out-of-the-box, including testing infrastructure for Unit, Integration and End-to-End tests. And without the need for rendering to the screen.

inVerita published results comparing four applications developed using cross-platform and native, looking specifically at: (i) lines of code and (ii) functional vs cosmetic bugs.

Project A - mobile app for a logistic company (Android/Kotlin)
Project B - mobile app for a tour agency (IOS/Swift)
Project C - mobile app for a tour agency (React-Native)
Project D - software for a clinic network (Flutter/IOS+Android)

graph comparing lines of code
Lines Of Code
graph comparing number of bugs
Bugs

The results, frankly, speak for themselves (although inVerita do go into more detail in their post) but in terms of cross-platform competition, inVeritas certainly give Flutter a huge advantage over React Native.

Chapter 5
So Now What?

Is RN destined to fall? Is anyone actually jumping ship or is this all just Flutter hot-air? Moving from native development to cross-platform is all well and good, but have many companies migrated from RN to Flutter or is it all just hype?

Actually, no. Although the reasons vary, the overwhelming feeling is that Google's all-inclusive environment, eventual true single code and faster build speed is the future we want. And for good reason.

"....everything is nearly instant to reload, complex UIs get built in hours, and the code itself is very easy to read through and maintain,"
Andrei Diaconu - Founder, Postmuse

The world of programming is at its very core composed of individuals more than familiar with finding unorthodox solutions due to limitations, and in that respect are typical of any industry trailblazers. As industry evolves, dedicated solutions arise and eventually become a ubiquitous standard.

React Native is the perfect example of a mostly fit-for-purpose solution that works, whereas Flutter will be completely built-for-purpose (if and when Google’s larger plan comes together).

But that doesn’t mean Flutter is always the best option. It may not be optimal for apps with very little UI or apps that require complex integrations with the host platform, for example. If you need functionality and heavy use of Swift or Kotlin it would be advisable to pursue native solutions, too. Additionally, due to its age there are still integration issues including a robust solution for in-app purchases, cryptocurrency libraries and there is no support for Apple Watch or tvOS apps compilation (which require Bitcode support).

But several companies have made the jump, including big companies, like AirBnb & NuBank:

"We found the Flutter development experience to be superior, with better hot reload capabilities, robust official documentation, and a more stable API,"
Alexandre Freire - Director of Engineering, NuBank

Start-ups especially are currently experiencing the best results, most quickly. Reflectly, a mindfulness app was originally built entirely in React Native but ran into massive problems and a 6 week delay with the cross-platform compatibility of their UI between iOS and Android. These problems were solved by switching to Flutter:

"...we simply could not output our intended features fast enough [with RN],"
Jacob Kristensen, founder + CPO, Reflectly

Last but not least comes the question of market share and momentum. A study by Jetbrains found that React Native apps are still the most popular when selecting a framework with a 42% share in 2019 & 2020, whereas Flutter occupied 39%, up from 30% in 2019, and surpassed previous best-contender Cordova for the first time.

graphic of creating an app
Cross-platform framework use 2019 & 2020

This is supported by Google Product Manager Chris Sells recent announcement of an 80% increase in Flutter apps published to Play store between April - July 2020 (from 50k to 80k). That said, a further Jetbrains study looking at the most used programming languages over 12 months found Dart was used by 9% but JavaScript was used by a massive 70% of developers and that kind of overall reach is going to be hard to curtail.

Contact us for help creating your perfect cross-platform application.