Introduction

The idea of creating cross-platform came to light as a result of the gap between app developments on different frameworks. Android and iOS have been the major mobile app development platforms.

You will find that frameworks in JavaScript for mobile development. The duo, Flutter, and React-native are the frameworks that give apps performances close to native apps. I will explore the strengths and weaknesses of Flutter vs React-native.

Flutter

flutter

Flutter is a Google’s portable UI toolkit for building beautiful, natively-compiled apps from a single codebase.

flutter create basic_flutter_app
cd basic_flutter_app
flutter run

Some of the features of flutter include the following;

Rapid development:

With Flutter, you can bring your app up running within milliseconds with stateful hot reload and real-time bug fixing. Flutter is rich with customizable widgets to build native interfaces in minutes.

It has a VM which updates classes with new versions of fields and functions. The flutter automatically rebuilds the widget tree thus; you can quickly view the effects of the changes you make on a real-time basis.

Usually, it is quite easy to start programming with flutter, all you need is flutter package download, you need to unzip the download and set environment variables, with the path pointing to the unzipped folder and you are ready to rock.

In some instances, you may need to download Android Studio and set up the virtual emulator.

Environment:

React-native is far ahead of flutter in the ecosystem. React-native was two years already when flutter came along. Right now, there are plenty of packages for mobile development albeit flutter ecosystem is growing rapidly behind an active flutter community which continues to contribute tremendously to the development of flutter.

Performance:

In performance, I would say flutter is different from React-native, flutter is compiled with C/C++ library so that it is closer to machine language, hence a better performance compared to react-native.

As of now, many people believe flutter has an upper hand in performance, although it is difficult to judge them for now, because when we talk of performance, many aspects factor in perspective.

Documentation:

Flutter has perfect documentation. It is quite helpful to seasoned developers, greenhorn developers, and would-be developers. As a developer from any category mentioned above, you are bound to meet every resource you may need in the flutter’s documentation.

Architecture:

Flutter is a very young development framework, many developers are uncertain about which architecture to implement their apps. However, there are a few popular architectures available now.

For example, BloC architecture; a DartConf2018 which states that business logic should be taken out of the presentation layer and placed in business logic components. To better understand better, visit (RxMarbles.com).

Another popular architecture in flutter is Redux/Flux. You could also store the state inside of the components for small apps and when trying out the framework.

 

React-Native

Now let me put React-native into perspective. It is one of the world’s renowned cross-platform mobile development champion. It is one of a JavaScript framework built upon the React library.

React-native is a creation of FaceBook, which allows you to ship iOS and Android apps with a single code base. Its primary users are Facebook.

Instagram, and others. React Native started out as an internal hackathon project at Facebook in 2013 and it was released to the public in 2015.

Sample code in React-native

Import React, {Component} from ‘react’
Import {Text, View} from ‘react-native’

Class HelloReactNative extends Component {
Render () {
Return (
<View>
<Text>
If you like React.js, you will also like React-native as well!
</Text>
<Text>
Use native components like ‘View’ & ‘Text’ in place of ‘div’ and ‘span’
</Text>
</View>
)
        }
}

I will discuss React-native features beginning with:-

Development:

React-native uses components provided by the react-native library for mobile development. It also uses virtual DOM to communicate with native UI elements.

React-native uses quite a number of widgets, though not as much as flutters’ but inclusive enough. Some of the components in react-native are adaptive hence can figure out the platform they are running on and render accordingly.

It is easy to get started with React-native, just install the create-react-native-app package with npm install create-react-native-package and then use it to create new React-native applications.

It provides expo integration which allows you to run code on a mobile device without having to rewrite it by scanning the QR code on the console.

Ecosystem:

React-native has been around for a long time now. It expectedly supports most of the editors available to date. React-native also supports hot reload a feature I could not afford to forget mentioning.

In terms of packages, React-native takes the lead because it has 5 times the number of packages available in a flutter. It is more stable and a mature framework compared to flutter, but that is my opinion, someone else’s could be different.

Documentation: React-native has good and user-friendly documentation. Its official documentation includes guides and popular topics in the cross-platform development with react-native.

Performance:

React-native’s approach is quite different from that of flutter. It is not entirely compiled to C/C++ or native languages, but instead, the UI components are compiled to their native equivalents as JavaScript runs in a separate thread.

Sample code

import React, {Component} from 'react';
import {Image, ScrollView, Text} from 'react-native';

class ScrollingImageWithText extends Component {
  render() {
    return (
      <ScrollView>
        <Image
          source={{uri: 'https://facebook.github.io/react-native/img/header_logo.png'}}
          style={{width: 66, height: 58}}
        />
        <Text>
          On iOS, a React Native ScrollView uses a native UIScrollView.
          On Android, it uses a native ScrollView.

          On iOS, a React Native Image uses a native UIImageView.
          On Android, it uses a native ImageView.

          React Native wraps the fundamental native components, giving you
          the performance of a native app using the APIs of React.
        </Text>
      </ScrollView>
    );
  }
}

Communication with native modules is through a bridge. This makes it a high performer as compared to Ionic/Cordova, though flutter performs better than react-native.

Architecture:

There are two main patterns in building React-native apps; flux and redux. Flux was created by framework creators, Facebook, while Redux is the community’s popular option.

Both frameworks focus on unidirectional data flow and data storage in a central place; store. Components remain stateless as possible and the context API can be used to manage states.

Conclusion

It is quite tricky to have a definitive winner among react-native and flutter because there are other factors that should be considered as the devices your apps run on, however, react-native outperformed flutter, though generally, flutter has the upper hand. It is upon you to choose what best suits your scenario.  For further reading visit React-native and Flutter