April 12, 2021

Flutter vs. React Native in 2021 - Detailed Framework Comparison

Oleg Goncharenko

Oleg Goncharenko

IT Consultant

8 min

Native applications work smoothly on mobile devices. Their graphic transitions take less time for UI rendering compared to the cross-platforming. The reason is simple: their code can communicate straight to the mobile OS core, enabling UI methods.

In the meantime, the native mobile platforms (OS) are written in different languages. For instance, Android OS is a mix of Java, C and C++. In comparison, the iOS platform is built with Objective C and Swift. So, native mobile development requires the knowledge of a few languages like Swift and Java simultaneously. That's a big deal, as not many companies could afford to hire developers for each platform.

Cross-platforming mobile applications are less competitive in graphic animation, though it is hard to notice at first glance. Moreover, they are cost-efficient and could be a good fit for early-staged companies.

Facebook was the first significant player who announced React Native in 2015. The cross-platforming development became true: you create the code once, but it turns to native designs.

The next big event occurred in 2017. Google announced Flutter, which was based on Dart programming language.

Content

UI Rendering

React Native

With React Native, developers create a single code compatible with both iOS and Android platforms. To ensure that, Facebook implemented the Yoga engine, which translates the JavaScript and CSS code to the native UI. Regarding Facebook, they reached code reuse in 87% for their Ad Manager Application. It shows a high result.

When the application is being installed on the Android system, the APK file is unpacking on two parts - the native UI and the Javascript code. All components and JavaScript libraries will be ported to the device too. So it will need some more space on the device.

A visual scheme on the process of installation for React Native app (used from the speech of Lev Vidrak):

apk unpacking

The UI layer is responsible for the user interactions. If any changes appeared on the UI (like, a user touched the button or scrolled down), the native controller will pass this information to the bridge.

The bridge is connected to the mobile platform API and serves as a transport layer. It binds JavaScript and C/C++ language environments. It can read the Javascript code and translate it to a related method. Using this method, the native C/C++ platform exposes the machine code for rendering the UI.

A concept of React Native's bridge

The React Native’s bridge contains the JavaScript Core. It was created by Apple and is inbuilt to the iOS platform. Hence, React Native app operates with its native JavaScript engine. For debugging, it uses another JavaScript engine, V8, the same which is running in Google Chrome and is compiling data for Node.js.

Flutter

Like React Native, Flutter is compiling the design to the native code. But in contrast, it doesn’t use the bridge. Flutter’s core is based on the engine, which is primarily written in C/C++. The graphic machine is called Skia, and it compiles the graphic to the native machine code while a user interacts with the application.

Google team:

"Flutter is fast. It's powered by the same hardware-accelerated Skia 2D graphics engine that underpins Chrome and Android. We architected Flutter to be able to support glitch-free, jank-free graphics at the native speed of your device. Flutter code is powered by the world-class Dart platform, which enables compilation to native 32-bit and 64-bit ARM code for iOS and Android."

For graphic rendering, both Flutter and React Native are using external engines. In both cases, the code is compiling at the running time of the application.

React Native uploads its entire libraries and components to the device when Flutter is rendering the widgets directly connected to the native library.

Summary: Flutter shows better performance due to seamless integration with the mobile OS platform and the graphic rendering at a few times higher frequency than React Native.

Business Logic

Both Flutter and React Native use the best practices, distinguishing the UI from the business logic. Flutter represents the BLoC methodology, while React Native is based on the Flux.

React Native

React Native keeps all the data communication within the single process, saving the device memory. Meanwhile, the system keeps the three equal threads simultaneously, distinguishing their responsibilities.

For instance, if the data is not coming to the UI side yet, the app will not stop, keeping up with the changes as soon as they arrive from the JavaScript side (which plays the business logic role here). So, its data management prevents the blockage of the performance.

A flowchart of data flow in the React Native

It may seem that the existence of the bridge as a middle layer may decrease the application performance. Regarding the Airbnb case, React Native's architecture is not leading to that problem.

Airbnb on React Native’s performance:

“One of the largest concerns around React Native was its performance. However, in practice, this was rarely a problem. Most of our React Native screens feel as fluid as our native ones. Performance is often thought of in a single dimension. We frequently saw mobile engineers look at JS and think “slower than Java”. However, moving business logic and layout off of the main thread actually improves render performance in many cases. When we did see performance issues, they were usually caused by excessive rendering and were mitigated by effectively using shouldComponentUpdate, removeClippedSubviews, and better use of Redux”.

Vladimir Novick, an author of the book 'React Native - Building Mobile Apps with JavaScript', explains the reasons for low performance:

If you do complex calculations in your application that leads to a lot of UI changes, these can lead to bad performance. The rule of thumb is that if your UI changes slower than 16.67 ms, then your UI will appear sluggish.

Flutter

Lots of new apps like taxi driver services and ride-sharing marketplaces require synchronous processing. Flutter supports the synchronization and seems to have an advantage in this case. For instance, Yandex Driver chosen Flutter as the primary SDK for building their app.

Unlike React Native, Flutter is prioritizing the incoming requests, placing them in essential and isolated threads.

Nevertheless, React Native is a good fit for building transportation and ridesharing apps at an early (MVP) phase. Our team developed an uber-like app 'Gokada' with React Native. The service company has validated its MVP and acquired new customers. The performance hasn't been an issue for this app due to the UI's split and the business logic.

Summary: Flutter is a better choice for companies that require synchronization, though React Native could be a good fit at the MVP stage.

Programming Language

Dart

Google has founded Dart in 2011, though it was not widely used before 2017. It became popular due to Flutter of course. Dart is simple to learn, it doesn’t take much time to get familiar with it. It is an object-oriented programming language, based on C and looking similar to Java.

Though Dart is very new, it is loved by many programmers. Flutter community admires the documentation on Dart, above all, it is pleasant to read. The only issue that the community faces now is they are not enough large. However, Google’s team regularly contributing to the framework at GitHub, and keen on answering the upcoming question on StackOverflow.

JavaScript

JavaScript was developed for the web in the middle of the 1990s, and it is the core language for many frameworks, including React Native. It represents functional programming. JavaScript’s main advantages are event-driven functioning and scalability.

In terms of UI management, Flutter is similar to JavaScript, as it constructs its user interface “to reflect the current state of your app”.

A formula for UI components in Flutter

Summary: JavaScript and Dart are prospective languages. Despite young, Dart obtains tremendous support from the Google team. React Native’s society will be growing as JavaScript comes from the web-programming area and proves its efficacy.

UI Design Tools

Flutter

Flutter inherited the React methodology from the start. They have been using the same component structure. The whole application is constructed as one single widget which is breaking down into many others. Components are called widgets and have the same hierarchical principles as at React Native.

Flutter has two particular spaces for the UI code design. They provide Cupertino widgets specifically for iOS and Material widgets for React Native. The developer needs to work with two libraries to align them with the app's final design. Even though this approach helps build the customizable look and feel design, this work doubles the development time.

React Native

React Native provides a developer with a UI library compatible with both platforms. The most popular libraries are: Native Base, React Native elements, React Native Material UI.

Worth mentioning that Flutter contains a hot loader feature that is highly valued by its community. The feature enables to view the ongoing changes on-screen without the need to recompile the whole project again. React Native involves a similar feature too, but there are lots of claims that it (is buggy) doesn’t work properly.

Flutter and React Native is different in terms of their market strategies. The first one targets native mobile developers, and the second one focuses on specialists from the web-programming world. It explains the difference in programming tools and environment of both SDKs.

Summary: React Native saves the developers time for design since its UI code is reusable for both platforms. Also, React Native provides a developer with better visual features to simulate the code view on different platforms.

Community Support

React Native’s open-sourced library is supported continually by Facebook and its community. They provide a whole set of technologies, like, React Native components, JSX and JavaScript code. Though, as shared on the IBM developers community website, 'React Native is still evolving, and it can be confusing when you try to decide which libraries to use when you need functionality that is not provided by React Native today, such as how to do UI navigation or use maps'.

React Native developers claim that they often come across incomplete libraries. That's unclear if the code is valid unless you tried to implement it. There are many libraries of poor quality, which will take extra hours to figure out the issue. So, working with the open-sourced libraries is a pain point for React Native developers.

Top companies that built their products with React Native:

  1. Facebook;
  2. Instagram;
  3. Pinterest;
  4. Uber Eats;
  5. Skype;
  6. Tesla;
  7. Wix.

Top companies that created their products using Flutter:

  1. Google Ads;
  2. Toyota;
  3. eBay Motors;
  4. Alibaba;
  5. Groupon;
  6. Square;
  7. The New York Times.

Conclusion

Flutter uses the same conception as React Native. However, it moved a big step ahead in terms of performance and architecture.

Flutter vs. React Native in 2021

Read more on our blog