Flutter Vs React Native

What do you think about Flutter Dart ?

Is it really the major contender for React Native?

let me hear your opinion

Write your answer…

5 answers

There are some subtle architectural differences between Flutter and React Native.

Flutter compiles down to native code, so it's much more akin to a game engine like Unreal or Unity where you ship everything with the app. This shows in its performance.

React Native on the other hand ships with a JavaScript runtime and bridges to platform code. This is much more akin to how Phonegap, NativeScript, or even your browser work. React Native is changing this, but I am not familiar with all of the details beyond knowing that they are trying to remove the bottleneck of the bridge. Deep dive here

Reasons to choose Flutter

  • Performance
  • Design friendly
  • Animations
  • Greenfield development
  • Company lead
  • Language is the code

Performance

Flutter compiles to native code. Unlike most cross-platform solutions there is no bridge (even when making native plugins), which is the top bottleneck for performance. This performance does come at the cost of larger bundle sizes on average. In non-real world tests, Flutter has shown itself to perform very well. Regardless, you can write code that runs well with RN or runs poorly with Flutter.

Design friendly

Flutter has a deep widget library that ranges from low-level to platform level. This means you can build an Android application that looks like it belongs, but if you want to build a completely custom design you can do that as well.

Animations

Animations are built into the core of the framework. Also, Flutter allows you to use Animated images thru Flare.

Greenfield development

This is more personal opinion. If I'm starting a project from scratch, I like flutter because the setup is extremely simple. Even coming from JavaScript. To me, this is because all of the dependencies you need to get up and running are built into the framework.

Company lead

Although flutter is open-source, the majority of the framework development is lead by Google. They have several teams dedicated to Flutter development and developer relations. This is not a knock on RN so much as it is a hat tip to the teams behind Flutter. They regularly survey the community to determine the direction of Flutter and Dart.

Language is the code

There is a very strong coupling between Dart and Flutter. The language is essentially being built for front-end development in the same way that Swift and Swift UI are being tailored towards Apple development. There is a lot of strength in being able to direct a language towards a specific focus. Dart has improved the language several times to accommodate Flutter developers and the language design spec is available on github.com and welcomes contributions.

Developer experience

In my experience of using both, Flutter is faster and less buggy. Let me repeat the in my experience part. Hot reload and hot refresh exist in both, but Flutter has a clear advantage in speed and consistency. It's pretty common to see screens of death starting up "Hello World" examples in React Native. In Flutter, you almost always see them when you have done something wrong. Also, because Dart is strongly typed it appears the errors are a bit more meaningful. You can get static type analysis thru TypeScript (which I love), but dynamic, runtime analysis is where Dart shines.

Reasons to choose React Native

  • Larger community
  • Code push
  • Targets more platforms (currently)
  • Community driven
  • JavaScript ecosystem
  • Brownfield development

Large community

You can't talk about cross-platform anything without mentioning that most solutions are in JavaScript and JavaScript is the largest community by far. React Native being the king of JavaScript cross-platform development drives that point even more.

Code push

If you want to do hot code pushes, it is impossible to do in Flutter and currently there is no intent to add this feature because of security concerns. Because RN uses JavaScript and JavaScript is a dynamic language, RN has great support for this.

More platforms

React Native can currently target every desktop, mobile device, and web. Flutter has some efforts beyond mobile but they are still a ways off.

Community driven

More efforts are community driven in RN, which is a testament to it's popularity. Whether you believe that's a good or bad thing depends on your faith in open source.

JavaScript ecosystem

In most cases every 3rd party (Apollo, Redux, Realm, AppSync) is developed JavaScript first. For some integrations, support hasn't yet reached Flutter.

Brownfield development

The story for Flutter in brownfield development is still in its fledgling state. It was very much built first for greenfield. To my knowledge, RN on the other hand was built specifically for the need of adhoc adding components into existing apps, so it makes sense that they'd have a better story.

People with more experience can chime in further or correct any of these points. I have tried to represent the differences as fairly as possible.

really nice comparisons.

Reply to this…

Share your programming knowledge and learn from the best developers on Hashnode

Get started

At this point, Flutter is undoubtedly the Major Competitor to React Native. Ryan Edge has documented the detailed comparisons very well in his comment!

To be within the limit of the question asked here, I would say that, Flutter's popularity and adaption has been increased hugely in last 6-8 month. If github stars can be one of the stat factor, in Jan 2019 flutter was at 37K and React Native at 69K. If you compare them today in terms of popularity and growth in it, Flutter is at 71K and React-Native close to 80K.

Flutter is making longer leaps in terms of being popular and becoming major contender to React Native. I am personally a Flutter Fan and enjoy lots of easy integrations with Google Cloud Platform APIs..

Things are going great so far!

Reply to this…

Flutter is going to kill React-Native.
  1. Google is backing it.
  2. Have you tried the Material Set? There is hardly anything you can not do with it.
  3. It comes pretty much batteries included. There is no need to import things like React Navigation.
  4. You can build websites with it as well, and desktop software.
  5. It is going to be the native language for Google's Fuchsia OS because it is written in Dart.
Show all replies

I do agree that Google creates some projects which aren't the greatest but there is a major difference between Flutter and some other random project.

As I said, Flutter is going to be the official way of building apps when Fuchsia os comes out.

I also have worked with Flutter & React Native, And I do see the difference. I find the need to import a third party library for navigation, icons, types of buttons silly. Another reason, all those libraries are backed by third parties, not Facebook. If they stop supporting it.... you get my point.

Where as with Flutter you don't need to go scrounging the internet for simple libraries that should come comes second nature... like navigation.

Dart also compiles into native code. No dealing with any crazy JavaScript layer.

Also, the reason why I believe Google is one of the best companies on Earth, is because they do their crazy projects, and aren't afraid to fail, and is willing to let us developers and hobbyist try it out. But I believe that You and I can be sure that Flutter isn't going anywhere any time soon.

One look at the documentation should tell you that.

Reply to this…

I don't know if it's the major contender for React Native, but it's definitely a competitor.

Personally, I love it. It's declarative UI syntax is really easy to use, and you don't have to worry a lot about constraints.

However, coming from an HTML/CSS/JS background, React Native was extremely easy to pick up, and I had fun working with it.

I will say that Flutter's system of running the app seems much faster than React Native's, especially with the live update.

Reply to this…

Here is a quick comparison between Flutter and React Native

1_rWS4KEHGtqSKSe_TzBoI6A.png

Reply to this…