Facebook’s React Native and Google’s Flutter are two very different frameworks for accomplishing the same task: cross-platform app development. The cost of app development is significant, and developing and maintaining the same app separately on different platforms requires a lot more time and effort than maintaining a single code-base. As a result, there has been an explosion in the popularity of tools which aim to solve this problem in recent years. React Native has been around since 2015, and Flutter came on the scene in 2018. Under the hood, these two frameworks are very different, sharing almost nothing in common, yet they do share many features which have been found to be useful to developers.

Popularity

The above chart shows data taken from Google Trends, which measures popularity based on search results. You can see from the above chart when each framework was released. Flutter (in red) has not yet had time to reach the same level of popularity as React Native, but considering that it has only been around since 2018, it’s popularity is growing at least as quickly as React Native did when it was released in 2015. At the same time, React Native appears to be plateauing.

Long story short: Flutter appears highly likely to reach or exceed the popularity of React Native in 2020, based on Google search trends.

What they share in common

Dart and React Native share some important features in common:

• Reactivity: The very namesake of React is the concept of reactivity, which involves the propagation of change through an app. For instance, if you have a variable representing the current count in a counting app, reactivity governs how changes to the counter variable are propagated to the rendered user-interface. Both React Native, and Flutter can be used to create a reactive UI.
• Cross-platform: this goes without saying, given the title of this article, but both can be used to create apps on both iOS and Android devices. Dart has some additional target platforms which we will discuss below.
• Fast iteration: Both have the ability to perform hot-reload of code into a running application, greatly speeding up the edit-compile-view-edit loop, although Dart is significantly faster at doing this.
• Modular UI: Both of these frameworks make it easy to build modular UI code, by dividing it into components in the case of React Native, and widgets in the case of Flutter. This makes UI code easier to debug and maintain.

Advantages of React Native

React Native has a few advantages over Flutter, namely:

• Better support: Since React Native has been around longer than Flutter, and uses a language, JavaScript, which has a much broader developer base than Flutter’s Dart, developers using React Native can expect to be able to find much better support when they encounter issues. It’s worth noting, however, that Google has released very comprehensive documentation for Flutter nonetheless.
• More libraries: Developers can choose from a greater number of libraries to extend the functionality of their apps than Flutter.

Advantages of Flutter

Flutter has some important advantages over React Native:

• Faster iteration: Dart’s speedy JIT compiler can famously deliver code changes into a running app in less than a second!
• Faster apps: Dart being compiled ahead-of-time, and having significantly less overhead makes Flutter apps significantly faster and smoother than React Native apps.
• More platforms: In addition to iOS and Android, Flutter offers more target platforms:
  • Web
  • Desktop
  • Fuchsia — Google’s upcoming mobile operating system will use Flutter as it’s official development framework, naturally.

Programming language

React Native and JavaScript

React Native apps are written in JavaScript, the most popular programming language on the planet. The huge number of people programming in JavaScript means that there are a large number of potential React Native developers out there.

In a React Native app, JavaScript code runs in the JavaScriptCore engine, which is the engine used by Safari. In debugging mode, however, the app runs inside the Chrome browser. In this mode, Chrome’s V8 engine runs the code.

One of the potential issues with using JavaScript in a native app is the fact that JavaScript is an interpreted, dynamically typed language. This poses a few problems, namely:

• Performance: Despite the huge strides that have been made in JavaScript performance in recent years, it still does not perform as well as languages that compile to native code. It also has some significant overhead on startup, requiring the interpreter to start up, and Just-In-Time (JIT) compilation to take place. This can lead to slower app startup times.
• Safety: JavaScript is not compiled Ahead Of Time (AOT) like Dart, and is dynamically typed. This limits the degree to which linters or transpilers are able to find mistakes in the code before it reaches production.

Flutter and Dart

Flutter apps are written in the Dart programming language developed by Google. There a quite a few things to like about Dart. Here are a few nice features:

• AOT compilation: because Dart is compiled ahead of time to native code, it’s performance handily beats that of JavaScript, despite the heavy optimization of modern JavaScript engines. This also means that the Dart compiler can find many mistakes in the code at compile time.
• Stateful hot reload: Dart also has the ability to be JIT compiled during development, which allows code changes to be compiled, and injected into a running app without disrupting the app’s state in less than a second!

Before Flutter, Dart was used almost exclusively within Google, however, it has seen an explosion of popularity after Flutter was released.

Performance

There are a couple of key factors to consider when comparing the performance of these two frameworks:

• JavaScript Bridge: React Native uses bridge to communicate with native UI components on both iOS and Android. This provides a layer of abstraction that allows the platform-independent JavaScript code to control native Android or native iOS components without knowing which system it is running on. This, however, has a significant performance overhead.
• JIT vs AOT Compilation: React Native uses JIT compilation to compile and run JavaScript code. This involves overhead at startup, and also overhead while the app is running due to the JIT compiler always running the background optimizing the code. Dart, on the other hand, uses AOT compilation, which allows the compiler to do any optimizations at compile time. It also means that the app can start running immediatly upon being launched.

The take home here is that, at least on paper, Flutter apps ought to beat React Native apps in performance by a significant margin.

Development speed

Development speed is a bit hard to measure because there are so many factors that go into it. Let’s consider a few factors to get a better sense of which framework can help us get things done faster.

How much work does it take to get the development environment ready and create a basic app?

Flutter

1. Install Android Studio
2. Install the Flutter plugin
3. Select File > New Flutter App
4. Follow the instructions

React Native

The setup time for a React Native app will depend highly on whether or not you use Expo. Expo is a set of tools that simplify and streamline React Native development. It does, however, have some limitations, and is difficult to eject from an existing project. Assuming you choose Expo, and have npm version 10 or greater installed, then getting an app up and running is as simple as four lines of code:

npm install -g expo-cli
expo init MyExpoApp
cd MyExpoApp
expo start

Without Expo, setting up an app is a much more involved process. It is also not possible to develop for the iOS platform without using an Apple computer with XCode installed.

The Final Verdict

With Expo, creating an app requires about the same level of difficulty between the two platforms. Without it, however, React Native requires more work. Expo is not a good choice for many apps, and if you end up having to eject it from an existing app you may end up doing more work than you saved by using it in the first place.

How expressive is the language?

JavaScript (React Native)

JavaScript is a dynamic language. Types do not need to be declared, and can change at runtime. Complex data structures can be brought into existence without a lot of fuss, and data can be manipulated with ease. For the developer, this brings a lot of power, and a lot of responsibility to use it wisely. The expressiveness of JavaScript has only been enhanced by new features brought into the language with ES6, ES8, and beyond.

Dart (Flutter)

Unlike JavaScript, Dart is statically typed, which requires a bit more fore-thought on the part of the programmer. This allows Dart to compile to efficient machine code, and makes for a more reliable program. Dart’s compiler can infer types at compile time in certain situations, which removes much of the boilerplate usually associated with static typing, however. In general, the design principle behind Dart, according to Google, is simplicity. Their policy is to favor a clean, understandable language over a complex one full of every new feature.

In 2017, Namcook Analytics published a study which looked at the productivity of various programming languages in terms of hours of work to produce a certain measurable amount of business value (termed function points in the study). Interestingly, they ranked Dart as more productive than JavaScript, requiring only 11.62 hours per function point, rather than 15.93 for JavaScript.

How quickly can a developer iterate?

Here, both frameworks offer their own version of hot-reload, which allows code changes to be reflected in a running application within seconds. Both are fast, however, Dart’s lightening-fast JIT compiler makes Flutter’s hot-reload faster, with the running app reflecting code changes in less than a second!

Who’s using them?

React Native

Facebook created React Native, and it’s no surprise that the Facebook app is written in React Native. In addition, the following companies are also using it:

• Skype
• Uber Eats
• Tesla
• AirBnB
• Instagram
• Walmart

Flutter

Flutter is newer on the scene, yet it has already been used by many companies to create their apps, such as:

• realtor.com
• Square
• The New York Times
• Alibaba

Conclusions

React Native is a proven technology backed by a large company (Facebook). It has already been used to create thousands of apps, many very successful. It is based on the world’s most popular programming language, and it has a large community of developers. Flutter, created by Google, is much newer, and has not yet had time to build a community as large as React Native, but is rapidly growing. Flutter offers the promise of more efficient, faster apps, which can run on an even larger number of platforms. In fact, Flutter is on track to support nearly every type of device you could get your hands on (web, desktop, iOS, Android, and event embedded devices), without many of the compromises we have come to expect from cross-platform frameworks (performance issues, janky graphics, interface inconsistent with target OS standards).