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.
| Flutter | React Native | |
| Language | Dart | Javascript |
| Compiles native code | Yes | No | Maintained by |
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
- Install the Flutter SDK (2min)
- Add the Flutter SDK PATH (20s)
- 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
- Install Node.js (3min)
- Install watchman (2min
- 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:
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.