Flutter vs React Native: Which one to choose in 2020?

Flutter vs React Native: Two giant cross-platform frameworks

Cross-platform mobile development started to gain popularity with the launch of the React Native framework by one of the software industry giants, Facebook, in 2015, but this popularity blazed out more with the launch of 2nd assertive framework, Google’s Flutter, in 2018. Today, these two frameworks are leading this cross-platform development and are strong competitors of each other.

Although React Native appeared 3 years before the Flutter, from Google Trends Graph, it is obvious that Flutter could fill the gap and catch its main competitor in only less than 2 years after its first stable release. Furthermore, as of July 2020, Flutter has more GitHub stars than React Native with 95.8k stars over 88.6k [3],[4].

Flutter – Design Beautiful Apps

Flutter is a cross-platform framework initially was unveiled in 2017 by Google. Flutter uses Dart language. Since Flutter engine itself is built mostly using C++, it can provide a low-level rendering of UI components with Google’s Skia graphics library, which lets it accelerate compile and run-time procedures, as well as the performance.

//  Sample "Hello World" Flutter Code in Dart
// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

React Native – Learn Once, Write Anywhere

React Native is the most famous cross-platform mobile development framework first created as an internal hackathon project at Facebook in 2013, but introduced officially in 2015 by Facebook. It has components to build the projects which are an alternative to widgets in Flutter. Although, initially it has been used in Facebook’s mobile applications, such as Facebook Ads manager, Instagram; today, it is used by most notable companies, such as Microsoft, Bloomberg, Tesla, Uber, and so on. React Native is based on JavaScript which affects it to be popular and preferably by most developers.

//Sample "Hello World" React Native Code in JavaScript 

import React from 'react';
import { Text, View } from 'react-native';

const HelloWorldApp = () => {
  return (
    
      Hello, world!
    
  )
}
export default HelloWorldApp;

In the rest of this article, we will discuss the pros and cons of these two frameworks by comparing their fundamental features and will result when to choose which framework for the use of personal or organizational purposes. Below are the main criteria to evaluate:

• Architecture and Performance
• UI Components and APIs
• Productivity
• Community
• Documentation

Architecture and Performance

Flutter uses Google’s Dart framework, which uses the Skia graphics library and C/C++ engine. The framework contains most of the necessary modules, such as Material Design and Cupertino widgets in itself making it much bigger in size but faster in performance, since it does not require any communication and conversion path between the native platform and framework itself. Hence, this advantage keeps Flutter’s performance smooth and faster. Having a C/C++ engine also let the framework have high-performance rendering and faster code reusability characteristics, since the libraries are considered to be in low-level programming category and closer to machine code during the compilation procedures.

React Native’s architecture is based on JavaScript runtime environment – known as JS Bridge and uses the Flux architecture of Facebook. JS Bridge creates communication between JavaScript modules and native platform and compiles the code into the native code during the runtime. This process requires the use of more CPU resources and results in poor performance when compared to Flutter and native frameworks. Although, currently there are many optimizations works by React Native community, such as improving performances of module loading, cache processes, the core architecture itself puts the framework in a weaker side in terms of performance. Therefore, Flutter is an absolute winner in performance due to its architecture.

UI Components and APIs

Flutter has a great range of widgets – its own UI components to build almost same-looking apps for both Android and IOS platforms without using any third-party libraries. The core two UI widgets, Material Design and Cupertino widgets let developers have their apps to be customized differently for Android and IOS platforms by imitating them to look similar to the native design of the platforms. However, it also means that Flutter’s widgets are not platform-adaptive, which make the developers create platform-specific view and behaviors manually if they want their project to have a native environment of IOS and Android. However, having their own components makes flutter to be stable and reliable over the version update of OS since the components do not depend on the native ones and do not require any rendering process to avoid UI issues to occur on this procedure.

React Native uses components that are an alternative of Flutter’s widget, that use native characteristics of the platform and render differently for different platforms. In another word, the components just look like native components of IOS and Android accordingly. This feature also lets the app’s UI be upgraded instantly when the UI of the device’s Operating System is updated automatically. During this process, the app’s UI can be broken too due to automatic updates of the design of UI components by OS, although there is a less probability of this case to happen. On the other hand, React Native’s components can not look like the same in both platforms since they are platform-specific during the render process to the native ones. Therefore, developers should use third-party libraries to achieve this feature. Furthermore, React Native does not have as many components as Flutter which again makes developers have the help of third-party libraries to enrich their app’s UI.

Productivity

Both frameworks support Hot Reload feature completely. Hot reload allows a developer to make instant changes in the project and see them immediately in their device where they are running the project at that time. It reduces time spent on solving the small bugs or issues, such as design, UI, or logical errors, faced during the test of the UI of the project or specific functionality.

Since Dart is an uncommon and new programming language in the software development industry, learning a Dart may challenge developers and engineers to adapt to the use of Dart, so Flutter’s too. Moreover, since not all IDEs and Editors support Dart language, developer, developers may feel discomfort to learn and work on the new specific IDEs rather than the IDE they are good in its usage and adapted. Therefore, this can cost the company or individual developer to arrange more time for adaptation processes, which may lead to less productivity.

In contrast, React Native is based on JavaScript – one of the most preferred programming languages among the developers. Today, JavaScript still has high importance index in software development and is recognized as a default language for each browser. Therefore, due to the popularity of its core fundamental tool, React Native does not require any additional time for an adaption and also supported by all IDEs and text editors due to JS.

Community

Flutter has been less than 2 years in the industry since the release of Flutter 1.0 – the first stable version, so for now has less community in size than React Native. However, right after the release it has got quite much attention, and its community is expanding so rapidly in recent years, Google also gives a lot of effort to the growth of the effort by both optimizing it to have more stability and variety in functionality. There occur big events and conferences, meetups by Google, to make it become the future of cross-product development. As a result of the work done by Google and Flutter community, today, the use of Flutter is growing exponentially and more companies start to build their mobile apps using Flutter [7].

For example, As of July 2020, Flutter also achieved to obtain more stars in GitHub than React Native with 95.8k stars over 88.6k [4],[5]. These facts show that Flutter is moving forward confidently on the way of being the future of cross-product development.

React Native launched in 2015 and has obtained popularity ever since. Like Flutter’s, each year several conferences, meetups happen around the world to gain more community and to improve the popularity. Additionally, right after the release, famous giant companies have also shifted their mobile apps to be built in React Native rather than native platforms [8].

Today, Facebook has several teams, such as Hermes, to work on the optimization and re-architecture of the technology to keep it at the highest level of cross-platform frameworks.

Documentation

Flutter has quite helpful, detailed, comprehensive, and easy-to-follow documentation. The community is working on so much to update frequently with respect to upgrades of new and previous components and to improve the comprehensiveness and readability of explanations. There are also clear disciplined explanations of some development procedures, which facilitate the life of developers to earn in time and effort, such as during build and release-to-store procedures of a project.

React Native also has quite good and comprehensive documentation but still has a point for the improvements to be as detailed and helpful as Flutter’s. However, it has quite user-friendly design and guides from popular topics to small uncommon, platform-specific components too. Hence, React Native community is contributing much to the documentation and explanations of various topics, with several tutorials too, but it still has some gaps to fill, such as documentation for the third-party libraries for build and release automation.

Conclusion and Head to Head Comparison

References

• [1] App Annie – The State of Mobile in 2020
• [2] Google Trends
• [3] Flutter – Github
• [4] React Native – Github
• [5] Flutter
• [6] React Native – Native Components
• [7] Flutter Showcase
• [8] React Native Showcase