Flutter vs. React Native: Choosing the Best Framework for Cross-Platform Development
*Thank you to Valerii Stukanov for helping with the article!
Most business owners understand what are the pros and cons of choosing cross-platform mobile development over native. But they make a mistake of thinking that these pros and cons are unambiguous, absolute. In fact, the advantages and disadvantages of choosing cross-platform over native depend on which technology, Flutter or React Native, you choose to develop cross-platform.
So, here comes the question: which technology should you use for cross-platform mobile development to maximize benefits and to minimize drawbacks? Which is better Flutter vs React Native?
In this article, I will compare the two most popular choices: Flutter vs React Native, young and revolutionary versus good and old. My comparison will be based on the following criteria:
- Brief overview
- Performance & speed
- User interface
- Code reusability
- Learning curve
- Apps that the technology is used for
React Native is among the most popular cross-platform development frameworks, and the updates are introduced quite often. The last update, 0.62.0, was released on March 26th, 2020.
Flutter is an open source UI toolkit introduced by Google in 2017 for the cross-platform web, desktop, and mobile development. Flutter apps are written in Dart language, developed with VM, and AOT-compiled in the native code. Both Dart and Flutter are still quite new, but developers see a huge potential in them.
Due to a strong support of Google and the developer community, Flutter updates are released on a regular basis, with the latest ones having been released on May 14th, 2020.
Rendering in Flutter is performed with Skia, the same tool that Google Chrome uses. But it is optimized and accelerated by GPU, works everywhere, and can emulate the same result as the one of native renderers. Layout is implemented with nested layout widgets. Both native components and application logic are written in Dart, while some functionality is still in development or in review. You can learn more about Flutter architecture at Flutter.dev.
The architecture of Flutter seems to be simpler and more developer-friendly than the one of React Native. Since Flutter has most native components in itself and does not require a bridge for the components to communicate with the application logic, it deserves a point for architecture.
React Native vs Flutter: 0–1
Performance & Speed
The applications written in Flutter are compiled using DartVM — not only UI components but the entire app. Dart by itself is quite performant. Some people say that, in terms of performance and speed, Flutter wins the Flutter vs React Native battle. However, according to Thoughtbot, a Flutter app uses two times more CPU resources than a native app does, but a React Native app is even more demanding in terms of CPU usage. Meanwhile, in terms of memory usage, React Native requires less of it than Flutter does.
The Thoughtbot research proves that neither Flutter nor React Native deserve a win in this speed and performance battle, and both Flutter and React Native lose badly to a native app. It will be fair if neither receives a point.
React Native vs Flutter: 0–1
Due to its maturity and popularity, React Native is supported by most code editors. It also supports hot reload, which greatly improves one’s developer experience. As for the packages, React Native definitely has more than Flutter. Though quantity does not always mean quality, there are 698 libraries now available in React Native Directory.
Flutter is falling behind React Native in terms of ecosystem, primarily because its competitor had more time to grow its roots. Yet, thanks to a dedicated community, Flutter is catching up, and this difference should not become a problem for a developer. There are plenty of Flutter packages available at pub.dev.
With no doubt, the point for ecosystem goes to React Native. It simply had more time than its competitor to develop a broader and more powerful ecosystem.
React Native vs Flutter: 1–1
The great advantage of React Native is the ability to use native components, This way, you can rest assured that no UI update of Android or iOS will break you app since the components will be updated instantly as well. Unlike Flutter, React Native allows using only basic components. Yet, React Native UI components are more stable than those of Flutter. They are not necessarily ready-to-use: either you have to create them yourself, which is fine for large projects, or you use ready-made solutions developed by the community. For instance, there are React Native UI Toolkit elements and Material Design for React Native.
Flutter apps look good on both Android and iOS of any version, the most recent or an older one. This is achieved by Material Design and Cupertino widgets. The former ones implement Android UI design language, while the latter ones implement iOS UI design language. Therefore, apps developed with Flutter look properly on both operating systems because they effectively imitate native components of the OS.
Flutter has more native UI components to offer than React Native. Meanwhile, the components offered by React Native are more stable. It will be fair if both React Native and Flutter get a point here.
React Native vs Flutter: 2–2
You can easily share some business logic, but sharing ready-made components is difficult. To do that, the functional part and the UI part of a component have to be separated. Doing so makes a lot of sense for large projects as it may save a lot of development hours. There are some React Native libraries that allow you to build iOS, Android, web, and Windows10 apps with the same code.
As of now, you can reuse code only for iOS and Android apps. However, the Flutter team has a long-term goal to develop an integrated solution allowing the development of web, desktop, and mobile solutions with the same code. For now, Flutter for web is available for preview, and Flutter for desktop is in the early stages of development.
React Native offers more opportunities in terms of code reusability. Without a doubt, Flutter will catch up shortly, but for now, the point goes to its competitor.
React Native vs Flutter: 3–2
React Native is five-years-old, and the community behind it as vast and mature. As of June 2020, React Native Community on GitHub is represented by 50 people and 80 repositories. The core of React Native is developed by Facebook’s full-time React Native team. Meanwhile, there are numerous people who contribute to the framework and report or fix bugs. You can join the React Native community via Stack Overflow, Twitter, Facebook, React Native Blog, Reactiflux Discord, Medium, and DevTo. Conferences are also a way to go. You can learn more about React Native Meetups by following the link.
Fultter is three-years-old, and, although the Flutter community is smaller and younger than the React Native one, it is growing at a rapid pace. For now, Flutter Community on GitHub is represented by 11 people and 36 repositories. You can also access the Flutter community through Google Groups — one for announcements and one for questions. Stack Overflow, Gitter, Twitter, Reddit, Medium, Slack, Meetup, Discord, and Hashnode will also come in handy.
The bigger community is, the easier it is to find a developer to help you with learning the technology or building the app. The point goes to React Native.
React Native vs Flutter: 4–2
The documentation of React Native is a weak point if compared to Flutter. At this point, it is written by the community, which inevitably affects the quality of it.
Learning Flutter is yet much harder. To master Flutter, you have to master Dart first. Also, reactive programming with Flutter is not quite intuitive. There are fewer tutorials and tips online because the framework is still quite new.
The documentation in Flutter is a better one than in React Native as it is written by the Flutter team. It is well-detailed, thorough, and helpful. Reading and understanding it, however, will require some experience with Dart from you.
React Native is easier to learn, whereas Flutter wins in terms of documentation. It would be fair if both React Native and Flutter received a point here.
React Native vs Flutter: 5–3
Apps that the technology is used for
React Native was introduced and now is actively promoted by Facebook — no wonder that most its products use it, for example, Facebook Messenger, Facebook Ads, and Instagram. Another tech giant that is actively supporting React Native is Microsoft. So, Windows, Xbox, and Skype — all these use React Native.
Also, this technology is actively used by Tesla and Shopify.
Flutter is not as popular as React Native, and not many companies use it actively. Still, it is used by Alibaba in the Xian Yu app or by Google in the Google Ads app.
React Native is more popular and widely used, and it is armed with the support of major tech companies. While we do believe in the potential of Flutter to win over its share of the market, for now, it badly loses to React Native.
React Native vs Flutter: 6–3
To Wrap Up
Our side-by-side comparison shows that, at least for now, React Native wins the Flutter vs React Native battle. While Flutter offers some significant tech benefits, the popularity and wide usage of React Native bring it to the first place.
Flutter is much younger than React Native. It was introduced to the market when all the weak points of React Native were well-known. Flutter came to solve these weaknesses. It uses a language, a renderer, and testing tools that are new for the mobile world. All of this was done to get a higher-quality animation and a polished application. This solution is a very interesting one from the engineering point of view.