React Native by Facebook and Flutter by Google are 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.
Due to the growing popularity of mobile apps, almost every company needs a mobile app or apps to remain competitive in the market. And what is more, companies are looking for an option to build mobile apps, especially for iOS and Android, with faster speed and less resources. Obviously, Apple and Google have provided native tools and technologies to build apps. iOS app developers can build apps using Xcode and Swift, while Android developers use Android Studio and Kotlin/Java. However, this requires engineers to learn two completely different sets of technologies. As a result, companies have started to adopt cross-platform solutions over the native solutions to build apps for both iOS and Android faster using a single language.
So, let’s get started, but first, let us know how many mobile app projects do you have in Git repositories?
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. Both of these technologies help app developers build cross-platform apps faster by using a single programming language. React Native is already a mature tool and has a huge community, but Flutter also started seeing huge adoption rates since 2017. In this post, 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. JavaScript is a dynamically typed language and anything can be done with JavaScript, which is good and bad at the same time.
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.
Winner: React Native
Score: React Native 1 — Flutter 0
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. The architecture of the Flutter engine is explained in detail in Github Wiki here. 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.
Winner: Flutter
Score: React Native 1 — Flutter 1
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. The node package manager can install the packages locally or globally. The developers will need to understand where exactly the binary is located. Whilst installing React Native on macOS, we need to have the HomeBrew package manager as well. In short, we need to run the following commands to install React Native on macOS:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install node
brew install watchman
npm install -g react-native-cli
After running these commands, we can access react-native from the command line.
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
Flutter should improve the installation method by supporting package managers like Homebrew, MacPorts, YUM, APT, etc so that users wouldn’t need to perform these extra steps during installation.
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, which might be useful for the non-JavaScript developers. React Native can be installed by just using package managers and without the hassle of downloading the binary from the source.
Winner: React Native Score: React Native 2 — Flutter 1
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. The documentation directly jumps to the step of creating a new project. A new React Native project can be created and run on iOS simulator using the following commands:
react-native init MyProject
cd MyProject
react-native run-ios
There is no setup guide for Android projects in the React Native document.
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. It inspects which tools are installed on the local machine and which tools need to be configured. Once the flutter doctor command is happy, we can carry on with creating a new Flutter app. There is a separate page on how to configure the editors to get going with Flutter. Once all the setup is done, we can create and run a new Flutter app from CLI:
flutter create MyProject
cd MyProject
flutter run
At this stage, you should have all the setup and configuration for the Flutter project.
Analysis & result
From the comparison above, it’s clear that Flutter offers better documentation and CLI support for setup and configuration.
Winner: Flutter Score: React Native 2 — Flutter 2
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. The full list of development components and the official APIs can be found here.
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.
Winner: Flutter Score: React Native 2 — Flutter 3
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.
Winner: React Native Score: React Native 3 — Flutter 3
Community support
As soon as developers start to show interest in a 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. One of the most recent conferences on React Native was React Native EU held in Poland, but there are meetups taking place in almost every major city in 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. The biggest so far was Flutter Live in 2018, where Google announced the release of Flutter 1.0. In short, the Flutter community is growing rapidly; yet, there are still not enough resources for developers to solve common issues.
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.
Winner: React Native Score: React Native 4 — Flutter 3
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 great documentation on testing Flutter apps here, you can also read the Codemagic blog on testing Flutter apps for detailed information on how Flutter apps can be tested. 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.
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.
Winner: Flutter Score: React Native 4 — Flutter 4
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 process for 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. The process of using fastlane to ship React Native apps is described in this article. This means that React Native has to rely on third-party libraries for build and release automation.
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.
Winner: Flutter Score: React Native 4 — Flutter 5
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, a continuous integration and delivery tool for Android, iOS, Ionic, Cordova and React Native apps.
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. At the Flutter Live event, Nevercode launched its new continuous integration and delivery (CI/CD) tool called Codemagic, which is the first CI/CD tool created exclusively for building Flutter applications. You can find more information about the CI/CD process of Codemagic here.
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.
Winner: Flutter Score: React Native 4 — Flutter 6
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!
Want to learn ReactJS? Check these tutorials for beginners.
This article is written by Shashikant Jagtap.
Shashikant is DevOps practitioner for mobile apps and Director at XCTEQ Limited. He has automated release pipelines, implemented CI/CD and enabled DevOps cum Test Automation practices for many apps.
He blogs about mobile DevOps and CI/CD. Check-out XCTEQ for more: https://www.xcteq.co.uk/
