Get my new tutorials in your inbox every week

Flutter vs React Native Basic differences

I have been in touch with React Native for around 3-4 years now and I love it. It was the first popular platform that enabled JavaScript developers like me to write native mobile applications. Flutter, on the other hand, came out not too long back. Often readers ask me this question – Flutter vs React Native? How does Flutter compare to React Native for mobile development?

Flutter vs React Native basic differences

Let’s get straight to the point

There are a few basic differences between Flutter and React Native.

  • Flutter uses Dart. React/React Native well, it uses JavaScript and the React library.
  • Dart is a C-Styled language. JavaScript has its own style which is neither C nor Java. If you are a beginner to javascript, you might find it quite odd. Once you know and write JavaScript apps, you will love it. In fact, you can see my slides from one of the recent talks that I did in Dubai: I believe you didn’t know this about JavaScript
  • Flutter controls each pixel on the screen, which avoids performance problems caused by the need for a JavaScript bridge(which is used by React Native).
  • Dart is strictly typed (usually). This means you will have to declare the type of your variables. JavaScript is loosely typed. No need to declare variables.

Why React Native uses a JS Bridge?
Well, you know that you are writing your application logic in React JSX (your UI) and your business logic in JavaScript. Now once the code is compiled your JSX UI is magically converted to Native UI but what happens to your business logic. That still stays JavaScript. So whenever, you click or tap on a button in your native UI, that something that needs to happen will be handled in the JavaScript logic via the JS bridge.

Coming to code,

In JavaScript, you define data variables like this,

var name = 'Joseph';

In Dart, you usually define a variable type

String name = 'Joseph'; // Explicitly typed as a string.

In Dart, you write a function like this,

calculateSum() {
}

In JavaScript, you write a function like this,

function calculateSum() {
}

In Dart, you have to define a main() function as your entry point.

main() {
   //mandatory
}

In JavaScrit it can be any function. It can be a Self-invoking function also. (** Self-invoking functions are also known as Immediately Invoking functions. I am in the process of writing a detailed post on the same)

function myFunc() {
	//app entry
}
myFunc();

In Dart, you print to console like this,

print('Hello there!')

In JavaScript/React, like this:

console.log('Hello there!');

In Flutter you usually write less code and your files will be smaller as compared to React Native. Below is a simple Hello World application in both React Native and Flutter

React Native version of Hello World app:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
 
export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Hello world!</Text>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
});

Flutter version of Hello World app:

import 'package:flutter/material.dart';
 
void main() {
  runApp(
    Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

The following images show the Android and iOS UI for the basic Flutter “Hello world!” app. Image credit – Flutter official docs.

These are some of the basic differences that I was aware of. Of course, there are many other differences. If you like to edit this post and want to add more stuff, then give me a shout out.

Want similar tutorials to be delivered to your inbox directly? Subscribe to my email newsletter. I also send out free ebooks and tutorial pdfs regularly to my readers. I do not spam by the way and respect your privacy. Unsubscribe any time.

Conclusion – Flutter vs React Native

Either way, both lets you develop beautiful native mobile apps. React Native can be little laggy when doing more animation stuff, scrolling stuff or heavy apps with screen transitions as the heavy lifting is done in the JavaScript bridge and JavaScript is a single-threaded language. It can do only one thing at a time. But JavaScript also has an asynchronous event loop which makes it a unique language of being able to fake multi-threaded functionality (meaning it can do multiple things) while being single-threaded. Confused?? :), you might be. I was too when I started.

Dart, as the experts say, is more performant.

Can I use Flutter for Web Development?

No. Not at the time of me writing this post. Flutter is used to create mobile apps and not web pages.

There is a tech preview for using Flutter to create web pages, but it is in preview stages and hasn’t been fully fleshed out yet.

You may be interested in my other articles:

Write a Comment

Your email address will not be published. Required fields are marked *