Flutter vs React Native

What are the differences, strengths, and weaknesses of Flutter and React Native? React Native has a lot in common with React JS, but Flutter and has its own originalities. In particular, we’ll be taking a closer look at Dart, Flutter’s programming language.

My goal is to give you a better understanding of these two solutions. What’s the point of this comparison? What is the problem that Flutter and React Native are both trying to answer?

Have you ever thought you would like to develop an app? The iOS and Android app stores are big money makers for some developers. And if you have a great idea, you might be wondering the best way to bring that idea to life?

You might decide to create a web application… but the performance on mobile isn’t great. You might want to go the native route. But that means coding twice, in two different languages, for Android and iOS.

There is a third solution. To me, it is the only valid one if you don’t have a big team or very specific needs.

This solution is to use software development kits. These SDKs offer a common abstraction layer that allows the same code to run on iOS or Android.

There are several such solutions. I’m a fan of Solar2D for creating 2D mobile games. But for general purpose applications, there are two main contenders. Using them, application development is not all that different from web development.

These two solutions are Flutter and React Native.

And what struck me, while researching this, is how this comparison parallels (in some ways!) the one between Angular and React. In other ways this opposition is radically different.

What do I mean by that?

React Native and Flutter, and Angular vs React

Shared features between React Native and Flutter, and Angular and React

Well, first of all, Flutter and React Native share some of the common points of Angular and React.

Angular, React JS, Flutter, and React Native are all imperative and reactive. What does this mean?

In each solution, functions take a state and use it to render a user interface or UI. (That is to say: they are reactive).

And when coding the render, we only care about the end result of the UI. The render function ignores or discards the initial state of the UI. (That is to say: they are imperative).

(jQuery is an example of non-imperative/declarative coding. jQuery is all about retrieving and modifying the current state of the UI.)

The objects with the render functions are components, the application’s building blocks. (In Flutter we call these widgets. And in Flutter everything is a widget).

Those are the shared features. We also have shared differences. With React (Native and JS) on one side and Flutter and Angular on the other.

Shared oppositions between React Native and Flutter, and Angular and React

React JS offers a focused scope, whereas Angular comes with a wide range of features.

React Native focuses on a simple core that follows the Unix philosophy of doing one thing and doing it well. Flutter offers a wide range of features.

So for example, Flutter and Angular handle translation or routing. React (JS and Native) require external libraries.

Another example: React Native offers twenty-five components in total. These cover blocks, text, images, lists, scrolling…

Flutter, however, offers 21 different components for animations alone. And 3 different widgets to handle accessibility aspects. And so on.

This rich library of specific components geared to mobile is not mirrored in Angular. Here, the comparison between React Native and Flutter takes on a life of its own.

What are specific oppositions between Flutter and React Native?

Specific differences between React Native and Flutter

First specific difference: Dart

The first particular difference is the programming language. Unlike Angular, React JS, and React Native, Flutter uses Dart. It is a programming language invented by Google. To my knowledge, it has no other major popular use case than Flutter.

So, what is Dart, what’s its goal?

Dart shares much of its syntax with JavaScript. If you speak JavaScript, you can read 90% of Dart.

Variable declarations, "for” loops, "if” and "while”, can be copy/pasted from JavaScript to Dart.

Class declarations in Dart are similar to JavaScript or TypeScript.

Like TypeScript, Dart has strong static typing that allows compiling to JavaScript.

So what’s the point of the 10% of differences between JavaScript and Dart?

The developers of TypeScript decided to make TypeScript a superset of JavaScript. In other words, JavaScript code is valid TypeScript code.

This means that the improvements TypeScript provides are optional. TypeScript’s first raison d’être is to be "transpiled” to JavaScript, so this makes sense.

And TypeScript’s second purpose is to add constraints. This catches mis-typed variables and reduces bugs.

Dart takes the same idea and pushes it further. And Dart can do this because the language has a different purpose. It doesn’t have to be a superset of JavaScript, so it can fix some of the weaknesses of that language.

What do I mean by that, what is Dart’s purpose?

Dart aims to compile code to mobile devices in the cleanest way possible.

This leads to some unexpected behaviors, the remaining 10% I mentioned above. I struggled for a few hours with a "const”, because I was expecting it to behave like JavaScript.

In Dart, a "const” has to be intrinsically constant. It must have the same value on every program launch.

In React we can declare as the return of a "useState” hook as const, in JS we can assign the current timestamp to a const. In Dart this will fail :

const date = new DateTime.now()

In Dart this declaration is invalid: date is not intrinsically constant. This makes sense. It’s just unexpected when you’re used to JavaScript.

There are other differences between Dart and JavaScript. But they are beyond the scope of this article. Let me know in the comments if you’d like me to explore this further.

What are the other differences between Flutter and React Native?

Second specific difference: Native widgets vs. specific widgets

A second difference is how each solution draws the interface on the screen. Flutter and React Native choose radically different strategies.

React Native outsources the rendered interface to native iOS or Android components. This solution ensures the final result is aligned with each OS’s specific philosophy. It also ensures that the rendering is as simple as possible.

Flutter uses a 2D rendering engine called Skia. This library is also used in Chrome and Firefox and Android. I’ll let you calculate how many users are running the library, let’s just go with "lots”. And that includes over seventy-five percent of readers here.

In short, this choice gives Flutter a level of flexibility — on screen — that is beyond React Native’s reach.

Third specific difference : Performance Issues

The third big difference is the consequence of the architectural choices mentioned above.

In Flutter, the Dart code and Skia library are compiled into an iOS or Android binary. In React Native things are a bit more complicated.

React Native has a lightweight virtual machine (or VM) that runs JavaScript. This VM communicates with the native core of the application.

This is not a hybrid solution (as is Cordova or Ionic) where the application bundles a browser. The VM that runs JavaScript is in the native application itself. And this is way more efficient.

React Native produces fully native applications. (There is a clue in the name).

But React Native does run the risk of lower performance. This is due to the communication between the JavaScript VM and the native core. But this is not a foregone conclusion, and the difference will often be imperceptible.

One final important difference

One final point needs to be addressed.

One point in React JS’s favor is its popularity compared to Angular.

This is in part due to the fact that React JS, in this context, is a newcomer that has learned from Angular’s mistakes.

But for Flutter, this situation is reversed. Stack Overflow’s 2021 developer survey had Flutter as the 2nd most desirable. React Native was ninth.

And Google Trends tells a simar story.

When we compare Flutter vs. React Native, we see a position reversal. React Native was overwhelmingly popular in 2018, but today Flutter is ahead.

So what does all this mean for us today?

Some of the conclusions from the comparison between React and Angular apply, and some do not.

For example, like Angular, Flutter is more complex to learn. There are more things to learn, more services provided. And a lot of widgets. Flutter is also harder to learn because it relies on Dart.

React Native, on the other hand, reproduces the mechanisms of React JS. The mental habits are transposable. React Native is much easier to learn than Flutter, if you have any experience with React JS. This makes React Native the easy solution.

But if Flutter is more complex to learn, it is also more powerful and more versatile.

To me, Angular is sure and steady and React is exciting and disruptive, and Flutter reverses this.

React Native is the easy way out. It complies with each platform’s standards. Whereas Flutter is the exciting and disruptive solution, allowing new and exciting things.

So your choice is going to depend on who you are and what you want to do. If you want something without too much mental effort, and you don’t mind less freedom, React Native is the way to go.

But if you want to invest time and effort, and go the extra mile, I’d recommend Flutter instead.