Welcome to Our Website

Devblog

The developer guide

Flutter vs. React Native Difference 2022

Posted on by Raju Muliyashiya

Introduction to Flutter and React Native

What’s Flutter for?

Flutter enables cross-platform app development developed by Google.

It gives developers an easy way to build and deploy visually attractive, natively-compiled applications for mobile (iOS, Android), web, and desktop – all using a single codebase (source: official Flutter website).

Please note

Flutter’s desktop support

  • When it comes to developing desktop apps with Flutter, you can compile Flutter source code to a native Windows, macOS, or Linux desktop app.
  • Flutter’s desktop support also extends to plugins — developers can install existing plugins that support the macOS, Windows, or Linux platforms, or they can create their own.
  • Please note: Flutter’s desktop support is available as a beta release. So, it still has feature gaps. However, developers can try a beta snapshot of desktop support on the stable channel or can keep up with the latest changes to the desktop on the beta channel.

Flutter for Web

Flutter’s web support delivers the same experiences on the web as on mobile. It means you can now build applications for Android, iOS, and the browser from the same codebase.

As we can read on the official Flutter website, Flutter’s web support is most useful in the following scenarios:

  • Progressive Web Apps (PWA) built with Flutter
    Flutter delivers high-quality PWAs that are integrated with a user’s environment, including installation, offline support, and tailored UX.
  • Single Page Applications (SPA)
    SPAs load once and transmit data to and from internet services.
  • Existing mobile applications
    Web support for Flutter provides a browser-based delivery model for existing Flutter mobile apps.

A little more about Flutter…

  • It’s free and open source
  • It’s based on Dart – a fast, object-oriented programming language . It’s relatively new and is easy to learn – especially for experienced developers more familiar with Java and C#. What’s more, Dart supports sound null safety.
  • The architecture is based on the very popular reactive programming (it follows the same style as React)
  • It provides its own widgets, drawn from its own high-performance rendering engine – these are fast, attractive and customizable
  • Thanks to the widget experience, Flutter apps have a great look and feel (while you can still create your own custom app design  using readily-available UI elements that follow specific platform guidelines)

What is React Native?

React Native is an open-source mobile application framework that uses JavaScript developed by Facebook.

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

* Please note:

  • Apps created using React Native are not mobile web apps. React Native uses the same fundamental UI building blocks as regular iOS and Android apps: this means that instead of building in Java, Kotlin, or Swift – you’re putting the same building blocks together, using JavaScript and React (source).
  • React Native uses components that are analogous to widgets in Flutter.

To develop web and desktop applications with React Native, it’s best to use external libraries.

Flutter – pros and cons

In this section, we briefly discuss the key pros and cons of Flutter.

✅ PROS of Flutter:

1. Hot Reload = fast coding

From a developer standpoint, Flutter offers more dynamic – and faster – app development. It is one of the greatest things about Flutter, appreciated by every organization.

Developers can make changes to the codebase on-the-fly, and see them immediately reflected in the application. This is the so-called Hot reload feature, and it typically takes (milli-)seconds for changes to show.

The feature helps teams add features, fix bugs, and experiment with new ideas in an instant. Plus, Hot Reload is very handy when it comes to developer-designer collaboration.

That said – for a list of updates that require a full restart, see Hot Reload limitations.

2. One codebase, 2 mobile platforms (and more!)

With Flutter, developers can write just one codebase for two applications – covering both iOS and Android platforms.

Flutter is platform-agnostic as it has its own widgets and designs, which means you can have the exact same app on two platforms (while if you want to differentiate your apps that’s just as easily achieved).

3. Up to 50% less testing

Given you have the same application on both platforms, your Quality Assurance process will be much faster as you can test less.

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

That said, you’ll still have to run manual testing at a similar level as with native programming – as your QA specialists will have to check both apps on each platform, by hand.

4. Faster apps

Flutter apps perform smoothly and fast – without ever hanging or cutting while scrolling. Why?

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 GPU (graphics processing unit); that’s why Flutter UI is smooth and delivers 60fps (frames per second).

However, you must be careful during the development so as not to cause redrawing of those elements of the view whose data has not changed.

Redrawing the whole view instead of just those elements that change, can affect the performance and speed of the application, especially if you need to reload the view often, e.g. in a stopwatch application.

???? CONS of Flutter:

1. Size of the developer community(??)

Most people will tell you: a key advantage for React Native over Flutter is its more established, more experienced developer community. Further, in terms of programming languages, Dart isn’t as widely used as JavaScript, at least for now.

In truth, Flutter has a lot of catching up to do if it’s to match its ‘older brother’ – which is understandable. The community needs time to educate its audience and to gain more experience, which is typical for any new, young tool.

2. Libraries & support – impressive, but still not as rich as native development

Google’s support for Flutter is impressive, but Flutter is still quite new. This means you can’t always find the functionality you need in existing libraries, so your developers might need to build custom functionality themselves, which takes time.

3. Continuous Integration support

At the time of writing, Flutter lacks support for CI platforms like Travis or Jenkins. So, to achieve automatic building, testing, and deployment, your developers need to use and maintain custom scripts like this one.

That said, it is worth to note that:

  • There is a new CI/CD system for Flutter apps – Codemagic – that was announced at Flutter Live 2018
  • In January 2019, Bitrise announced the full-featured Flutter CI. At Droids On Roids we use Bitrise to build Flutter apps and it works so easily as in native app development.

4. App’s size

Applications written in Flutter are bigger than native ones. However, the Flutter team is working on reducing the size of apps made with Flutter.

React Native – pros and cons

✅ PROS of React Native:

1. Hot Reload = fast coding Fast refresh = fast coding

Essentially the same feature as Flutter.

Hot Reload speeds up the development process by allowing a developer to inject new code directly into a running app. So, a developer can see changes instantly, without rebuilding the app.

Hot Reload also retains the application’s state, avoiding the risk of losing it during a full reload (a critical benefit in the context of state-based frameworks) – speeding up the mobile app development process even further.

To improve the developer experience with hot reloading, the React Native team includes in 0.61 version a new feature called fast refresh that unifies live and hot reloading. It’s more resilient to typos and mistakes compared to the previous version. You can read more about fast refresh here.

2. One codebase, 2 mobile platforms (and more!)

Exactly the same as Flutter: write a single codebase to power 2 apps – covering both Android and iOS platforms.

Better still, JavaScript gives you a leg up when writing cross-platform applications by sharing code with web apps. This is accomplished by creating abstraction components that you can compile to target platforms.

See below for 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.)

3. It uses a wildly popular language – JavaScript

React Native uses JavaScript: a programming language that many developers know well (whereas Dart is still not so widely known or used). And if you’re a developer who prefers statically-typed programming languages, you can even use TypeScript – a JavaScript subset.

4. Developer freedom of choice

React Native lets developers build cross-platform apps; no more, no less.

The advantage is that React Native allows the developer to decide precisely what solutions they want to use; both according to the project’s requirements as much as the developer’s preferences.

Say, if a developer needs to decide how to handle the global state (how to store and manage the data that’s used in many components in the app), choose a router library, or choose between JavaScript and TypeScript – they can decide if they’d prefer to use a custom UI library, or write their own.

5. Easy to learn for React developers

This advantage in our list is highly targeted at React developers. If you have a background in web development and already use popular React solutions, you can easily get to work with React Native, without having to learn new libraries. You can use the same libraries, tools, and patterns.

???? CONS of React Native

1. It isn’t really Native

Like any cross-platform solution, neither the UI experience nor performance will be the same as in native apps – just close to them.

But still, it is easier to achieve a “native feeling” with React Native than with Flutter. If you want your Flutter app to have native components, it will require additional work.

2. Fewer components out of box

React Native supports only basic components out of box (many of them are adaptive to a platform out of box, like button, loading indicator, or slider).

As we said , there are outside repos with many additional components for React Native. A developer can use them in a project but that requires additional effort and time.

On the other hand, Flutter is designed to support Material Design out of 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.

3. Developer freedom of choice

…both a curse and a blessing.

Once a developer has created a new project, they then need to decide which navigation package – as well as which global state management – to use.

It can take a lot of time to understand the nuances of every solution, and ultimately, to decide upon the best ones to use for the project.

4. 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 altogether.

Dan Abramov advises checking the number of issues and frequency of commits in a repository to prevent using abandoned packages.

5. Fragile UI

The fact that React Native uses native components under the hood should give you confidence that, after every OS UI update, your app components will be instantly upgraded, as well.

That said – this can break the app’s UI but it happens very rarely.

What’s worse, updates can become even more dangerous if they cause certain changes in the Native Components API. The good news? This kind of event happens very rarely.

Whereas when it comes to Flutter (thanks to the way the framework recreates native components on their own), the app UI is a lot more stable.

6. Apps are bigger than native ones

Applications written in React Native must be able to run Javascript code (JavaScript Virtual Machine). Android doesn’t have this functionality by default – meaning applications need to include a library that supports JavaScript code, resulting in apps that are bigger than their native Android counterparts.

iOS apps made with React Native don’t this problem, but they are still usually bigger than native ones. The good news? As we mentioned before, React Native team is working on reducing their apps’ size.

Predicting the future: Flutter & React Native

More and more companies are attracted by Flutter. After all, we’re witnessing monthly improvements in the Flutter SDK as Google continues to refine its tool. Plus, the community is always helpful and enthusiastic. What’s more, Flutter enables us to create not only mobile applications but also apps for the web and desktop (Flutter’s desktop support is available as a beta release on the stable channel).

Putting it all together – and given leading companies like Alibaba are already using Flutter – the future looks promising for the toolkit.

As for React Native – well, Facebook is currently focusing on a large-scale re-architecture of the technology.