Flutter vs React Native, writing an app with each one: Part 1

Flutter vs React Native

Flutter vs React Native, two widely used cross platform tools, but what should I use?. In this “experiment”, Im going to try to develop the same app, in both frameworks, the goal is to spot differences between them.

No framework is better than the other, they work in different ways, and they fit different developer requirements

Main differences

For me the main difference between them, is that React Native run using a Javascript bridge, while Flutter is compiled to native code. This is strictly reflected in the performance of each one.

FlutterReact Native
LanguageDartJavascript
Compiles native codeYesNo
Maintained byGoogleFacebook

What im going to build and test

I will write an app in both frameworks, will be a simple app using the Rick and Morty API.

I’m going to test:

Part 1

  • How fast is to install each framework create and run an app
  • Reloading time, both frameworks have hot reloading, a fast one is needed for a seamlessly development workflow
  • Development experience, which one offers a better development experience

Part 2

  • Writing the app in React Native
  • Writing the app in Flutter

Part 3

  • Testability, how easy is to test each app
  • Stress test and benchmarking

Installing Flutter and React Native

Before I start, i have already installed in my computer Android Studio and Xcode, since they are not related directly to any framework, I won’t include their installation process.

Flutter process

  1. Install the Flutter SDK (2min)
  2. Add the Flutter SDK PATH (20s)
  3. Create the app with flutter create (1min)

The whole process to install Flutter took me 3 minutes, not including the downloading time, also Flutter provides a tool called flutter doctor, which for first installs is really useful it scans our system to check if we have all the needed tools for flutter development (Xcode, Android Studio, Dart plugins, VScode extensions…)

React Native process

You can use Expo, but I will use React Native CLI

  1. Install Node.js (3min)
  2. Install watchman (2min
  3. Create our app with typescript support (2min)

Total time, 7 mins, and i needed to fix my nvm versions, also first build took about 3 minutes to start.

The Flutter installation process was smoother and faster than the React Native one, probably because RN needs to deal with Node.js under the hood…

Development experience

Hot reloading

Hot reloading is a must feature for me in web and app development, both, React Native and Flutter have the same feature.

I tested both with the default app which each framework creates

Flutter took 47ms to hot reload the app

React Native took 630ms, because it needs to compile javascript and inject it again with Metro.

Also a note on this, Flutter hot reloading only worked for me if I run my app from VScode, if i run the flutter app from an external terminal, the automatic hot reloading doesn’t work, I need to type r to hot reload the app, while in React Native you only need to save the file. I guess this is the only tradeoff.

Extensions

I installed Flutter extension for VScode, which is very recommended from the dev team. It adds an extension icon in your sidebar, and you can view your project structure from that tab.

For React Native I added React Native Tools, you can run React Native commands directly from your VScode command palette, but if you run your app from a terminal i don’t find it very useful

Debugging

Both frameworks come with their own debugging tools, however, for me Flutter ones are more useful.

One thing I don’t like about React Native debugger is that you can’t see directly your network requests, you need to do some tweaks in order to do that, you can see more info about that here

Here you can see each one debugger GUI

React Native:

Flutter vs React Native: React Native debugger
React Native Debugger in Chrome devtools

Flutter:

Flutter vs React Native: Dart DevTools
Dart DevTools, running in Chrome

Conclusion on Part 1

In terms of development experience, Flutter is the winner for me, the whole process from 0 to app running in my emulator didn’t took more than 10 minutes.

With React Native, compilation took a lot of time (I’m running each one in a 16″ 2019 Macbook Pro), also i had some Node.js issues.