Flutter vs React Native — Which is best in 2021?
If you want to build a cross-platform mobile app in 2021 your two best choices are Flutter and React Native.
Both frameworks have risen in popularity and promise fast development, near-native performance, and a smooth UI — all from one codebase. But how do they differ? And which framework is the best one to pick in 2021? Read on to find out.
I will first give a short introduction to both frameworks. Then I will walk you through direct comparisons between React Native and Flutter. By the end of this guide, you will have a solid understanding which cross-platform framework to pick for your next project.
What is Flutter?
Flutter is a cross-platform app development framework. Flutter allows you to develop apps for iOS, Android, macOS, Windows, and the web with just one codebase.
Who created Flutter?
Flutter was created by Google in 2018. However, Flutter is an open-source project that is maintained by a diverse community of developers and other companies.
What popular apps are made with Flutter?
Quite a few companies have built large apps with Flutter — despite being such a young framework.
Google is using Flutter in a variety of applications such as Google Assistant, Google Ads, and even the large gaming application Stadia.
But other companies have also adopted the framework and had big success with it. Chinese tech giants such as Alibaba, Tencent, Baidu, and ByteDance (creator of the TikTok app) have adopted Flutter for at least some of their applications.
BMW, eBay, Philips, Sonos, and Groupon have used Flutter in a variety of mobile apps as well. Many of them report faster development speed and great performance.
BMW is building their iOS and Android apps with Flutter
One of my favorite examples of a great Flutter app is the diary app Reflectly. It uses a variety of custom interfaces and animations that show you what is possible with Flutter. The developers of the Reflectly app have even written up an article on why they switched from React Native to Flutter.
All of the above examples have used Flutter for mobile applications. Desktop and web support is a recent addition to Flutter and thus not broadly used yet.
You can find an updated list of apps using Flutter on the Flutter showcase site.
What is React Native?
React Native is a cross-platform mobile framework for building user interfaces. It leverages the power of the React framework and Javascript to develop iOS and Android apps.
Who created React Native?
Facebook created React Native back in 2015. The company was trying to find a way to share part of its development efforts across the two major mobile platforms.
Today, Facebook is still active in maintaining and further developing the framework. However, React Native is also open-sourced and has a large community of developers and companies contributing.
What popular apps are made with React Native?
Naturally, a lot of the Facebook mobile apps are made at least in part with React Native. If you have used Facebook, Messenger, or Instagram before you have experienced React Native in action.
Many other popular apps from other companies started using React Native. Wix, Shopify, Discord Tesla, and Uber Eats are all using React Native in some of their mobile applications.
The Shop app by Shopify is one of the most recent examples of a widely loved and well-implemented React Native application.
Flutter vs React Native: Programming Language
Flutter uses the modern Dart programming language. If you have used any C-style languages in the past Dart will feel familiar. Dart is object-oriented but includes plenty of features to make it usable as a functional language. React Native on the other hand uses good old Javascript.
If you have a Javascript background you will notice many similarities between the two languages. For example, Dart uses Promises (which are called Futures) for asynchronous code and supports the async/await syntax.
When looking at both languages side-by-side it becomes clear that the Dart creators were inspired by Javascript. However, Dart improves on many weak areas of Javascript.
Dart is statically typed compared to the dynamic Javascript. The recent rise of Typescript (which adds types to Javascript) proves that many developers are tired of avoidable mistakes due to the lack of typed code.
Since Dart version 2.0 the language is also null-safe. This means that when you define a variable you need to explicitly state whether it should allow null values. In my experience, this feature is a huge one. How often have you received errors in Javascript related to a variable being null or undefined? A whole class of bugs simply disappears.
You can bring some of the Dart features into your React Native project by using Typescript. I highly recommend this approach since it makes your codebase less prone to bugs and more readable for new developers. However, Typescript is not able to solve all of the issues with Javascript. Dart arguably wins if you only compare the language features side-by-side.
Javascript (and in extension even Typescript) has a huge advantage over Dart though — it is one of the most popular languages in the world. Javascript is widely used for the web, backend applications in NodeJS, and even the internet-of-things. This means that there is a much larger community around Javascript.
There are also more developers available to hire for Javascript. This can be a key factor when deciding to pick Flutter or React Native for your project.
Which framework should you learn if you are a developer looking for jobs? Currently, there are more jobs available for React Native. You will also learn ReactJS for the web which has plenty of jobs on the market. There are fewer jobs available for Flutter, but the demand seems to grow fast:
To sum up, Dart has great features as a programming language, such as types and null-safety. However, Javascript is by far more popular and in extension has a larger ecosystem.
Dart has one trump card though which makes it a great fit for developing cross-platform apps. This is what we will look at next.
Flutter vs React Native: Performance and User Experience
To truly understand how Flutter and React Native differ in their performance and experience for the user, we need to take a closer at how they work.
Let’s start with React Native.
React Native leverages the Javascript ecosystem and the React core library. This means that the majority of the code you write is written in Javascript.
Mobile devices don’t process Javascript natively. So how does your Javascript code get translated into a mobile application? React Native uses a Native Bridge that passes messages between the code written in Javascript and native code.
The team around React Native has spent much time optimizing the performance of the Bridge, but fundamentally it remains a bottleneck. This is why some React Native libraries, such as React Native Reanimated, use complicated architectural setups to achieve even better frame rates.
The core architecture of React Native makes it hard to optimize for native performance.
The components you use in React Native, e.g. a text input or button, are still native components. You just control them through the Javascript interface.
If you want your app to be as close as possible to the design of your chosen platform, iOS or Android, this is great news. React Native apps will adopt the design of the current platforms well and look very similar to a natively written app.
However, most companies today want to achieve a consistent experience across any device. They want their apps to have consistent branding — colors, fonts, and form language. In React Native, only because your app works and looks great on iOS, does not mean it will look the same on Android!
Flutter uses a fundamentally different approach to creating cross-platform applications. Flutter uses Dart that compiles to both Javascript (used for Flutter on the web) and machine code.
This means that Flutter applications can achieve fast performance once they are compiled.
Flutter does not render native components on the screen. It uses a rendering engine called Skia that paints your interface and animations from scratch.
This gives you complete control over the UI. You can implement completely custom forms and animations. Flutter also implements native components for both Android (these are Material design widgets) and iOS (called Cupertino widgets).
Don’t be fooled however by how close they look to the actual components. They are drawn on the screen from scratch just like anything else in Flutter.
The downside is that the Flutter team needs to implement every interface component in their framework. New components might only make it to the framework after some time.
While you can make your app look like the native design specifications in Flutter, it is probably not the right tool for this job. You will write a lot of forking logic and might still not get the results you are looking for.
If you want to have a consistent design across both platforms Flutter really shines. In most cases, your apps will look identical on iOS, Android, and other platforms.
Flutter and React Native on the Web
So far we have been looking at mobile applications. What if you would like to have a consistent experience across native mobile applications and the web?
If you need your website to have great SEO, you probably will be happy with neither of the options below. It is still best to build out your web experience separately if you want to optimize your page for being publicly available.
But if your website is guarded behind authentication or you don’t care as much about SEO you can seriously consider both Flutter and React Native Web.
React Native Web is different from ReactJS, the original web framework. React Native Web lets you leverage your mobile codebase with few tweaks for the web. Twitter has been using React Native Web for its website experience and has had great success with it.
React Native Web has become quite mature and is even included in the popular React Native development framework Expo. At this point, you can safely reuse most of your code from React Native and use it on the web!
Flutter has added web support officially in the latest version Flutter 2 in March. This means that Flutter for Web is stable to use in production.
One very promising first example of what web apps can look like with Flutter is the Rive App. Rive has rebuilt their animation tool to work with Flutter across web and desktop platforms. The results are impressive.
Dart as mentioned before as Javascript as an explicit compile target, which enables it to produce clean and performant web applications.
However, Flutter applications don’t resemble a typical Html structure. Flutter leverages the Web canvas to custom draw your UI. This means that search engine support is poor and probably will never be great.
But it can come with some unexpected benefits. The web was never built for complex data-driven apps of specific types. For example, Google implemented their Docs app recently with the web canvas instead of native Html input or textarea elements. A collaborative editor is one of those things that is simply hard to build with the traditional web toolbox.
If you want to build publicly accessible websites that follow web standards your best bet is still to use a separate codebase for the web. You can use frameworks like NextJS that come with a lot of optimizations for loading images and improving SEO.
If you use React Native and have structured your codebase well, you can even reuse most of your application logic and state. You simply need to replace the interface component layer.
If you are using Flutter, you have to maintain a separate codebase in another language than Dart.
So think hard about your project and what the requirements for the web application really are before choosing React Native or Flutter.
Flutter and React Native on Desktop
Both React Native and Flutter projects can be compiled as a desktop app.
In React Native’s the most promising library is developed by Microsoft (who would have thought?). This is a common pattern in the React — and more broadly Javascript — world. You often have to install additional libraries to extend the framework.
React Native for macOS and Windows is still in its early stages and has not released version 1.0 yet. However, it promises to develop performant desktop apps in the React ecosystem and could be become a great alternative when you are picking React Native.
Flutter has been working on desktop support over the past years and has released it in their stable channel. There are not many reference apps available yet, but since the framework was built to support any platform from the very beginning it is the better choice right now for native desktop apps.
Which one is easier to learn? React Native or Flutter?
It depends on what you have worked with before. Do you have any experience in Javascript? React Native will be the easiest to pick up. However, Dart is similar to Javascript. It won’t take you long to learn the basics of Dart and start writing Flutter apps.
Both frameworks have endless content on Youtube, Udemy, Medium and other places to get started and to find help on specific topics.
The documentation of Dart and Flutter is also excellent to start with. It presents the language and framework concisely.
Are you building an app that requires
- smooth animations
- looks similar on all platforms
- needs a great native experience on desktop
- does not require SEO or semantic Html
you can’t go wrong with Flutter!
Flutter has a young but thriving ecosystem and has a well-architected base that lets you create just about any interface in your platform of choice.
Are you building an app that
- adapts to the design language of your target platforms
- is launched primarily on mobile
- is developed with a ReactJS web app
- is developed by a team of web engineers
pick React Native!
React Native is used in large applications you use every day. It is battle-tested and has a wide developer community and package ecosystem around it.
Originally published at https://johannes.co.
Level Up Coding
Thanks for being a part of our community! Subscribe to our YouTube channel or join the Skilled.dev coding interview course.
