Flutter vs React Native: A Developer’s Perspective

Codemagic
Codemagic
Jan 24, 2019 · 10 min read
Image for post
Image for post

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

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.

Image for post
Image for post

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

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.

Image for post
Image for post

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.

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 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:

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.

Image for post
Image for post

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.

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.

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.

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

Image for post
Image for post

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.

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

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

Image for post
Image for post

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.

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

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.

Image for post
Image for post

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

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.

Image for post
Image for post

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

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.

Image for post
Image for post

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.

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

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.

Image for post
Image for post

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

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.

Image for post
Image for post

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.

Flawless iOS

🍏 Community around iOS development, mobile design, and…

Codemagic

Written by

Codemagic

World’s first CI/CD for Flutter. The fastest route to your end users. Build, test and deliver your mobile apps in record time- codemagic.io

Flawless iOS

🍏 Community around iOS development, mobile design, and marketing

Codemagic

Written by

Codemagic

World’s first CI/CD for Flutter. The fastest route to your end users. Build, test and deliver your mobile apps in record time- codemagic.io

Flawless iOS

🍏 Community around iOS development, mobile design, and marketing

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store