Is Flutter the better choice? Or is it React Native?

Flutter vs. React Native - Flutter is a better choice

Is Flutter the better choice? Or is it React Native?

Flutter and React Native are among the best choices for cross-platform software development. Many still wonder whether Flutter or React Native is the better choice. Why don’t we sit down and take some time to enjoy this 10-min read to make an informed decision?

What is Flutter?

To decide if Flutter is the better choice, we have to take a careful look. Flutter is a portable UI toolkit – a comprehensive application Software Development Kit (SDK), supported with many widgets and tools.

Is Flutter the better choice Or is it React Native

A brief history of Flutter:

  • February 2018, Mobile World Congress – First beta release of Flutter
  • April 2018, Google I/O – Flutter beta 2 release
  • May 2018, Google I/O – Flutter beta 3 release
  • Flutter joins GitHub’s top 100 repos
  • June 2018 – Flutter Preview 1 release
  • September 2018 – Flutter Preview 2 release
  • November 2018 — Dart 2.1 release
  • December 2018, Google I/O – Flutter 1.0 release
  • A crucial milestone for the technology – since Dec. 2018, Flutter has been considered  stable and ready for production
  • February 2019, Mobile World Congress – Flutter 1.2 release
  • May 2019, Mobile World Congress:
  • Flutter 1.5 release
  • Flutter for the Web preview version
  • Dart 2.3 release
  • July 2019, Flutter 1.7 release
  • September 2019, Flutter 1.9 release
  • Flutter has been regularly developed and Google has been releasing its newer versions. Its newest version is 2.2.0 and this was announced during Google I / O in May 2021. 

What popular apps are made with Flutter?

  • Xianyu app by Alibaba 
  • Hamilton app 
  • Google Ads app 
  • eBay Motors app 
  • Google Stadia 
  • Groupon 
  • Baidu Tieba 
  • Philips Hue 
  • Topline app by Abbey Road Studios
  • Reflect 
 

Flutter – Advantages and Disadvantages

In this section, we will quickly go through the key benefits and drawbacks of Flutter.

Advantages of Flutter:

Hot Reload

Hot Reload is one of the greatest things about Flutter, appreciated by every top mobile app development company. Because of this, Flutter offers more dynamic and rapid app development. Developers can make changes to the codebase on-the-fly, and see them immediately taking effect in the application. In other words, developers can add features, fix bugs, and experiment with new ideas instantly.

One codebase, 2 or more mobile platforms

With Flutter, developers can write just one codebase for two applications – covering both iOS and Android platforms. Google is currently working on Flutter for Web, and once it is done, a single Flutter codebase will cover Android, iOS, and web platforms.

Up to 50% less testing

roughly 50% fewer automated tests can be achieved because we can create the same tests to run on both platforms, reducing the demands on our QA team.

Faster apps

Flutter apps perform smoothly and fast because Flutter uses the Skia Graphics Library. Thanks to this, the UI is redrawn each time when a view changes. Most of the work is done on the graphics processing unit. As a result, Flutter UI is smooth and capable of delivering 60fps (frames per second).

Designs your users will love

Flutter doesn’t solely rely on native system components as Flutter has its own set of custom widgets managed by the framework’s graphics engine. Flutter apps are user-friendly, a crucial advantage for Flutter over React Native. Also, Flutter was created to create your widgets easily or customize an existing widget.

Same app UI, even on older devices

Even new apps look the same on older iOS or Android systems, so you never have to worry about supporting older devices.

Perfect for MVPs

If you need to build an MVP (Minimum Viable Product) as a showcase for potential investors, Flutter is the better choice, especially if time is short.

Flutter – Advantages and Disadvantages

CONS of Flutter:

Size of the developer community

Most people will assume Flutter is not the better choice as React Native is more established and has a more experienced developer community. In addition, Dart, the programming language on which Flutter is based, is not as widely used as JavaScript. Accepting this fact, the Flutter community needs time to educate its audience and gain more experience.

Looking on the bright side, two years ago, Flutter had a smaller, less experienced community, and Dart is more niche than JavaScript. Current trends indicate that Flutter is outperforming its competitor in this area. Take a look at the statistics below:

  • Stack overflow tag trends show an intense increase in developer interest in Flutter.
  • On Udemy, there are 257+ Flutter courses (with about 1 410,000 course participants).
  • There are also 75 Dart courses (with about 608,000 participants (as of May 2021)).
  • React Native numbers are lower – about 866,000 students across 133 courses.
  • Flutter has 120,000+ stars on Github, while React Native has 95,300+.

New libraries & support

Although backed by Google, Flutter is quite new. This translates into the fact that it is not always possible to find the functionality you need in existing libraries, so you might need to build custom functionality on your own.

Continuous Integration support is needed.

Flutter lacks support for CI platforms like Travis or Jenkins. To achieve automatic building, testing, and deployment, your developers must use and maintain custom scripts.

Platform risk

If Google decided to cut off the project, it would spell doom for Flutter even though it is open-source.

App’s size

Applications written in Flutter are bigger than native ones. Check out the article Comparing APK sizes. However, the Flutter team is working on reducing the size of apps made with Flutter.

What is React Native?

Similarly, to decide whether React Native is the better choice,  we must understand what it is. React Native is an open-source mobile application framework that uses JavaScript.

What is React Native for?

React Native is an effective framework for:

  • Cross-platform development
  • Building mobile apps using JavaScript language
  • Developing applications for both Android and iOS using a single codebase
  • Using the same design as React

A brief history of React Native:

  • Summer 2013, Facebook hackathon – React Native started as an internal Facebook project
  • January 2015, React.js Conference – React Native 1 Preview release
  • March 2015, F8 Conference – Official Launch of React Native
  • Facebook declares React Native ‘open for use and available on GitHub’
  • Lean Core – reducing an app’s size by moving optional components/features to separate repositories (to add to an app as/when needed)
  • TurboModules – for improved handling of native modules
  • React Native Fabric – re-architected UI layer

What popular apps are made with React Native?

  • Instagram 
  • Facebook
  • Fb Ads Manager
  • Pinterest 
  • Skype
  • Tesla 
  • Bloomberg 
  • Wix.com 

What is React Native?

React Native – pros and cons

To decide whether Flutter is the better choice or whether React Native is, it is time to take a look at React Native’s advantages and shortcomings.

PROS of React Native:

Fast refresh

Similarly to that, Flutter Hot Reload speeds up the development process by allowing a developer to implement new codes directly into a running app. Hot Reload also keeps the application’s state, which helps avoid the risk of losing the code during a full reload.

One codebase, 2 mobile platforms

One React Native codebase can now run smoothly on both Android and iOS platforms. Bringing the game up another notch, JavaScript allows cross-platform applications by sharing code with web apps.

below are some example libraries that allow you to simultaneously create code on platforms other than iOS and Android (including web and desktop apps):

  • React Native for Web – supports Android, iOS, and web (Twitter used this to create Twitter Lite)
  • ReactXp – developed by the Skype Team to support Android, iOS, and Web; plus, works on Windows 10 (UWP)
  • React-native-windows – developed by the Microsoft team, supports all the devices supported by Windows 10 ( PCs, tablets, 2-in-1s, Xbox, Mixed reality devices, etc.)

An active – and vast – community

React Native was released more than 5 years ago, so Facebook has had plenty of time to stabilize the API, as well as focus on fixing issues and solving problems. They’re working on a few exciting improvements – like reducing app size.

React Native also has a massive developer community, and there are countless tutorials, libraries, and UI frameworks that make it easy to learn the technology.

When focused on gathering articles, tools, and materials about specific technologies, React Native is much better placed than Xamarin, Flutter, or Ionic.

Easy to learn for React developers

Because React Native belongs to the React family, anyone who has experience with React can easily get to work with React Native without having to learn new libraries. They can use the same libraries, tools, and patterns.

Up to 50% less testing

Roughly 50% fewer automated tests are taken out of necessity because the same tests can run on both platforms, reducing the demands on our QA team. I

CONS of React Native

Not Native

A common problem of any cross-platform application is that neither the UI experience nor performance would be the same as in native apps. The similarity is around 80-90%.

Fewer components out of the box

React Native supports only basic components out of the box (many of them are adaptive to a platform out of the box, like buttons, loading indicators, or sliders).

On the other hand, Flutter is designed to support Material Design out of the box, so the framework supports much more widgets. It saves time. A developer using Flutter can create most of the views with pre-made widgets which are easily customizable and cross-platform consistent.

Lots of abandoned packages

React Native boasts an enormous number of libraries. Unfortunately, too many of them are either low quality; or have been abandoned.

Fragile UI

React Native uses native components, allowing your app components to be instantly upgraded after every OS UI update. However, this can break the app’s UI. In other words, updates can destabilize if they cause certain changes in the Native Components API.

On the other hand, when it comes to Flutter, the app UI is a lot more stable.

Apps are bigger than native ones.

Applications written in React Native must be able to run JavaScript code. Since Android does not have this functionality, this means applications need to include a library that supports JavaScript code. As a result, apps that are bigger than their native Android counterparts.

When to choose React Native, and when to choose Flutter

This depends on the specifics of your project and the balance of your team’s skills.

  • When your team is familiar with Dart, Flutter will be the better choice.
  • If they are fluent in JavaScript, React Native is the better choice.
  • If building your app’s GUI needs native UI components, React Native reigns supreme.
  • Should brand-first design be your priority, Flutter will be the sovereign remedy.

If you have trouble deciding between Flutter and React Native, feel free to consult our team at HDWEBSOFT. We take pride in being one of the leading Software Development Companies in Vietnam and will guarantee the success of your project.