That means its relatively easy for React developers to also learn React Native, and vice versa. Which has led to a deeper cross-skilled talent pool – a strong business case for many project sponsors to build cross-platform mobile apps in React Native.
But Facebook-backed React’s mobile development library now has some serious competition. It comes in the shape of Google’s Flutter – a framework based on the search engine giant’s Dart language.
Only released in 2018, and moved out of beta in January 2019, Flutter is still a relatively immature framework. React Native has been evolving since 2015 and has a good head start. A position strengthened by the popularity of Reactjs for web development. But Flutter has rapidly gained traction and popularity, especially in mobile development, due to its capability to support material design, motion, and visual-oriented widgets for both Android and iOS. This also made Flutter mobile development the best fit for MVP and PoC projects.
On Github, the Flutter repository has already overtaken React Native on ‘stars’, which developers use to either signal approval or bookmark. Flutter has even nearly caught React Native up on Github repository results, with 178,364 compared to 197,840 and has already been annointed in some quarters as “the future of mobile development”.
Of course, while Github stars are a popular metric against which to judge the popularity of programming languages, frameworks, libraries and development tools, it is just one indicator. It’s also not an indicator that offers any insight into the technical fit of one technology vs another in the context of a specific development project. Nor the business case, which can be equally important.
That is the aim of this blog. We’ll look at Flutter vs React Native, comparing their technical strengths and weaknesses within the context of different use cases. As well as the business case for each, which can be just as important.
[text_on_the_background title=”When does IT Outsourcing work?”](And when doesn’t it?)
Find out HERE[/text_on_the_background]
Before digging into the technical and business case differences between React Native and Flutter, and their implications on which is better suited to different use cases, let’s very briefly introduce the two rivals.
“The main difference between building browser-based apps in React and mobile apps in React Native is that, in former, the virtual DOM is used to render browser code in Reactjs. While in the latter, native APIs are used to render components in mobile. The code communicates with different environments”.
“Otherwise, much of the rest of the process is the same. If a developer is experienced the patterns of props, render props, components, HOCs and lifecycle in React, they are much of the way towards being able to work in React Native. The cores rules are the same. They will only have to learn how to retarget for an Android or iOS environment, rather than a browser”.
The React framework that’s actually a library – K&C
The similarities between the two libraries offer several advantages, not least of which is that developers with experience in one are generally able to quickly learn the specifics of the other. With React currently the most popular frontend development technology by some distance, that’s no small edge and one we’ll go into in more detail.
Dart is generally considered easier to read than JS and other popular programming languages, thanks to a syntax that is similar to that of a human language. It uses fewer commands but more options. And developers can choose their own names for variables, making any code they write more understandable for themselves. Though this deviation from standardisation does need to be carefully considered in the context of projects multiple devs will work on.
Flutter compiles Dart to binary code, which allows it to match the native performance of Objective-C, Swift, Java or Kotlin. Inspired by the success of React, which overtook its Angular framework in popularity, Flutter uses a declarative approach to build its UI based on widgets (components). Widgets are only rendered when necessary, usually when their state has been changed, in a way reminiscent of React’s Virtual Dom.
Both React Native and Flutter are popular choices, currently the most popular choices, for the development of cross-platform mobile applications able to function on both Android and iOS devices. That popularity is no coincidence and they are both clearly great mobile development tool kits.
But what are the technical qualities that differentiate the two, and their strengths and weaknesses, generally and in the context of different use cases? Can mobile applications developed in either Flutter or React Native be said to demonstrate better performance on particular metrics such as response time, or in the context of specific use cases? And if so which?
Let’s break it down.
All great rivalries are actually borne from the fact that the competitors have a lot in common. Otherwise, there wouldn’t be such an intense level of competition. And React Native vs Flutter is no exception to that rule. Before digging into their differences, it makes sense to first address the shared qualities that the rivalry is based on.
So what do the two cross-platform mobile development toolkits have in common?
The biggest similarity between Flutter and React Native, and ultimately why developers and project sponsors often face a straight final choice between the two, is that they are both very good cross-platform mobile development technologies.
Cross-platform frameworks create apps that can run on either Android or iOS. There are some specifics in terms of communicating with either Android or iOS that do have to be considered and coded for, but around 90% of the same codebase is used in both mobile operating system environments.
Native applications are built to run on a particular operating system. In the mobile development world, that is either Android (which accounts for around 75% of the smartphone market) and iOS (around 24%). Native Android apps are written in either Java or Kotlin and native iOS apps in Objective-C or Swift.
Perhaps the biggest advantage of native mobile development is being able to make direct use of a device’s hardware, such as camera and GPS. Cross-platform apps can now also access device hardware but do so through the use of plugins. While this won’t impact user experience in most circumstances, an extra layer always adds complexity, which increases the risk of failures, bugs and isn’t quite performance optimal.
It’s also much easier to get a native application approved on Google Play and the App Store.
Until recently, there was also a relatively obvious performance gain by developing mobile apps natively. Flutter and React Native have closed most of that gap, but there are still performance advantages to native development.
Cross-platform mobile app development toolkits like Flutter and React Native have now come pretty close to matching the performance of native alternatives. And the advantages of cross-platform mobile applications can often outweigh drawbacks.
That’s evidenced by the fact the following mobile applications are all, you may be surprised to learn, examples of the cross-platform approach:
More complex development and integration – while it takes much less time to develop one cross-platform app than two native apps, it does take more time to develop one cross-platform app than one native app. There are considerations that have to be taken into account to make sure the shared 90% of a cross-platform app’s code base is well adapted to both OS environments. And the remaining 10% which differs, has to be well done for the app to be nicely integrated to both Android and iOS if speed and 0ther performance issues are to be avoided.
Offline performance – creating a cross-platform app that works as well offline as a native app would is a challenge.
App Store and Google Play Authorisation – the process of getting a cross-platform app accepted into Google and Apple’s app stores takes longer. And every new update to the app must also be authorised. Which can be a pain and delays updates.
Now we’ve covered the qualities that Flutter and React Native have in common, what sets the two mobile development toolkits apart?
Mobile applications developed using Flutter are considered Cross (X) Compiled apps, which means they are written in a language that allows them to communicate ‘natively’ with the OS, either Android or iOS, and hardware of the mobile device. Google launched Flutter in answer to what it saw as React Native’s limitations in communicating natively with mobile devices, in the context of more complex applications.
“Flutter’s widgets incorporate all critical platform differences such as scrolling, navigation, icons and fonts, and your Flutter code is compiled to native ARM machine code using Dart’s native compilers”.
This can impact negatively on the performance of React Native vs Flutter applications in the context of more complex applications. Especially when the efficiency of communication with a device’s hardware is of greater significance.
[text_on_the_background title=”K&C – Creating Beautiful Technology Solutions For 20+ Years . Can We Be Your Competitive Edge?”]Drop us a line to discuss your needs or next project.
Contact Us HERE[/text_on_the_background]
It’s easier to design an app using Flutter. You have much more flexibility and design capability using React Native.
Because Flutter, as a full mobile application development toolkit, comes with an extensive component library based on Google’s Material Design principles, an application can be conveniently put together from ready-to-use widgets.
Because React Native is a library, it has far fewer ready-to-use widgets and designing an app involves more work and expertise. But that feeds through into almost complete flexibility to customise app design without compromising any preferences.
Greater freedom also comes with greater responsibility. Flutter apps pretty much have to follow Google’s Material Design principles. There’s not a lot of room for major error when it comes to UX. If you are designing a React Native app, you are relying on the UX competency of your team, so make sure you are confident in its aptitude.
If a more alternative or original design is a priority, this gives React Native the edge. If pace of development, convenience are priorities and you are happy for your app’s design to follow Google’s Material Design principles, and all else is equal, strongly consider Flutter.
Where ‘learning curve’ might be a genuine factor in the choice between Flutter vs React Native is if you already have access to Reactjs developers. React developers should be able to relatively quickly pick up React Native, as most of the underlying rules are the same. They will only have to learn how to code in a way that communicates with the OS and hardware of mobile devices.
If your organisation already has a React development team and standard applications built using React, it will probably make strategic sense to opt for React Native ahead of Flutter if that’s a decision you are making for mobile development. It still wouldn’t be advisable to hand over your mobile app’s development to React developers lacking any or much experience in React Native.
But they will be able to provide support to more experienced React Native developers. And will be able to quickly learn React Native’s specifics, adding to their tech stack for future flexibility in development resources.
React Native is installed via the Node Package Manager (NPM), with packages installed either locally or globally. Installing on a macOS will also involve the HomeBrew package manager.
Flutter is installed by downloading the platform-specific (eg. Linux, Windows, macOS) binary from Github. If installing on a macOS, the flutter.zip file is also downloaded and added as a PATH variable.
Neither install is a one-liner with native package managers for different OS options. Installing Flutter is slightly more cumbersome on macOS as the binary needs to be added to PATH and downloaded from the source code. React Native installation is via package managers and doesn’t require downloading the binary from the source.
Both could be slightly easier in a perfect world, with React Native’s set-up marginally easier/quicker. Flutter’s documentation and CLI support for setup and configuration is slightly better than React Native’s. These factors are minor and aren’t likely to influence any Flutter vs React Native decision.
How quickly an application can be developed using a given technology is important, due to both the speed to market prerogative and that good software developers are an expensive resource.
As the more mature technology, React Native is still ahead of Flutter when it comes to online resources and community support. However, Flutter is quickly catching up and publicly available resources and active communities count as a plus for both.
Flutter comes with an extensive array of unit, widget and integration-level testing features out-of-the-box. Flutter also provides strong testing documentation and a very useful widget testing feature, which tests the UI by running widget tests like unit tests.
All-in-all, testing Flutter applications is easier than testing React Native applications.
If you are a DevOps organisation, or less formally adopt a DevOps approach to development projects, DevOps and CI/CD support levels for Flutter and React Native will be an important factor in any decision between the two.
There is a lack of official documentation from React Native on setting up CI/CD development pipelines. However, there are third-party resources out there and set-up won’t be any major issue for an experienced DevOps architect. Nevercode, Codemagic and Bitrise all offer solutions.
The rich command line interface of Flutter allows for easy CI/CD set-up and Bitrise, Codemagic and Nevercode all support Flutter.
The bottom line in the technological rivalry between Flutter and React Native is that both are excellent cross-platform mobile development toolkits. They both have their strengths and come with their own challenges, which roughly cancel each other out in a big picture view.
When it comes to specific use cases, Flutter has a slight edge if an application involves extensive communication with a mobile device’s underlying hardware. It’s also the more complete toolkit, with pretty much everything needed to develop a mobile application provided ‘out-of-the-box’. Its extensive components library, ready-to-use widgets and Material Design principles mean it is quicker and easier to develop with, and there is limited room for major UX gaffs.
React Native relies heavily on third-party libraries and applications are built from smaller components. This allows for greater flexibility and creative license, especially on UX and layout, but also offers more room for error and will usually mean more development time needs to be committed.
Which of the two is the best fit for an application from a technology stand point, very much boils down to the specifics of the use and business case. The latter we’ve already touched on. But let’s now look at the commercial considerations that might influence the choice between Flutter and React Native in a little more detail.
When taking a decision on the tech stack that a new application (mobile, web, desktop) will be built on, project sponsors have 4 main considerations to weigh up:
We’ve already looked at the first and, from a technology point of view, the second and, to an extent, the fourth. The depth of the Flutter vs React Native talent pool heavily influences the second and fourth business case considerations. So let’s first address the third business consideration – the respective depth of the Flutter and React Native engineer talent pools.
How popular a given development technology (programming language, framework/library/toolkit or tool) is with developers themselves can be assessed on a few different levels:
StackOverFlow’s 2020 Developer Survey offers some interesting insights into numerous industry trends. And the survey highlights that among developers currently using Flutter and React Native, more using the former (68.8% to React Native’s 57.9%) would like to continue doing so. As of 2020, there is more developer love for Flutter, than there is for React Native. That’s a consideration for project sponsors as higher developer satisfaction rates would be expected to reflect favourably on both productivity and retention rates. As well as on the future talent pool that can be hired from – arguably the biggest single issue in the highly competitive market for development talent.
However, while Flutter comes out on top here, it should be noted that developer satisfaction levels with React Native are by no means critical. It’s still a popular technology.
Another important indicator of developer attitudes to working with a given technology, in this case Flutter or React Native, is the interest of those who have not yet used it in learning it. On this count, the StackOverFlow survey indicates React Native has the edge on Flutter (14% to 10.7%):
Interest to learn a new technology can be influenced by a number of factors, including both general development community enthusiasm and job opportunities and remuneration levels.
Is there more commercial demand for Flutter vs React Native developers? Statistics business Statista puts React Native slightly ahead of Flutter in terms of the global number of developers working with the respective technologies (42% to 39%). However, while use of React Native remained stable between 2019 and 2020, Flutter demonstrated an impressive growth rate of 30%.
With a gap of less than 8% between the use rates of the two rival cross-platform mobile development technologies in 2020, if adoption of Flutter continues at anywhere near the rate demonstrated over the past year, 2021 could see it take pole position in terms of commercial use.
The Statista data is based on the responses of almost 20,000 polled developers, though the exact methodology used to create that sample group is not clear. A look at popular jobs portals (both general and IT sector-specialists), however, paints a very different picture.
As of early November 2020, on StackOverFlow’s jobs listings, which exclusively focus on developer and IT specialist roles, there were 21 postings inviting applications from Flutter developers vs 649 for React Native developers. That’s a huge gap, indicating that there is far higher commercial demand for React Native specialists compared to that for Flutter specialists.
On Monster.com, one of the largest general jobs portals in the world, the gap is similarly wide, with 922 React Native roles available to 128 Flutter developer vacancies.
The same pattern repeats itself on LinkedIn, with 457 results for React Native job searches, with the location set to the San Francisco Bay Area (as a good sample area minus the option to not filter by location). There are just 41 vacancies for Flutter developers – putting commercial demand for React Native more than 1000% ahead.
And there are 367 remote Flutter positions listed on LinkedIn, to 1577 remote React Native roles – a gap of almost 330% in React Native’s favour.
There appears to be overwhelming evidence from job portal listings indicating that whatever methodology Statista has used to poll usage of Flutter vs React Native, it is a poor one.
In terms of overall commercial demand for Flutter vs React Native developers, the latter is still well out in front. Could that be because React Native developers are cheaper because there is a deeper pool of them?
Based on our experience as a nearshored (Ukraine, Poland, Bulgaria) IT outsourcing agency, salary levels and expectation are roughly equivalent between Flutter and React Native developers across seniority levels. That’s roughly confirmed by the following statistics from U.S. jobs portal Neuvoo. Though the portal does put the median annual salary of React Native developers very slightly ahead of that of Flutter developers, at $120,000 per annum, to $110,000 per annum.
The conclusion has to be that developer salary costs are not a significant factor in the business case between the choice of Flutter vs React Native.
The evidence suggests that Flutter might now have a slight edge on React Native in terms of developer sentiment towards the rival cross-platform mobile development toolkits. And we earlier established that there is little to separate the two on technological pros and cons, other than the specifics of the use case. But that the perceived business case still comes down heavily in favour of React Native. The organisations paying for the development of cross-platform mobile applications favour React Native.
Why? There seems to be two driving factors:
When it comes to how easy, or difficult it is, to put together a team of Flutter developers with enterprise-level experience, compared to a team of React Native developers of comparable seniority and experience, the latter is some distance out in front.
Ultimately, the business case supporting the choice of one technology over another is usually at least as influential as the pure, all other factors excluded, technological fit to use case. And that means that our conclusion has to be that React Native comes out ahead of Flutter in our comparative analysis of the arguments in favour of each.