The author of the article, the translation of which we are publishing, says that recently he has come across many comparisons of React Native and Flutter. In all these comparisons, we were talking about things that, in fact, do not really matter. For example, about languages ​​used to develop projects, or about command line tools. Here we will make a comparison of React Native and Flutter in terms of the real state of affairs, in terms of what matters for real projects. This comparison is intended to provide everyone with information that will help them choose exactly what they need.
Preliminary notes
I would immediately like to say that here I am not going to criticize React Native or Flutter, I am not going to troll them, so to speak. How exactly you dispose of what you learned depends on you - on what you already know and know how, on the needs of your project.
I started using React Native (RN) three years ago. Prior to that, I was developing projects using React.js and Node.js. As a result, it is quite natural that I chose RN. But I also really like Flutter. I watched the growth and development of this framework, and I am quite sure that a bright future awaits him. Both RN and Flutter are excellent tools that deserve to be paid attention to by those who are looking for a base for their next application.
I want to note that I work with RN daily, but I can’t say the same about Flutter. Therefore, treat my calculations critically. And if you find that I’m mistaken in something, let me know about it.
Languages
There are many comparisons dedicated to, for example, Dart and JavaScript languages, native components, and components whose code is generated automatically. I will not make such comparisons here - a lot has already been written about this. If you need it, you can find the appropriate materials yourself.
I would just say that the Dart language used in developing Flutter applications uses static typing. It was created by Google as a replacement for JavaScript (but Google could not persuade other browser manufacturers to include support for the Dart virtual machine in their projects; in the end, it supports only Chrome). JavaScript, which writes code to React Native projects, uses dynamic typing, but anyone interested in static typing can create JS applications using TypeScript .
Here you can talk about the IDE, and the command line tools for automatically generating code, and much more.
But, in fact, all this does not really matter. Developers are most concerned about the freedom of action and the flexibility that a certain framework gives them in achieving their goals, and not what, at first glance, may seem interesting. You can get used to anything.
Therefore, now I propose to discuss some of the popular arguments expressed in favor of a particular framework. They can be found literally everywhere. I have read about them, heard them from colleagues. They are not always as clear as they may look.
False Arguments Used When Comparing Flutter and React Native
ArtDart is a typed language, but JavaScript is not. This means writing on Dart is safer.
Type safety is the most important argument in favor of one or another language used to develop any application. In particular, a mobile project that needs to go through a difficult verification process in a certain app store before getting to users ’devices.
But JavaScript code can be typed using TypeScript or Flow. This does not offer performance benefits such as Dart has, but things may change in the future. In particular, given the fact that the release of the new React Native engine is expected in 2020.
True, it is worth remembering that the choice of a dynamically typed language in some cases is also very good. Sometimes it helps to change the type of a variable without having to reassemble the project. I once met with something similar when working on a tennis app. Points were returned as integers
0
,
15
,
30
,
40
from the corresponding enumeration. Then to these numbers it was necessary to add the line
AD
, reporting the advantage. Initially, we did not add this line to numbers. However, we were able to realize this opportunity without releasing a new build of the application. The dynamic typing of JavaScript helped us with this. We were able to simply change the GraphQL schema and return the value in the form in which we needed it. In a Dart application, this would lead to a “crash” of the application or an error.
▍Flutter and Dart are Google developments. Fuchsia, Google’s new OS, is coming soon. RN, as a result, is waiting for a slow death, since Flutter will be much better optimized for Fuchsia
No one can predict the future, but something can be said with certainty: some of the world's largest companies are now betting on React Native.
For example - React Native is seriously used by Microsoft. We are talking about, say, CodePush and the React Native for Windows project, which allows you to develop native Windows applications using React.
React Native is also used by Discord, which is developing a popular messenger. The company, in particular, publishes a lot of materials about React Native. In Discord, in the RN application, it was possible to achieve a level of performance close to that of native applications.
RN is also used in the banking sector .
Flutter, of course, is great for many projects, its scope continues to expand. However, I think that both frameworks will fight for primacy in the Fuchsia OS.
The true arguments used when comparing Flutter and React Native
â–ŤFlutter has better performance than React Native
I have nothing to say here. Now, due to the fact that Flutter programs are compiled into native code, we can only agree with this statement. But the performance of RN projects, if optimized, is at a very pleasant level, while there are no problems with them.
â–ŤFlutter is easier for those who have previously developed native applications
This, due to typing and implementation logic, is also true. Flutter is closer to the internal mechanisms of Android and iOS than RN. Most of the logic is taken from Java, and the main difference, for example, in development for Android, is a greater bias towards a declarative approach to development.
In Java, for example, they wrote classes and called functions, and using Flutter, they write widgets using something like properties that describe the expected state and appearance of the application.
Fl Flutter developer tools are very good, and React Native tools are poor quality
Honestly, there is a big gap between Flutter and React Native in this area. The Flutter team has worked hard to integrate their development tools with VS Code and Android Studio. Many tools for debugging and analyzing projects have been created.
On the other hand, if you ignore the react-devtools package and some small plugins, debugging an RN application relies mainly on the built-in capabilities of the respective platforms. In an effort to make a difference, Facebook recently released a debugger for mobile applications, Flipper . But now this is still a pilot project.
It is easy to see that there are strong arguments in the asset of both the frameworks. Now let's look at the main differences between Flutter and React Native.
Main differences
â–ŤCompilation and "update by air"
Due to the fact that compilation of JavaScript code is performed when it needs to be executed (JIT compilation), and not in advance (AOT compilation), when using React Native, you can, so to speak, “update applications by air”. It is, in fact, extremely simple to implement. For example, using Microsoft CodePush or Expo.io.
Now this is the main reason that I am not making a gradual transition to Flutter (besides the fact that I like the React paradigm). This is the factor that radically changes the balance of power, especially when it comes to certain applications tied to some short-term events. In such circumstances, changes to the application must be made very, very fast. These applications in a short period of time are gaining a lot of users.
You can create a React Native application without having a development environment and not thinking about compilation. For example, using the snack.expo.io project. This is very convenient for creating simple projects that demonstrate proof of the operability of a certain concept, or projects that are planned to be shown to the React Native development team, reporting an error.
Dart also supports JIT compilation, but now it’s not possible to send updates to Dart applications “over the air” using something like CodePush. You can, of course, initiate a call to the installation intent, but this is far from the same thing that can be achieved by means of RN.
Perhaps in the future, the Flutter development team will provide us with a decent answer to the question about application updates "over the air", but so far there is not something like an officially supported library that implements this.
â–Ť Development Tools
Flutter developers can use great debugging tools. This is a strong argument in favor of Flutter's ease of development. This, in addition, greatly facilitates the optimization of applications.
â–ŤDescription of user interfaces
React Native uses JSX to describe interfaces, which makes the job much easier. And Flutter uses widget-based interfaces. It seems to me that this approach is too overloaded with details and not particularly friendly to developers.
The development of Flutter interfaces implies the presence of large amounts of boilerplate code. Without the use of the IDE, the description of the interfaces turns into a real hell of nested constructions in which it is difficult to navigate. This can complicate the pull request review.
In addition, as far as I know, there are no normal means for separating clean design from the widgets themselves. This is about something like the styled-components library in RN, or about something like calling
StyleSheet.create
with passing to the component what happened through the
style
property.
Using JSX helps create simple and readable interface descriptions. The situation is further enhanced by specialized libraries, such as styled-components . All this gives RN a good advantage over Flutter. A developer who was previously involved in web projects and switched to React Native is able to get up to speed very quickly.
Both frameworks well support the ability to "hot" reload materials. It’s nice to use these features. This applies to both iOS and Android.
Community and Libraries
The JavaScript ecosystem is huge, it has a huge variety of tools and libraries. But the community of Dart developers looks good, although it is much younger and smaller than the JS community.
When developing Dart applications, you can use many packages. However, most IT startups currently do not provide Dart-based SDKs for those who want to work with them. But the development tools for Node.js are very popular in this environment.
Dart supports the fact that this is a Google project, and that the company is likely to take care of creating many useful libraries for this language.
Strictly speaking, in terms of community support and the availability of libraries, React Native is now bypassing Flutter.
Summary
Let's summarize and collect everything we talked about. This will help make the right choice for those who are choosing a framework for their next mobile project. I would like to note right away that there is no unambiguously correct or incorrect answer to the question of which framework should be chosen. It all depends on the features of the project, as well as on the preferences and knowledge of the development team.
â–ŤFlutter and Dart
Flutter and Dart are great choices for those who are betting on the future.
I believe that anyone who chooses this technology stack does not risk anything. The only risk is that, due to the fact that Flutter and Dart are relatively young technologies, those who choose them will have to either try very hard to find the libraries they need or write them themselves. In the JS environment, you can find a turnkey, or almost turnkey solution for many tasks. In a Dart environment, this is not so.
But Dart is a good language that solves a lot of problems specific to JavaScript.
Under current conditions, I would recommend choosing Flutter to someone for whom at least some of the following statements are true:
- You go into mobile development without any knowledge of JavaScript or React. As a result, you cannot, choosing RN, not Flutter, build new knowledge on the foundation of the old.
- You used to do something that is not related to web development, you are not familiar with creating page layouts using CSS and with something like styled-components.
- You do not have hard deadlines; The project, in terms of capabilities, has a certain level of flexibility. The point here is that, when creating a Flutter project, the programmer will not have access to the same large volume of developments that RN developer has access to. Flutter may be more difficult to develop specific interfaces than RN.
- The application uses a simple navigation scheme. The point here is that the Flutter routing system is more complicated than the famous react-navigation system.
- One of the most important requirements for your application is high performance.
- You are ready for the fact that you can’t update your application “over the air”, you are ready to rely on the update mechanisms offered by application stores for iOS and Android platforms. At least - you are ready for such a state of affairs to exist in the coming months, or, possibly, in the coming year.
â–ŤReact Native and TypeScript (or JavaScript)
React Native is a project that enjoys the support of Facebook and many other companies. This is the most advanced framework in its class.
Despite the fact that JavaScript is not very good in terms of typing, it is possible (and necessary) to fix this by using, for example, TypeScript.
I would recommend choosing React Native to someone for whom most of the following statements are true:
- You are already a React, Vue or Angular developer and are familiar with the architecture of component-based applications.
- You go to mobile development from web development, you are familiar with the layouts created by CSS, you have experience with libraries like styled-components.
- You want to rely on a vast ecosystem of assistive tools that you can use in your own applications; You are about to search for answers to your questions on resources like StackOverflow.
- You want to take advantage of software updates over the air using Microsoft CodePush and Expo.io, which will allow you to quickly fix application errors.
- You want to use popular services, which, as a rule, always provide standard support for Node.js.
Dear readers! If you now need to choose a framework for mobile development, what would you stop at? On Flutter, on React Native, or on native tools of mobile platforms?
