React Native and Flutter

React Native vs Flutter

Posted in React Native, Flutter
React Native vs Flutter

Creating mobile applications has always been a fundamental pillar of the tech industry but having multiple platforms for which different apps need to be developed has been an issue for some time. Apart from having to maintain two teams, one for Android and one for iOS, there’s always a gap between the applications developed as they are made by totally different teams. That’s what gave birth to the idea of creating cross-platform mobile applications.

There are many types and solutions but the most popular one right now is by creating compiled apps that give the closest performance to that of the real native applications. The most powerful contenders in that field at this moment are Google’s Flutter and Facebook’s React Native. Let's have look strengths and weaknesses of both Flutter and React Native and do an objective React Native vs Flutter comparison.

What is Flutter

Flutter is a reactive cross-platform mobile development framework that uses the Dart language. Dart and Flutter have been created by Google who’s using the framework for some of its biggest applications and is constantly pushing the framework towards being the ultimate solution for creating cross-platform apps. Its initial alpha release was back in May 2017 so it’s much younger than React Native.

Reactive Programming with Flutter

So flutter is a reactive framework, what does that mean? Well, let’s talk a little about reactive programming and why it’s really powerful and useful especially in the case of app development. Let’s say you want to send a request to a server and do something depending on the response. If you take an action before a response is back i.e before you have an object you’d be taking an action that will result in the famous billion-dollar mistake, a null reference. If you come from the Android and Java world you’d know that one of the main motives behind Kotlin was eliminating the null reference.

Things go out of control if you’re data is coming asynchronously, and it’s not one request being sent, but instead, a stream of user clicks for example, and there are many parts of your program that need to respond to the incoming data.

This problem gave birth to a paradigm in programming known as reactive programming, which lays at the heart of the Dart language.

Development

The main building block of a Flutter application is a widget. Widgets are analogous to components in React Native. Flutter comes with a large number of ready-to-use widgets, most of which implement the material design concepts. There are two types of widgets, stateless widgets, and stateful widgets, just like class and functional components in React.

Unfortunately, Flutter’s widgets are not adaptive, so you have to make the platform-specific adaptation manually.

It’s fairly easy to get started with Flutter, all you need to do is to download the flutter package, unzip it, and then create an environment variable pointing to a folder inside of the that unzipped folder. And you’d be pretty much ready to go, however, you might need to download Android Studio and set up and emulator if you don’t want to use your phone.

Flutter supports the Hot Reload feature, which enables you to rerun your application with the adjustments you make while developing and speeds up development. Flutter is currently officially supported on Android Studio, IntelliJ Idea, and Visual Studio Code.

Ecosystem

Flutter is certainly behind React Native when it comes to the Ecosystem, as React Native is already been there for two years before Flutter was released, and is well established with tons of packages already. However, Flutter is catching up with a tremendous pace, and many-core packages for mobile development are available for public use and the Flutter Ecosystem is driving a crazy momentum with the dedication of the community. Right now, there are over 1450 packages available for Flutter on the official dartlang.org.

Performance

When it comes to performance, Flutter’s approach is quite different than that of React Native, or even NativeScript. Flutter’s application is compiled using arm C/C++ library so that it’s closer to machine language and gives better native performance. Not just the UI components are compiled, but the whole thing.

Dart is quite a performant language on its own, and many people believe that in terms of performance, Flutter has got the upper hand, although it’s hard to definitely judge as there are many factors involved in the performance.

Documentation

Flutter’s documentation is insanely good. The documentation is quite helpful and very thorough. It might be a little difficult to read if you have no programming experience, but once you get used to it you’d find pretty much everything you need, written in the documentation

Architecture

Flutter is very young, which makes everybody uncertain about the best architecture to implement for your application. However, there are a few architectures that are popular among the Flutter community.

You can use the BLoC architecture, which stands for Business Logic Component. The architecture was depicted by Google in the DartConf2018 and it states that the business logic should be taken out of the presentation layer and placed in the business logic components. The BLoC pattern heavily relies on streams and RxDart ( Reactive Dart), a good tool to better understand streams is RxMarbles.

There are other architectures present in the realm of flutter, for instance, if you’re more comfortable using Redux/Flux, you can use these patterns instead, and there are packages in Flutter that make this possible. For small applications and trying out the framework, storing state inside of the components would suffice.

Pros

  • Hot Reload, i.e., allows fast coding
  • One codebase: Development for two mobile platforms
  • Up to 50% less testing
  • Faster app development. 
  • User-friendly designs
  • Perfect for MVPs
  • Less Cod 

Cons

  • Size of the developer community
  • Libraries & support is impressive but not as productive as native development
  • Continuous Integration support
  • Platform risk
  • App’s size

What is React Native

React Native is perhaps the renowned world champion of cross-platform mobile development. React Native is a javascript framework built upon the React library, both created by Facebook, and it allows you to ship IOS and Android apps with a single code base. It’s used primarily by Facebook, Instagram, Airbnb, and many others. React Native started out as an internal hackathon project at Facebook back in 2013, and in 2015 it was released to the public.

Development

React Native uses component, but instead of using the web components that you have in the web like Div and H1, you use the set of components provided by the react-native library for mobile development. React Native also uses a virtual DOM, but not to manipulate a DOM since there isn’t one, but instead, it is used to communicate with native UI elements.

The number of widgets provided by React-Native is not as big as Flutter’s yet it’s quite inclusive, in addition, some of these components are adaptive, so they can figure out which platform they’re running on, whether IOS or Android and render the compositions suitable for that platform.

Getting started with React Native is also pretty easy, you can get started by installing the create-react-native-app package with npm install create-react-native-package and then using it to create a new React Native application. There’s a cool thing about development with React Native, which is that the create react native provides an Expo integration. Expo lets you run your code on your mobile device without having to wire it up, by just scanning a QR code that appears on the console.

Ecosystem

React Native has been there for a long time, so it’s supported by most if not all editors you’d want to use and it also supports hot reload. When it comes to packages, React Native is the clear winner, with over 5 times the number of packages available for a flutter, by nature of being there for more than three years. It’s a mature framework now and much more stable than flutter.

Documentation

React Native’s documentation is pretty good, and is more user-friendly, in that it explains what the props are, what they stand for and how to use them. The official documentation also includes guides and popular topics in cross-platform development with React Native like how to install and use native modules or create platform-specific components

Performance

React Native’s approach is different than Flutter’s. The entire application isn’t compiled to C/C++ or a native language, instead, the UI components are compiled to their native equivalents, and the JS runs in a separate thread and communicates with native modules for any action needed through a bridge. This allows React Native to be much faster and more performant than hybrid alternatives like Ionic/Cordova but puts it in a tough spot when compared to Flutter who’s one step closer to the native applications.

Of course, to have a definitive winner in the performance game is quite tricky, as there are many factors involved like the device the application is running on, and for some people, React Native outperformed Flutter, though in general cases flutter should have the upper hand.

The development team benchmarked the Facebook Events app made to React Native to learn more about React to Native’s performance. You’d notice that for all tasks performed, initializing Javascript and requiring the modules is the most draining task. There are many optimization areas for React Native to increase its performance like lazy requiring and lazy native modules loading and incremental cache read, so it’s not really that bad as you might think it is.

Architecture

There are two main patterns in building React/React to native applications, which are Flux and Redux. Flux is the one created by the framework creators, Facebook, while Redux is the community’s most popular option. These frameworks are about unidirectional data flow and storing your application’s state in one central place called Store, and make your app components as stateless as possible. You can also use the Context API which is a new feature of React for managing state.

Pros

  • Hot Reload, i.e., provides fast coding
  • One codebase: Development for two mobile platforms and more
  • Uses a wildly popular language – JavaScript
  • Developer freedom of choice as facilitates code reuse and cost-saving
  • Relative maturity
  • An active and vast community
  • Easy to learn for React developers
  • Up to 50% less testing
  • Robust Performance

Cons

  • It isn’t Native
  • Fewer components out of box
  • Developer freedom of choice
  • Lots of abandoned packages and libraries
  • Fragile UI
  • Apps are bigger than native ones.

 

Flutter vs React Native: Head to Head Comparison

Though the below-given table, you can get the difference between flutter vs react native.

Technology React Native Flutter
Programming Language Javascript Dart
Components Library Very large inclusive library Smaller, non-inclusive
Adaptive Components Some are adaptive automatically Components aren’t adaptive. Need to be configured manually.
Learning Curve Easy to pick up, especially if you used to React or Javascript before Quite steep, you need to pick up Dart, and reactive programming isn’t all intuitive
Created By Facebook Google
Main Architecture Flux and Redux BLoC
EcoSystem Quite Mature, used in production in many big companies around the world, many packages available Not yet mature, a fewer number of packages
Hot Reload Supported Supported
Github Stars 68,690 37,200
First Release Jan 2015 May 2017

Either you are in React Native camp or Flutter camp, Hackr.io has the programming community-recommended top tutorials for you:

Conclusion

React Native and Flutter both have their pros and cons, but the idea is to fill the gap between the two platforms(Android and iOS). I hope the article React Native vs. Flutter draws the appropriate comparison and helps you choose the best cross-platform framework for your project. Some of the industry experts have predicted that Flutter is the future of mobile app development. I would suggest that let us not predict the future, but wait and watch!
Do you use or prefer to use any of these two frameworks? Share your feedback in the comments below. 

People are also reading:

Youssef Nader

Youssef Nader

Youssef Nader, Computer Engineering Student at Cairo University. Technology technical writer and blogger, full-stack Web developer, specializes in rails and node. Founder of Yadawy, an E-commerce platform under construction. AI enthusiast, loves reading, traveling and martial arts. View all posts by the Author

Leave a comment

Your email will not be published
Cancel
Rocky
Rocky

Thank you, this is a helpful article! One thing I will suggest is that when it comes to programming languages, the advantage really depends on the current skill set of the user. Developers who are already comfortable with JavaScript will not need to learn a new language. But for most other developers, or people new to programming, Dart will likely be significantly easier to learn than JavaScript. Dart is extremely similar to other traditional object oriented languages like C# and Java, and it was designed to address the issues that can be confusing with JavaScript. This article pretty much echoes my own experience learning Dart:
Please Read this

https://www.articlesuperbundle.com/flutter-vs-react-native-which-is-the-best-for-you/

Lokesh Dokara
Lokesh Dokara

Flutter has 94.7k GitHub stars as of June 24th, 2020

Dai Software
Dai Software

The blog is absolutely fantastic! Lot of great information which can be helpful about benefits of developing website. Keep updating the blogs.

Rodolfo Davis
Rodolfo Davis

Both Flutter and React Native have their pros and cons. Have a look at the difference between both these high-end app development frameworks and I think choose the best one as per your needs. I just read one more blog before reading this blog that blog is also interesting. If anymore want more information then go through this URL :- https://www.softprodigy.com/cross-platform-app-development-how-react-native-is-faster-than-flutter/

Saurabh Kumawat
Saurabh Kumawat 10 Points

Obviously, they’re both solid performers. Either may render a perfect app, but trends suggest that techies see in Flutter vs React native - Right Framework for your Mobile App the future is Flutter. It’s simple. It’s powerful. It’s more efficient and looks sleeker.

Robson
Robson

Flutter stars on git are now 92,300 and react native is on 87,100. Flutter wins.

Stefan
Stefan

Agree, I choose Flutter for my company and stars on git is one of the reasons

Jibran
Jibran

Airbnb left React Native a while ago.

heyi
heyi

Airbnb stop giving package services for react native

RYan
RYan

Well it was while ago, you might need to test the rn 0.61+, If you're good at javascript you definitely better use react native but if you're not better to go with flutter since it's performance is better. The problem in react native is many developers not implemented it well so performance becomes really bad.

pasha
pasha

As of April 3rd, 2020, flutter has even more stars than react native: 89.5k vs 86k

Cinzia Nicoletti
Cinzia Nicoletti 10 Points

Flutter stars on git are now 77,620 not 37,200 and react native is on 81994 it really lacks little that exceeds it ...

Dev Manek
Dev Manek

React Native uses JavaScript to build cross-platform apps and Flutter uses Dart programming language which was introduced by Google. Both are the Cross-platform application development and both have their own advantages. your article is informative. Thank you for sharing this.

Lucas Nantes da Costa
Lucas Nantes da Costa

Good to hear this kind of comparison!

But is hard to agree on some points. As someone who had to pick Flutter up quickly or would have to pack up as quickly and go home, I can't agree about documentation, learning curve and a few others (have no idea what adaptive widgets means).

Although I can't argue about JavaScript being a "main" language, I found Dart very easy to pick up as it follows most OOP concepts. Can't say it's easier than JS, but we're not talking about such a long time of learning to.

Also, the difference in Flutter's performance was very downsided here compared to React Native. React Native is not a bad framework, but of course you can't compare in performance when Flutter has all its rendering native components already compiled and React Native makes a JavaScript to be translated by another library that can render that code. Might have sounded confusing.

Flutter's documentation is very good, way too good actually, not only being mostly updated and inclusive, but also Google's team is increasingly giving it support. I've just found a Flutter Channel in Discord where I can directly talk to them or other FlutterFriends about problems and questions. So documentation has surpassed React Native long ago and community is growing at an alarming speed.

Although I do recognize React's strong points and success in this area, in my opinion Google just came with an even better solution. If you're thinking about which to use I don't think you should unconditionally choose Flutter over React, but I'd certainly recommend using Flutter if you can.