I saw a lot of comparisons between those two frameworks in the last months. Everybody is talking about arguments that don’t really matter such as the language or the installation CLI. I would like to share a perspective of real things that matter in a project, with battlefield arguments on how to choose the proper framework for your needs.
✋🏻⚠️ DISCLAIMER: Please put away your white knight’s ♘ armor, there is no bashing on any framework NOR any kind of troll here. Everything is subject to you: where you’re coming from and your needs.
I have — by the time I’m writing here — a 3 years experience with React Native and I’m coming from a web background with ReactJS / NodeJS, therefore my preferred choice is RN. But I also really love Flutter, I follow its growth and I’m pretty sure the framework has a bright future. Both are great tools, you should highly consider them for your apps.
Oh and yes! I’ll many times refer to “RN” for React Native in the next lines. And as I said above, I’m practicing RN every day but I’m not practicing Flutter that much actually. Do not hesitate to leave a comment if you see something wrong in my arguments, I would check and consider it.🙏🏻
Now that everything has been said, we can start 😁
🤝 Handling the tool
There are already many comparisons between Dart and JS, native components, scaffolding, etc… I won’t develop it more here, feel free to Google for it and you’ll end with many relevant results.
We could then talk about your favorite IDE, you favorite scaffold CLI or tool…
But this is not what’s really matters. We care about the liberty and the flexibility a framework gives us to reach our goals, not how it’s to take in hand at first glance. You get used to everything.
So let’s talk about popular arguments we can read about everywhere, the same arguments I’m hearing from my colleagues at work 😄
🚫 False argument in the Flutter VS React Native battle
Dart is a typed language while JS is not. It’s safer.
Type safety is definitely a first-class choice for any application, especially mobile ones which have greater inertia on rollout due to the build and store validation.
JS can use Typescript and Flow to get this too. This doesn’t give performance optimizations of dart currently, but this might changes in the future, especially with the new engine/architecture of RN that’s coming in 2020.
But remember that having a non-static typed language is also a really good thing in some cases. Sometimes it allows replacing the type of a variable without the need for recompiling. I experienced one case with a tennis app where the game points were returned using an integer of the
40 enumeration. Then we added
AD string for game advantage, that was not provided at the beginning. We could have done that without releasing a new build because of non-static types by just changing the GraphQL scheme and return that new value. In Dart, this would have resulted in a crash or an error.
Flutter and Dart are powered by Google and new Google Fuchsia OS is the future. RN will die smoothly as Flutter will be so much better optimised for their new OS.
No one can predict the future, but one thing is certain: Some of the greatest companies in the world are betting on react native at the moment.
Microsoft as an example is building a lot of tools such as CodePush or RN windows / Mac and some part of the most popular tools such as Word are being ported to RN.
Discord one the greatest messaging/audio communication startup is also posting nice articles on react native and they succeed to get close to native performances using RN.
RN is also used in banking: https://callstack.com/blog/secure-your-react-native-app/ as Callstack showed us at React Native EU 2019.
Flutter is for sure a strong choice and will keep growing, but I think both frameworks will be competitors for Fuchsia.
✅ True arguments for Flutter VS React Native
Flutter has better performances than react native
Nothing to say, thanks to native compilation we can only agree on that currently. But with some optimizations, you can have a nice experience of RN without noticing issues.
Flutter is easier to take in hand when you come from a Native background.
And in fact due to the default typed language and the implementation logic, that’s also true. Flutter is closer to Android and Ios than RN. Most of the logic is taken from Java, the only major difference is the declarative aspect that is different than the Android imperative one
You’re writing widget with kind of props that describe your app expected state and layout, where you were writing classes and calling functions before.
Flutter devtools are great while react one are currently poor
Honestly, there is a huge gap between flutter and react here. The flutter team has awesome integration for VSCode and Android studio with a lot of rendering debuggers and analysis tools.
On the other hand, React native has poor dev tools besides the ReactDevTool and small plugins, most of the native debugging relies on native libraries for android/ios. Facebook recently released Flipper to improve this, but this is still experimental when I’m writing this.
As we can see, there are some good arguments in favor of both our frameworks. Let’s deep further in major differences in terms of style and behaviors.
📌 Major differences
🛫 Over the air updates — Compilation
This is currently the top one reason for which I’m not switching smoothly to Flutter (besides the fact I really love React paradigm). This is truly game changer especially on events applications, where the time frame for patching is really short and you have a lot of users in a short amount of time.
With expo, you can start a project without any code compilation nor development environment. This is a huge advantage for Proof Of Concept or even share bug report scenarios to RN core team. This is simple as using https://snack.expo.io/
Maybe the Flutter team will be going to provide us with a better solution in the future, but currently, there is no official strong library that supports that.
💻 Development experience and layout
- ➡️ Development tools
Debugging tools are huge with Flutter and this is a strong argument for development experience. You can go easier and deeper in optimization than in RN as we saw above in this article.
- ➡️ UI Definition
But on the other side, while React native relies on JSX to describe the UI definition in an easy, Flutter is using a widget-based layout, which is quite verbose and not developer-friendly in my opinion.
There is a lot of boilerplate and without IDE we end up in a nesting hell that is hard to read. This can be difficult for Pull Request reviews.
Also, there is no (AFAIK) clear way to separate pure design from widgets themselves, like styled-components does or
StyleSheet.create and just pass it through a style property.
JSX leverage easy, readable layout definition, even more with a library such as styled-components. This gives RN a nice advantage as any developer coming from the web background can quickly start with RN.
- ➡️ Hot Reloading
Both frameworks support Hot reloading quite well and this is a pleasure to use. And you can use it on both IOS and Android at the same time.
👨🏻💻👩🏼💻Community and libraries
You have a lot of package with Dart, but most IT startups doesn’t give Dart SDK at the moment, while NodeJS is very popular for all of those.
The only thing that can make Dart coming back is that it’s backed by Google that will probably push many libraries in the future for its language.
This gives a nice point to React native.
🚛 Takeaway / TLDR; 📦
This will summarize and helps you choosing a framework between both our protagonists.
⚡️There is no good or bad answer and will depend on the context and your team preferences/knowledge.
✈️ Flutter and Dart
Fluter and Dart are strong choices to design your app if you intend to bet on the future.
I don’t think you will get any risks going on that technology stack, the only risks are that you’ll have to figure out many things or write some code by yourself, this because the ecosystem is pretty recent. You won’t be able to leverage the tools built by the others as you would with JS.
💁🏻♂️Currently, I would recommend starting with Flutter if at least some of the following sentences are true:
- You’re not coming from web development and not experienced with CSS based layout with things like
- You don’t have a strict deadline and have flexibility in your delivery in terms of perimeter of features. As you won’t get as much help from externals that you could have with React and it can be harder to design a specific UI.
- Flutter routing is also more complicated than the famous react-navigation.
- Performances are the first-grade features of your application.
- You accept to lose the benefit of over the air update and rely on AppStore / Playstore updates flow, at least in the next months/year.
On the other and React Native is backed by Facebook and many other companies. This is the most advanced framework of its class.
Despite the lack of features such as typings in JS, you can fill the gap (and you should) using some tools such as Typescript.
💁🏻♂️I would recommend using React Native if you have many things that match the following sentences:
- You’re already a React, Vue or Angular developer and are familiar with component-based applications.
- You come from a web background and you are familiar with CSS layout, you have experience with libraries such as
- You like relying on a big and rich ecosystem of developers and tools that you can use in your application, you want to get support from externals on popular forums such as stack overflow.
- You want to leverage Over The Air Updates using Microsoft Codepush or Expo.io, for fast hotfixes and delivery.
- You want to use popular SASS tools that bring support for NodeJS out-of-the-box.