Xtra News Page

React Native vs. Flutter

Benjamin Sapaning

If you’ve been a reader of mine for a while (or even just recently) you can probably tell I have extensive knowledge of all things React. I love React and React Native. I really do, and have loved them for about 4 years.

However, I have been working a lot with Flutter at work for the last few months and I have to say:

I really, really like Flutter.

In this post, I’ll break down the different advantages that I’ve noticed in both frameworks and at the end offer which one I prefer. Let’s jump into it!

Flutter

I am more new to Flutter than to React Native and I have to say, while I was excited to learn something new, I had my doubts that I would like it as much.

I’m not afraid to admit I was wrong.

Here’s how I think Flutter has the edge against React Native.

My projects haven’t gotten too bloated (as React apps and React Native apps can sometimes get) and while there is the potential to overload your app with dependencies, I have not run into this issue with Flutter. This leads to my build and compile speeds (as well as the app speed itself) being efficient. Which brings me to my next point.

I’ve found that flutter runs particularly quickly. Running and building the apps themselves have taken less time than React or React Native. On my Mac, it definitely compiles and builds quicker than React native. A notable area of difference is in the frameworks’ respective create-app commands. We’re talking a few seconds to create a Flutter app boilerplate, as well as a few seconds to start up and run the app. React and React Native’s create commands have been notorious for taking their time.

In addition to creating and running the apps quickly, I’ve noticed that my Flutter apps appear a bit snappier on my devices and on emulators than my React Native apps, particularly when I update or refresh them. It’s not a crazy difference in speed but figured it’s worth mentioning.

I remember setting up my new laptop for work for React Native and it was kind of tedious, even with having Node.js etc. already installed. I found Flutter to be incredibly easy to setup and took very little time to get my environment and first app up and running.

Flutter leverages a programming language put out by Google called Dart. I’ve found Dart to be a pleasant programming language and since it is inherently typed you don’t need to incorporate Typescript or some other typification library.

I like Typescript, don’t get me wrong, but having your mobile framework be inherently typed saves not only on dependencies, but on acquisition of the framework itself. What I mean is, you don’t need to learn a new/adjacent programming language in addition to the framework/library you are already learning.

React Native

Despite Flutter making a pretty great case for itself, there are few areas of interest where I think React Native has an edge.

React has been around for about 9 years, React Native for about 6. Flutter has been in beta since 2015 but the official launch was in 2018. There is absolutely no shortage of Stack Overflow questions, GitHub issues, documentation etc. for React Native. I feel like since it’s be around for as long as it has and it’s so commonly used that it would be hard for anyone to claim a lack of resources to be a drawback for React Native.

I happen to think JavaScript is an incredibly robust language for frontend development and beyond. It’s been around since the mid 90’s and has shown no signs of being phased out. In fact, it’s continued to be the chosen backbone for many frameworks and libraries beyond React Native.

It’s a simple argument, but if you’re a React Developer (and given that you’ve made it this far in the post, it’s safe to say you might be) looking to get started with a mobile framework, it helps if that framework is, well, the same language and root library as your current one.

As much as I love Flutter, it was definitely easier learning React Native as a React dev that learning Flutter. Don’t let that dissuade you from learning Flutter! Trust me, it’ great. But if you’re on a time a crunch and need to pick up a mobile framework quick, I’d give the edge to React Native.

The Toss Ups

I’ve mentioned the Flutter advantages and the React Native edges, but there are two areas where I’d say it is a bit of a draw between the two mobile frameworks.

React is undoubtedly the more popular web framework than Flutter, so its compliment to React Native is nice. If you’ve got a SaaS that uses React for the web, having a mobile app that uses React Native makes sense. React also has a great set of developer tools on the web. I will say, however, that React Native apps themselves cannot be run or tested in the browser without first installing another package called react-native-web.

Flutter apps can right out of the box.

While React is the better web framework and React Native is an extension of React, the fact that you can work on a Flutter app and test it on both mobile devices, Xcode and Android Emulators as well as in the browser, all from the same app and command line, is pretty convenient.

I might have to give this edge to Flutter since we’re supposed to be comparing mobile frameworks, and React is a web framework.

You probably already know how much I love React hooks. They’re lightweight, clean and simple to implement. I can’t remember the last time I used setState in a React app, let alone a React Native app. In fact, the hooks concept is so widely liked, that Flutter came up with their own Flutter hooks. Flutter hooks work similarly to React hooks (different syntax of course).

While React Native got to hooks fist, Flutter hooks are an adaptation that help you manage state without relying on a stateful widget. One slight drawback to Flutter hooks is that it is a separate dependency. React hooks can simply be imported from the React Library itself and doesn’t need a separate install (so long as you’re using React v.16.8 or later).

I might have to give a slight edge to React Native on this one but it’s very, very close.

Summary

Flutter is younger so it explains why there isn’t quite as widespread coverage and resources but I have yet to encounter an issue with Flutter that I couldn’t find a resource for. Maybe it might just take a little longer than debugging a React Native issue but I haven’t noticed.

React is also a more popular web framework than Flutter Web, so it’s integration with React Native is nice. Flutter can use JS on the web but I personally haven’t used Flutter for web apps, the same way I haven’t used React Native for web apps.

All in all, I’ve really enjoyed using Flutter and while I’ll still work with React Native since it’s still in high demand (and I do genuinely still like it), I think in the near future (or in my case, the present), Flutter will start to become a much more prevalent and competitive mobile framework.

Have a different opinion? Light it up in the comments!

Credit: Matthew Croak & Benjamin Sapaning

Exit mobile version