Flutter vs React Native: A Developer’s Perspective

React Native by Facebook and Flutter by Google — two hot cross-platform app development technologies creating a buzz. In this post, we will compare both of them in detail from a developer’s perspective.

What’s Flutter and React Native

React Native is a project started by Facebook internally that they open-sourced in 2015. On the other side is Flutter, a project started by Google which they have been heavily promoting since I/O 2017.

We will compare each of them using ten criteria:

  • Programming language
  • Technical architecture
  • Installation
  • Setup and project configuration
  • UI components and development API
  • Developer productivity
  • Community support
  • Testing support
  • Build & release automation support
  • DevOps and CI/CD support

Now that we have defined all our criteria, let’s start exploring each of them in detail.

Programming Language

The key benefit of using a cross-platform mobile app development technology is the ability to use a single programming language to develop apps for both iOS and Android.

React Native — JavaScript

React Native uses JavaScript to build cross-platform apps. JavaScript is a very popular language in the web community at the moment. It is commonly used with React and other popular JavaScript frameworks. Thanks to React Native, web developers can build mobile apps with a little bit of training. With this in mind, companies adopted React Native as a no-brainer.

Flutter — Dart

Flutter uses Dart programming language which was introduced by Google in 2011 and is rarely used by developers. Dart syntax is easy to understand for JavaScript or Java developers as it supports most of the object-oriented concepts. It’s easy to get started with Dart as there is great and easy-to-follow documentation available on the official Dart site here.

Analysis & Result

As JavaScript is widely used by most web developers, it’s easy to adopt the React Native framework. Dart also has a great feature set but it’s rarely used and less known in the developer community. Considering this, it’s clear that React Native wins the point in the programming language category.

Technical Architecture

When choosing a cross-platform mobile app development framework, it’s essential to consider its technical architecture. By knowing the internals of the framework, we can make an informed decision and choose the one that is better for our project.

React Native — Flux

React Native architecture heavily relies on JS runtime environment architecture, also known as JavaScript bridge. The JavaScript code is compiled into native code at runtime. React Native uses the Flux architecture from Facebook. There is a detailed article on the core architecture of React Native here. In short, React Native uses the JavaScript bridge to communicate with the native modules.

Flutter — Skia

Flutter uses the Dart framework which has most of the components inbuilt so it’s bigger in size and often does not require the bridge to communicate with the native modules. Dart has so many frameworks, like Material Design and Cupertino, packed inside which provide all the required technologies needed to develop mobile apps. The Dart framework uses Skia C++ engine which has all the protocols, compositions and channels. In short, Flutter has everything needed for app development in the Flutter engine itself.

Analysis & Result

Flutter engine has most of the native components in the framework itself and it doesn’t always need a bridge to communicate with the native components. React Native, however, uses the JavaScript bridge to communicate with native modules, which results in poor performance.

Installation

The installation method should be straightforward without having too many complicated steps so that it could be easily learned by developers that are just starting with it.

React Native — NPM

The React Native framework can be installed using the Node Package Manager (NPM). For developers that have a JavaScript background, installation of React Native is easy, whereas other developers would need to learn the node package manager.

Flutter — Binary Download from Source

Flutter can be installed by downloading the binary for a specific platform from Github. In the case of macOS, we have to download the flutter.zip file and add it as a PATH variable. We can do this from the command line:

$ curl -O https://storage.googleapis.com/flutter_infra/releases/beta/macos/flutter_macos_v0.7.3-beta.zip
$ unzip flutter_macos_v0.7.3-beta.zip
export PATH=[PATH_TO_FLUTTER__DIRECTORY]/flutter/bin:$PATH

Analysis & Result

Both Flutter and React Native lack one-liner installation with native package managers for a specific OS, but Flutter installation seems to require extra steps for adding the binary to PATH and downloading it from the source code. React Native can be installed by just using package managers and without the hassle of downloading the binary from the source.

Setup and Project Configuration

The process of setting up the developer machine to use the new framework takes time. It requires lots of configuration of software installations. The technology should have proper documentation to get users up and running.

React Native

The getting started guide of the React Native project assumes that the developer already has all the required setup for developing for iOS and Android. There is little info on the Xcode command line tools but it won’t be enough to get going.

Flutter

The getting started guide for Flutter has detailed information on IDE setup and platform setup for both iOS and Android. You can read all the required setup details on Flutter install for macOS here. On top of this, Flutter has a CLI tool called flutter doctor which can guide developers through the setup.

Analysis & Result

From the comparison above, it’s clear that Flutter offers better documentation and CLI support for setup and configuration.

UI Component and Development API

When developing cross-platform mobile apps, support for the native component is key. Without the support of the native component, our app won’t feel like a native app. It’s very important that the framework has an API to access the native modules without any pain.

React Native — Less Components

The core React Native framework provides just UI rendering and device access APIs. In order to access most of the native modules, React Native has to rely on third-party libraries. React Native is too much dependent on third-party libraries.

Flutter — Rich in Components

Flutter framework is bundled with UI rendering components, device API access, navigation, testing, stateful management and loads of libraries. This rich set of components removes the need to use third-party libraries. If you get the Flutter framework, it means you will have everything needed for developing mobile apps. Flutter also has widgets for Material Design and Cupertino that allow developers to easily render the UI on both iOS and Android platform.

Analysis & Result

Flutter is rich in development APIs and UI components while React Native is too much dependent on third-party libraries.

Developer Productivity

Developer productivity is the key to building apps faster. In this regard, it’s very important to be able to focus on app development without any kind of wait or distraction.

React Native

If the developer is skilled in JavaScript, then it’s fairly easy to use those skills for cross-platform app development. React Native has a hot reload feature which saves a lot of developer time while testing the changes in the UI. In terms of IDE support, developers are free to use any text editor or IDE of their choice.

Flutter

Flutter also has a hot reload feature and it’s very easy to get started with the demo app. However, as the complexity of apps grows, developers would need to learn and adopt the new Flutter concepts. In addition, Dart is not a common programming language and there is a lack of support for it in many IDEs and text editors.

Analysis & Result

Being a mature framework, React Native has great developer support in terms of IDEs and language features. Flutter is fairly new at this point but will catch up very soon as the community around Flutter grows.

Community Support

As soon as developers start to show interest in technology and adopt it in their development process, they form a community to share knowledge. A strong community helps developers to learn from each other and solve the problems they are facing.

React Native

React Native launched in 2015 and has gained in popularity ever since. There is a community of React Native developers on GitHub and lots of meetups and conferences around the world.

Flutter

Flutter has been around for a while but it gained a lot of attention when Google promoted it in the Google I/O conference in 2017. The Flutter community is growing rapidly these days, meetups and conferences are taking place online.

Analysis & Result

The React Native community and resources have grown in size since the framework was launched. Flutter is still fairly new, although community support is growing rapidly.

Testing Support

Writing tests is a great way to get quick feedback on the code. There is always a testing framework associated with every mature technology to allow developers to create unit, integration and UI tests for the apps.

React Native

React Native is a JavaScript framework and there are a few unit level testing frameworks available in JavaScript. The tools like Jest can be used for snapshot testing. However, when it comes to integration or UI level testing, there is no official support from React Native. There are third-party tools like Appium and Detox that can be used for testing React Native apps but they are not officially supported.

Flutter

Flutter provides a rich set of testing features to test apps at unit, widget and integration level. Flutter has a cool widget testing feature where we can create widget tests to test the UI and run them at the speed of unit tests. Make sure you check out Codemagic, world’s first CI/CD created exclusively for Flutter for more info.

Analysis & Result

The React Native community has no official support for integration and UI level testing, while Flutter has great documentation and a rich set of testing features.

Our competition has come to an interesting stage and every point will now be important.

Build & Release Automation Support

Releasing mobile apps to the App Store or Play Store is a painful process. It involves the complex task of code signing all another application setup. When it comes to cross-platform mobile app development, it gets even trickier.

React Native

The React Native official documentation doesn’t have any automated steps to deploy the iOS apps to App Store. However, it provides a manual processfor deploying the app from Xcode. There is an article on how to deploy React Native apps to App Store here but the entire process looks manual. However, we can use third-party tools like fastlane to deploy iOS and Android apps written with React Native.

Flutter

Flutter has a strong command line interface. We can create a binary of the app by using the command line tools and following the instructions in Flutter documentation for building and releasing Android and iOS apps. On top of this, Flutter has officially documented the deployment process with fastlane here.

Analysis & Result

Flutter has a great build automation tooling and can be used to deploy apps from the command line. React Native apps lack support for the CLI tools that are officially supported for build automation.

Flutter has got 5 points, which means that React Native has to score the last point in order to tie the competition.

DevOps and CI/CD Support

Continuous Integration and Continuous Delivery practices are essential for any app in order to get continuous feedback and avoid releasing buggy code.

React Native

React Native doesn’t have any official documentation on setting up CI/CD. However, there are some articles which describe CI/CD for React Native apps. There is an article which explains the process of setting up CI/CD for React Native apps with Nevercode.

Flutter

Flutter has a section on Continuous Integration and Testing which includes links to external sources. However, Flutter’s rich command line interface allows us to set up CI/CD easily. Codemagic provides support for CI/CD for Flutter apps.

Analysis & Result

Flutter apps are easy and painless to set up on CI/CD services by using its strong CLI tools. React Native doesn’t provide any official instructions for CI/CD practices.

It was very close indeed but Flutter is the winner of this competition. React Native fought back till the end but Flutter is the champion in today’s race!

Conclusion

React Native and Flutter both have their pros and cons, but Flutter came out as the winner in this match. Some of the industry experts have predicted that Flutter is the future of mobile app development. Considering the comparison above, it’s clear that Flutter has entered the cross-platform mobile development race very strongly. Let’s not predict the future but wait and watch!

This article is written by Shashikant Jagtap for Codemagic.

Shashikant is DevOps practitioner for mobile apps and Director at XCTEQ Limited. Shashikant has automated release pipelines, implemented CI/CD and enabled DevOps Test Automation practices for many apps. He also blogs about mobile DevOps and CI/CD.