House
/
Blog
/
Flutter vs React Native: Part Three
React Native

Flutter vs React Native: Part Three

We've created a decision matrix so you can analyze whether Flutter or React Native is a better fit for you.

Flutter vs React Native: Part Three

If you read the previous articles in this series, you learned how the core differences and language of choice impact the overall output of each framework. In article two, you got a glimpse of what it looks like to write apps in each framework when we highlighted code snippets we wrote. In this article, we are going to create a decision matrix so you can analyze which would be a better fit for you based on your own scenario.

Whatever the outcome is, we are not questioning the quality of the apps both technologies can output. You can create amazing apps with either of these technologies, as evidenced by the result of apps like Coinbase Pro and Discord (built with React Native,) and Google Stadia and BMW app (built with Flutter).

One note about the following decision matrix is that the scoring mechanism of zeros and ones is wrong because only you can determine the weight of each element for you - some people would give some elements a lot more weight than others. The zero and ones normalize the score so you can tweak it. Plus, this is based on my opinions, so please ask yourself if you agree with them - don't just take them at face value.

Besides everything covered in the previous two articles, what should you consider when making the decision between Flutter and React Native?

Flutter vs React Native Decision Matrix


Do you value pixel-perfect equal look and feel on each platform?

  • Flutter +1
  • React Native +0

Will you need to integrate with a native 3rd party UI?

  • Flutter +0
  • React Native +1

Will you need to integrate with a native 3rd party API?

  • Flutter +1
  • React Native +1

Does your team have previous experience with Dart/Flutter?

  • Flutter +1
  • React Native +0

Does your team have previous experience with JavaScript/React?

  • Flutter +0
  • React Native +1

About what size will your client team will be?

  • Small (Flutter +1, React Native +1)
  • Medium (React Native +1)
  • Large (React Native +1)

What is the background of your current team?

  • Web background (React Native +1)
  • Native background (Flutter +1)

Is this a brownfield approach? (Embedding the cross-platform app within a native app or vice-versa)

  • React Native +1
  • Flutter +0

Will this app be intensively animated?

  • Flutter +1
  • React Native+0

How important is the native UI experience for your app?

  • React Native +1
  • Flutter +0

Do you plan to share code with your web platform?

  • React Native +1
  • Flutter +0

Is your team/company fatigued with the JavaScript ecosystem?

  • React Native +0
  • Flutter +1

Is your team object-oriented?

  • Flutter +1
  • React Native +0

Explaining The Flutter vs React Native Decision Matrix

Let me explain.

User Interface

A few of the elements are related to the fact that Flutter renders directly to the screen and React Native does not.

  1. Do you value pixel-perfect equal look and feel on each platform?
  2. How important is the native UI experience for your app?
  3. Will this app be intensively animated?

This fact makes it possible for Flutter to have an equal look and feel on every platform and also handle intensive animations. While you could achieve the same in React Native it requires a bit more work to get it right.

On the other hand, this also means you get by default with React Native the "native" UI experience offered by each platform. With Flutter some things might be similar, but not exactly the same since it requires them to reimplement and mimic.

Will you need to integrate with a native 3rd party UI?

Embedding a native UI interface within Flutter is possible with "Platform Views". However, it is noted that this can cause performance issues to your Flutter app. React Native's translation to native UI makes integration almost seamless if you have already loaded the JavaScript bundle.

This means that if you intend to use native 3rd party UI like a Video player, Payment UIs, or Google Cast UI, you will have to write the UI part of these SDKs in Flutter yourself and only use its APIs to interface with these libraries.

Will you need to integrate with a native 3rd party API?

Integrating with 3rd party APIs should be ok for both platforms. I only included this here to differentiate it from the 3rd party UI packages.

Do you plan to share code with your web platform?

Flutter has recently released a stable version of its web platform support. However, unless you are creating a single page platform and it is a greenfield application you are unlikely to use it.

JavaScript and React dominate web development in 2021, and thus we can confidently say your company might be using React at some level, which allows for you to possibly leverage some level of code reuse.

One of the main reasons Coinbase, for example, transitioned its mobile apps to React Native was to reduce the context switching and layers separating its client teams. They envision a future where there would be only 2 layers within their teams - client and data.

Is your team object-oriented?

Dart is an object-oriented language and so is Flutter's framework. Review article two of this series to get a grasp of that.

Hiring


The four points below are related to hiring:

  • Does your team have previous experience with Dart/Flutter?
  • Does your team have previous experience with JavaScript/React?
  • About what size will your client team be?
  • What is the background of your current team?

At the developer level, it is not often obvious how difficult it is for engineering hiring managers to fill up their software engineering teams with qualified productive developers.

JavaScript's large ecosystem and mass adoption provide companies with engineers to pick from. The same can be said about React.

And having some previous experience in the team allows teams to mentor new onboards and lead technical decisions.

Despite JavaScript's numbers, your team might have a background other than the web, like native development. And in this case, especially for Android developers, we have noticed a higher preference for working with Dart and Flutter. This is possibly because it is a statically typed compiled language and shares some of the patterns common in the native mobile app development world.

But, why did we not recommend Flutter for medium to larger team sizes? Exactly because of hiring. If you do decide to choose Flutter, you will need to have a training program to be able to hire developers without Flutter experience since it is a relatively new market of developers. For some this might not be an issue, but an extra step is required.

The struggle here is not hiring junior developers, but rather hiring mid-to-senior developers. It seems this cohort doesn't always like switching from what they feel comfortable with.

Is this a brownfield approach? (Embedding the cross-platform app within a native app or vice-versa)

As noted above about using native 3rd party UI, embedding a React Native app within a native app or vise-versa is a much smoother story than using Flutter.

What else did we not mention yet?


We have not yet mentioned company buy-in, community size, and long-term open source support. The reason is that both Flutter and React Native are on positive terms when it comes to these aspects.

Company Buy-in

Company-wise, both frameworks have buy-in from enormous corporations and we do not see any risk for the project. There are multiple projects within Google using Flutter and others like Alibaba, Nubank, and Tencent engaged with it.

On the React Native side beyond Facebook, we see Microsoft invested in it alongside companies like Coinbase, Shopify, WarnerMedia, and others. This also means there is no risk for the project.

Community Buy-In

Community-wise, both are also striving. Flutter has a higher number of engagement from the community since they get more issues opened.

The number of merged pull requests is significantly different because React Native's core teamwork is private within Facebook's infrastructure and they push directly to master once the change is merged internally.

React Native - Github Contributions


Flutter - Github Contributions


Issue-wise, remember how React Native's lean core initiative splits React Native in multiple fronts? Flutter's immense SDK makes it a target for many more issues in contrast to React Native's main repo that only tries to solve the core.

Long-Term Open Source

The headcount of each team is not public. But, looking at the commits we can easily spot multiple core contributors from each parent company, Google and Facebook.

There is a clear continuous effort towards open source, especially from Flutter. Their Youtube channel is super active and there are always events. On the React Native side, we could say the same, a React Native Core member, Eli White, repeatedly engages the community in social media trying to understand its needs, and React Native's current re-architecture effort is an opposite signal of it winding down.

Flutter is more set up for success when it comes to long-term open source because of how it is organized. React Native is developed with a Facebook first approach, they are vocal about what they are working on but it is private within Facebook walls.

Evidence of React Native's Facebook first approach is that the community doesn't get to see pull requests from internal Facebook contributors, we only see the end result as a commit in master.

Flutter approaches development completely in the open. You can see the project roadmap by looking at their Github kanban and spot all of the internal contributions by filtering the pull requests by the team tag.

While we do like Flutter's open approach, React Native's approach is working so far, it just causes more fear, uncertainty, and doubt.

Last Words & The Future

The future of both Flutter and React Native is certainly bright. Both continue to improve themselves and we believe that competition in the cross-platform space increases the overall quality of every tool. The more options there are, the better it will be for you to choose what is best for your team and company.

At the API level of each framework, we can see how Flutter has a more polished API than React Native, but you will notice that only if you develop in these two technologies. However, the core differences between these two make this comparison "apples to oranges" due to side-effects caused by choosing a different language and UI framework.

G2i is a pre-vetted marketplace of JavaScript developers on the web. We help incredible companies hire world-class engineers. We have been doing that for React and React Native developers for 5 years now. We are evaluating how we can help teams hire Flutter engineers as well, and if you are interested in hiring either a React Native or Flutter developer contact me <andrei@g2i.co> or Gabe <gabe@g2i.co> to find out more.

Glossary

  • Greenfield app: An app with a single technology, without a mix of paradigms.
  • Brownfield app: An app made with a mix of technologies and paradigms.
  • UI: User Interface.
  • API: Application Protocol Interface.
  • SDK: Software Development Kit.
  • Native UI: Each platform's operating system provides a set of default UI widgets for you to use and they have a characteristic look and feel.
  • 3rd party: A package created or provided by another company either closed or open source.

References

React

Looking for the best pre-vetted developers?

We have React, React Native, and Node.js developers available on a contract or full-time basis.

Group

Related Articles