Mobile Development

Technologies

2021-11-25

21 min. read

crossplatform

reactnative

flutter

Flutter vs. React Native: which one is better?

Contents

Nowadays, almost every company needs a mobile or web application. Only a few years ago, only large companies decided to take this step, today, it is a common trend, and even small companies invest in mobile app development.
Due to financial issues, many companies choose cross-platform development instead of native development to quickly create applications that will be immediately available on various operating systems, such as iOS or Android. This solution significantly speeds up the project duration and positively affects the project budget.

Flutter and React Native are programming languages for building cross-platform applications. Now let's compare the two to see which one will be better for your project.

What is Flutter?

Flutter (initially known as Sky) was announced in 2015 during the Dart Developer Summit. Originally, it enabled the development of applications for the Android mobile operating system. In February 2018, at Mobile World Congress, the first beta of Flutter was built by a team at Google. Flutter was deemed stable and production-ready in December 2018. On March 3, 2021, the second version of the SDK appeared, introducing support for the development of web applications and computer applications in the development version. Flutter has been continuously updated, and Google has been releasing new versions. Its most recent version is 2.2.0, which was announced at Google in May 2021.

Flutter is an open-source portable developer UI toolkit. In other words, it's a complete app Software Development Kit (SDK) with widgets and tools for creating native mobile apps, cross-platform mobile apps, desktop apps, and web applications. Flutter is an open-source software project that both Google and the Flutter community contribute to. Furthermore, Flutter 2.0.0 includes hundreds of improvements as a result of developer suggestions. Even though Flutter is a young platform, it has already achieved remarkable progress. We can claim that it's impressively developed and mature for its age.

You must be aware that Flutter is free. It's based on a fast, object-oriented Dart programming language. The software architecture is based on top-rated reactive programming (it uses the same style as React). Flutter includes its widgets, which are generated from its high-performance rendering engine (the rendering engine is designed predominantly in C++. ) and are quick, stylish, and customizable. Flutter apps have a great appearance and feel (while you may still make your custom design using readily accessible UI elements that follow platform standards) thanks to the widget experience.

What is Flutter for?

Flutter allows developers to create cross-platform apps quickly. Visual appeal, native code compilation, and a single codebase for mobile (iOS/Android), web, and desktop applications. The idea is that with Flutter, you won't have to develop separate apps for the web, mobile, and desktop. With Flutter, it appears as though there is only one tool that may be used to create applications efficiently.

Flutter for desktop

When creating desktop apps with Flutter, it's possible to generate a native Windows, macOS, or Linux app. Developers can also utilize Flutter's desktop support plugins, including Mac OS X, Windows 10/8/7, and Linux platforms. Alternatively, they may develop their own. Alternatively, they may develop their own.

Desktop support for Flutter is a beta feature. As a result, it still has functionality gaps. Flutter developers can try out a beta snapshot of desktop support on the stable channel or follow the latest changes to the desktop on the beta channel if they wish to do so.

Flutter for Web

The same experiences on the web as on mobile are available through Flutter's web support. It means you may now create Android, iOS, and browser-based applications from the same source code. Web support is most effective with:

Progressive Web Apps (PWA)
Single Page Applications (SPA)
Existing mobile applications (Flutter's browser-based delivery model allows existing mobile apps to access existing mobile apps through a web interface).

So as you can see, you can create mobile, web, and desktop applications using only one programming language. That increases the time of the development process.

What are popular apps made with Flutter?

Flutter is becoming more and more popular. According to Statista, in 2021, Flutter is the most frequently chosen technology. In 2019, Flutter was chosen by 30% of software developers; in the following year, that number increased to 39%, and in 2020 to 42%.

This success can also be seen in the developed applications. Here are a few of them:

Google ads app
Stadia
Google assistant
The My BMW app
Tencet
eBay
Groupon
The New York Times

Pros of Flutter

Updates for your app are simple to make on several platforms

App upgrades are more manageable when you have the same codebase for all platforms i.e. iOS, Android, and the web. Backend updates are also only released once per upgrade. When there are separate developers responsible for each platform (like in native development), the risk of synchronization difficulties arises because different development teams handle them.

Good app performance

Flutter performance, while not yet comparable to native developed apps, is still quite good in most situations.

With tens of millions of users, companies like Tencent or Google have many people satisfied with their Flutter apps' experience. If performance were a concern, well-known brands would not incorporate Flutter in their technology stacks.

Nevertheless, there are discussion threads on Reddit or Stack Overflow where programmers ask why their Flutter apps are sluggish. The cause of some Flutter apps' slowness is frequently unrelated to Flutter itself.

In most cases, suboptimal performance results from a lack of skills and adequate understanding of Dart and cross-platform development (that is why you need experienced developers).

You'll be able to construct apps that are quick in Flutter if you follow good practices. Flutter has a comprehensive section on recommended best practices in the documentation to help keep Flutter apps performant.

Less code is needed

When you pick cross-platform development with Flutter, the amount of code you must write and maintain shrinks considerably. Of course, you may need to make platform-specific changes in the code, but it will still be much shorter than two codes written separately.

Less testing

Because there is less code to work with, each Flutter app iteration requires less testing to deploy. Because each new version of the native app (iOS and Android separately) necessitates testing for both platforms when you have two codebases. In Flutter, you can write and execute one test across all platforms on which your Flutter application may run (e.g., iOS, Android, and desktop).

Fast time-to-market

A goal of a cross-platform framework like Flutter is to maximize code reuse across platforms. While you can't expect to cut development time in half, Flutter does help you save time. Cross-platform tools like Flutter will be an excellent option for app development when you need to validate your concept quickly, raise money, or build a user base.

UI components that are ready-made and user-friendly

Flutter has a whole collection of UI elements that further speed up production. While ready-made UI components (native components) might affect branding opportunities, Flutter also lets devs customize each component with platform-specific tweaks. Flutter's engine delivers a great user experience by rendering fast UI components.

Faster code writing (Hot reload)

The hot reloading option in Flutter eliminates the need to recompile code when a change is made. Instead, developers can edit code and make changes to it while the application is running. It significantly speeds up the development process.

Cons of Flutter

Libraries and assistance are not as extensive as native development

Google's support for Flutter is outstanding, but Flutter is still in its early stages. It means you can't always get what you need from existing libraries, so your developers may be required to create custom features, which takes time.

There are no “standards” for creating Flutter apps

That can be problematic when building more complex software. For example, Flutter lacks support for CI platforms like Travis or Jenkins. So, developers need to use custom scripts.

Platform risk

Despite Flutter's open-source status, if Google drops support for the project, it would be disastrous. We can't imagine a scenario in which Google abandons Flutter at the moment.

Flutter is still an immature framework

Flutter hasn't been around for long, so it's still not completely stable. Many of the features are unsupported, many libraries are still in the pre-alpha stage and Flutter demonstrates restrictions compared to native counterparts.

Dart is also pretty immature

It's kind of like taking a step back when compared to Swift and Kotlin: it has fewer features, or the existing ones aren't quite well-refined. Dart, as well as Flutter, is changing rapidly. That can cause maintenance problems.

What is React Native?

React Native is an open-source developer toolkit used for creating native, cross-platform, desktop, and web applications, developed by Facebook. It uses the React.js library. React Native started as an internal project in the Summer of 2013 during the Facebook hackathon. The first Preview release was in January 2015 at React.js Conference. The official launch of React Native took place in March 2018.

In the clash between Flutter, and React Native, two things are certain. React Native is older, and its community is bigger. Facebook is still improving its technology (re-architected UI layer - React Native Fabric or reduced the size of an app without removing features or components - Lean Core). In one word, the FB team has had plenty of time to refine this dev kit. They have also resolved many underlying issues like stabilizing the API.

React Native uses JavaScript to build cross-platform apps. At the moment, JavaScript is a widely used language in the online community. It's usually utilized with React.js and other popular JavaScript libraries. React Native has made it possible for web developers to create mobile applications without many studies.

What is React Native for?

React Native developers can use that framework to build cross-platform Android and iOS apps using a single codebase. React Native apps are not mobile web applications. React Native uses the same fundamental UI architecture elements as iOS and Android apps, so you're combining the same blocks together in JavaScript and React rather than Java, Kotlin, or Swift.

React Native framework for web and desktop

With the use of third-party libraries, developers can create desktop and web applications with React Native. JavaScript allows them to write cross-platform apps by sharing code with web applications. It is achieved through the use of abstraction components, which can be compiled for different platforms.

What are popular apps made with React Native?

In 2020 React Native was the most popular technology, according to Statista, when it comes to cross-platform frameworks. In 2021 we saw a significant increase in Flutter supporters, but this fight is still even.

Here are a few apps made with React Native:

Instagram
Facebook
Fb Ads Manager
Skype
Tesla
Bloomberg

Pros of React Native

JavaScript talents

React Native works similarly to React.js, relying on JavaScript, the most popular programming language for the eighth year in a row. React is the most common JavaScript tool for front-end development, with 12.4 million developers actively using it worldwide.

These rates make it easier for companies to find a wide range of talent. Engineers with a background in JavaScript and particularly React Native might quickly learn RN fundamentals and transition from web to mobile development.

Familiar ecosystem and ideas

React Native has its own set of complexities, but for people used to JavaScript and React, the learning curve will be modest. It takes two to several weeks to start developing RN apps based on prior expertise.

In most cases, no further investment in training courses is required to learn about specific RN topics. All you have to do is download the necessary documents and ask for the help of a large community of RN developers.

Two coding bases for two platforms

"React Native isn't perfect, but the benefits of a single codebase are huge," this is what most companies opt for RN admit.

The logic layer of the application may be shared across iOS and Android using the React Native framework. You don't need two separate development teams if you want to distribute your project across mobile platforms. In one word you don't have to hire one team to develop in Java or Kotlin for Android and the other to work with Objective-C or Swift for iOS.

In theory, you'll complete the job roughly twice as fast and much less expensive than in the case of Android or iOS native development. In practice, time and cost savings are lower, but 90% of the code may be reused across platforms.

Components that are already finished - fast development

React Native provides a collection of pre-bundled components to save you time creating common blocks from the ground up. However, the Facebook team does not restrict you to the core collection. You may pick and choose from hundreds of libraries developed by React Native contributors which are available on GitHub. For example, React Native Elements to share UI elements between RN and React JS web apps (316 contributors, used by 95,200+ developers).

You may create MVP (Minimum Viable Product) to test your concept and production-ready applications at an accelerated rate, thanks to the abundance of prebuilt components.

Native APIs and views

React Native, unlike other cross-platform frameworks and progressive mobile app development approaches, has been designed to account for and celebrate differences between iOS and Android. It uses native APIs and native visual elements such as buttons, menus, status bars, etc. As a result, the same views will appear somewhat differently on Apple and Android devices.

React Native covers all essential user interface elements. However, if you want more sophisticated features, you may use plugins provided by the community to fill the gap. Another option is to create a native module within your JS code and access native APIs that aren't available out of the box.

Android and iOS have a better runtime thanks to the Hermes engine

Hermes is a JavaScript engine developed by Facebook to enhance the performance of RN apps and enable them to run as fast as possible. Its implementation results in faster start-up time, less memory consumption, and a smaller download size for RN projects.

For a long time, the function was restricted to Android. But with the most recent 0.64 version of React, iOS apps now run 40% faster due to Hermes’ support. The upgrade also includes another advantage: Developing cross-platform applications is now considerably easier.

Flipper and Better Debugging

Debugging was an issue with RN developers for a long time. However, things started to look up after introducing the Fast Refresh feature and out-of-the-box mobile app debugger Flipper.

Vast community

In terms of user base and ecosystem, React Native lags behind React. However, the number of RN developers is rising at a rapid pace, so you'll almost certainly get immediate assistance if you run into any development issues.

Cons of React Native

Performance issues

Even though RN apps are quick enough, they can't compare to native solutions in terms of speed. The issue is with React Native's architecture. A React Native application comprises both JavaScript and native code, which run in two separate threads.

The JavaScript thread handles the app's business logic. It determines which APIs to call, which views to display, and how to accomplish it. The UI (or main thread) manipulates UI elements, creates views, and "listens" to user actions such as touches, swipes, and so on.

The shadow thread, which sits between JavaScript and native worlds, permits them to exchange data in serialized JSON objects via the React Native bridge (also known as the shadow thread). It lies between JS and native environments, allowing them to communicate by passing data in the form of serialized JSON objects. Among other things, it calculates the layout.

On the other hand, the bridge creates "traffic jams" known as "the RN worst limitation." When developing animations and touchscreen interactions, the performance shortcomings become especially apparent.

What is the situation now? Facebook is presently working on a more sophisticated architecture that will allow the JS thread to communicate with the UI thread via a lightweight layer known as the JavaScript Interface (JSI.)

The absence of native components' out-of-the-box support

React Native is sometimes promoted as "two apps for the price, using JavaScript alone," but this isn't quite correct. The framework doesn't come with built-in support for everything you might require. You'll need native language experts to include some sophisticated features or build them from scratch.

What are they doing about it? With the community's expansion, more and more open-source libraries with native features are becoming available. Their use, on the other hand, still necessitates knowledge of a specific platform.

Upgrading complexities

According to their comments, moving from one version to the next is one of the most challenging aspects of React Native by developers. The question becomes: why bother upgrading at all? There are many significant reasons, including:

The objective of a software update - correcting bugs, increasing performance, and providing security updates
Accessing new features and APIs
Keeping the JS and native sides in sync, ensuring compatibility between JavaScript and native code, and maintaining up-to-date with changing standards

So, it's highly advised to upgrade React Native applications to the most recent version. However, upgrading takes time and effort, depending on the changelog. Keep in mind that missing just one step might take hours of debugging. However, if you are only one version behind, things aren't nearly as terrible.

The React Native community developed the Upgrade Helper tool to make it easier for developers to move from one version to the next. It displays differences between current and targeted releases, so you can see what has changed.

Flutter vs. React Native: Market Share With Real Statistics

It is estimated that 42% of developers prefer using React Native, while Flutter is a tool of choice by the other 42%. The remaining 16% uses technologies like Cordova or Ionic. Despite being a very young framework, Flutter led the market over the past year's Analytics according to Google Trends. But before you start looking for Flutter app developers, it is worth examining the real market stats to make an informed decision.

Building apps delivered on time is one of the most crucial aspects of mobile and web app development. Their cross-platform nature, combined with their third-party tools and prebuilt components, help you develop your application more quickly.

Project expenses are another benefit of Flutter and React Native. However, which solution provides the quickest development time? Or is best suited to your project?

That all depends on your project and the balance of your crew's talents.

Do your developers know Dart? If that's the case, working with Flutter will be a breeze.
Do your developers know JavaScript? If that's the case, React Native appears to be the best option.
Do you want to use native UI components in your app's user interface? If that's the case, go with React Native.
Is brand-first design your primary goal? If you answered yes, we think Flutter is a good fit.

Remember that each application is unique, so you must evaluate each one on its own merits. It's always worth discussing your project with a professional team of developers who can assess various strategies and have a broad enough skill set when it comes to cross-platform development.

We have been creating successful software projects in various technologies for over 12 years, so if you want to talk about your project, arrange a free consultation with our experts.

About the author

Peter Koffer - Chief Technology Officer

With 13 years of experience in the IT industry and in-depth technical training, Peter could not be anything but our CTO. He had contact with every possible architecture and helped create many solutions for large and small companies. His daily duties include managing clients' projects, consulting on technical issues, and managing a team of highly qualified developers.

Share this article

Contents

Software development company

We’ve been in the business for over 13 years and have delivered over 200 mobile and web projects. We know what it takes to be a reliable software partner.

We can help you with:

Mobile App Development

Web App Development

UI / UX Design

It Outsourcing