Flutter or React Native? Which way should i go?
Hello my name is Luiz I have 20 years old, currently working at Horizon Four and today Im going tell you the main differences between the react-native (from Facebook) and the flutter (from Google) and its pros and cons. So without any further ado… Lets Go!
Language:
Both use very different languages, React Native uses ES6 / JSX (JavaScript) while flutter uses Dart a language developed by Google, but what are the main differences between the two?
React Native uses JavaScript one of the world’s most famous languages for web front-end development, and it also uses the same react development patterns, so anyone who has already used react on the web will not have much trouble developing using the framework. In React Native we have React Components (Component, PureComponent) to build screens, fragments of components, and High Order Components (Components that wraps another Children Component and pass props to the children component) ; and each component has its lifecycle, state and render function, and we also have something that we call as Stateless Component that has only the render method, And is a function that returns a React Component and does not have state and lifecycle
Flutter uses Dart a new language and that still has much to evolve, but is a language quite similar to Java but has its particularities. In Flutter we have Widgets (StatelessWidgets, StatefulWidgets and State) And in most of the cases we use StatefulWidgets + State to build screens. and for Fragments we can use StatelessWidgets .
Examples:
Flutter uses functions/classes to build the render of the component so its a little bit weird and makes flutter a little bit more cascading because each children will be a new function or a new instance of a class.
One thing i think is little a bit confusing with flutter is if want to create a very large component with many methods like for example a repeating list I have to write two classes a StatefulWidget and a State class; and I confess that it annoyed me a bit because code was extremely verbose and difficult to understand.
Flutter Example:
class Home extends StatefulWidget {
Home({Key key}) : super(key: key);
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<Home> {
int _startTime = new DateTime.now().millisecondsSinceEpoch;
int _numMilliseconds = 0;
int _numSeconds = 0;
int _numMinutes = 0;
@override
void initState() {
super.initState();
Timer.periodic(new Duration(milliseconds: 10), (Timer timer) {
int timeDifference = new DateTime.now().millisecondsSinceEpoch - _startTime;
double seconds = timeDifference / 1000;
double minutes = seconds / 60;
double leftoverSeconds = seconds % 60;
double leftoverMillis = timeDifference % 1000 / 10;
setState(() {
_numMilliseconds = leftoverMillis.floor();
_numSeconds = leftoverSeconds.floor();
_numMinutes = minutes.floor();
});
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new Text(
sprintf("%02d:%02d:%2d", [_numMinutes, _numSeconds, _numMilliseconds]),
),
)
);
}
}
React Native uses a new concept called JSX to build the render if you already used ReactJS on the web you will be familiar with this. But if you are starting directly with react native will be a little bit confuse on the start but after a pretty good hello world example you will understand what is going on, and its pretty similar to HTML and XML.
Example:
import React, { Component } from "react";
import { Text, View } from "react-native";
class WhyReactNativeIsSoGreat extends Component {
state = {
stateExample: true,
};
componentDidMount() {
alert("Lifecycle!!!"); // Set State Example
this.setState({
stateExample: true,
});
}
render() {
return (
<View>
<Text>If you like React on the web, you'll like React Native.</Text>
<Text>
You just use native components like 'View' and 'Text', instead of web
components like 'div' and 'span'.
</Text>
</View>
);
}
}
export default WhyReactNativeIsSoGreat;
Is worth to stop using JavaScript and switching to Dart?
Honestly I think for the time being no, because Dart is still a very new language and it will still change a lot until it gets better, and i think that the acceptance of a javascript framework is bigger than a framework with a new language. But I will say that I found Dart better than JavaScript in some points such as typing the code. The Dart kind of forces you to type variables, functions and classes; while in JavaScript it’s a point that still needs to be improved. But where is flow and TS in this article? The big difference between typing Dart and typing JavaScript, it that does not need a compiler like typescript or flow to do code typing. Dart at the compile time does compile the language it solves the typing that is different from JavaScript that needs a compiler (Babel or TS) to be able to do code typing. But I still remain firm about my choice to use JavaScript because it is more familiar and still reach most of the developers because anyone who has done anything with JSX on the Web will not suffer as much to develop apps with React Native. But with Flutter the developer would have to learn a new language simply to develop a mobile application and this is really frustrating.
But what about performance?
The performance we do not have much as to talk about which one of the two is better we can make comparisons but the results will not be the same for much of the cases sometimes flutter will win and some other times react native will win, but we can make simple comparison that can be done only with simple tools of the Framework (Without Native Bridges, Animations and Extremely “Styled” Components). For this example we will use a timer application (Time Counter / Timer) with a text aligned to the center of the page, so let’s go:
React native App.js:
// @flow
import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
milliseconds: 0,
seconds: 0,
minutes: 0,
};
let startTime = global.nativePerformanceNow();
setInterval(() => {
let timeDifference = global.nativePerformanceNow() - startTime;
let seconds = timeDifference / 1000;
let minutes = seconds / 60;
let leftoverSeconds = seconds % 60;
let leftoverMillis = (timeDifference % 1000) / 10;
this.setState({
milliseconds: leftoverMillis,
seconds: leftoverSeconds,
minutes: minutes,
});
}, 10);
}
render() {
let { milliseconds, seconds, minutes } = this.state;
let time = sprintf("%02d:%02d:%2d", minutes, seconds, milliseconds);
return (
<View style={styles.container}>
<Text>{time}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF",
},
});
Flutter main.dart:
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:sprintf/sprintf.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: new Home()
);
}
}
class Home extends StatefulWidget {
Home({Key key}) : super(key: key);
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<Home> {
int _startTime = new DateTime.now().millisecondsSinceEpoch;
int _numMilliseconds = 0;
int _numSeconds = 0;
int _numMinutes = 0;
@override
void initState() {
super.initState();
Timer.periodic(new Duration(milliseconds: 10), (Timer timer) {
int timeDifference = new DateTime.now().millisecondsSinceEpoch - _startTime;
double seconds = timeDifference / 1000;
double minutes = seconds / 60;
double leftoverSeconds = seconds % 60;
double leftoverMillis = timeDifference % 1000 / 10;
setState(() {
_numMilliseconds = leftoverMillis.floor();
_numSeconds = leftoverSeconds.floor();
_numMinutes = minutes.floor();
});
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new Text(
sprintf("%02d:%02d:%2d", [_numMinutes, _numSeconds, _numMilliseconds]),
),
)
);
}
}
how can we measure the performance between the two apps?
To measure the performance i used the Android Profiler inside the Android Studio
Below we can see examples of the two frameworks running the examples on Nexus 5X:
React Native:
- CPU Usage: 15%
- Memory usage: 27.76 MB
Flutter:
- CPU Usage: 12%
- Memory usage: 31.05 MB
OBS: These tests were done with low complexity projects. Tests only to show usages of CPU and Memory in simple examples. For more complex cases like Animations, Native Bridges and Complex components. This test can not be taken into account; we use only simple things like component / widget state and framework components / widgets and little “styled”!
Development Kit:
This was something I particularly liked both because the two offer a good development kit, but flutter stands out at this point because it contains more bridges and more complete plugins for IDE’s like the Visual Studio Code.
Conclusion:
Make it clear that I am not here to speak ill of any framework I am here simply to help you 😄.
In my humble opinion if you want a simple framework to use and a low learning curve I recommend React Native for being simpler to use and for using JavaScript! So if you come from the web you will not suffer so much to start with React Native. But I still find Flutter a viable option to start developing.
