Activeer focusmodus
Deactiveer focusmodus

ReactNative or Flutter?

June 7, 2019

Tools like PhoneGap (Apache Cordova), Xamarin and React Native have been revolutionizing the mobile development industry for a few years now.

The main advantages of using such a framework are:

For tools like PhoneGap (Apache Cordova) and React Native there are additional advantages:

React Native was announced in February 2015 and open-sourced one month later. Four years have passed since and a lot has changed. React Native is being increasingly more used, and it does not look like it is going anywhere anytime soon.

Both Facebook and Microsoft are using it in production apps (Facebook, Instagram and Skype to name a few). Microsoft is even going as far as building support and tooling for building and running React Native apps on Windows.

But that is not all there is to cross-platform development. React Native is not the only solution on the market and — frankly — has never been. As cross-platform frameworks come and go, here comes the relatively new kid on the block: Flutter.

Flutter is a cross-platform development framework by Google written in Dart and initially released in May 2017. Google is heavily invested in its development as it may be an important part of their strategy in the years to come, and it shows.

In December that same year, Google announced the stable 1.0 release of Flutter (something Facebook still has not managed to do with React Native).

Flutter’s development is completely open-source while the React Native team sometimes develop new features behind closed doors.

Both React Native and Flutter have their up- and downsides, which I am going to discuss here. If you are looking for a reason to choose one over the other, you may find it here, but do know that it is still perfectly fine to build a production app in either of them.

Rendering

Where React Native renders the native components of your device’s operating system (e.g. a checkbox), Flutter does not (at least, not by default). Flutter works more like modern game engines — it renders the whole screen by itself on every platform.

Because of this, Flutter is more predictable than React Native in terms of rendering on different platforms. But it also comes at a cost, Flutter has to copy the look and feel of every user interface component for a platform for apps to feel native. Flutter’s developers have done a great job with creating native-looking widgets for both Android (Material) and iOS (Cupertino), but especially its Cupertino widgets do not always look exactly like their native counterparts.

Since Flutter is a Google product it should not be a surprise that it is actually easier to create a native-looking Material Design app for Android with Flutter than with React Native. Name a Material design widget you would want to use, and you will probably find it in the Material Widget catalog, with great theme and customizability options. The same cannot be said for React Native, where it is much easier to create a native-feeling iOS app.

Performance

While both React Native and Flutter strive to make it easy for developers to create butter-smooth apps running at 60 frames per second, it is not always a won battle for React Native.

Achieving high performance animations in React Native requires a deeper understanding of the React Native architecture, new users are more likely to run into performance issues and frame drops when trying to implement their own animations using the core Animated API.

Ecosystem

Because React Native is used with JavaScript it has a plethora of libraries you can use with it by default, and because it has been around for a while there are also a lot of React Native specific libraries to choose from. The React Native team has decided to focus more on the core of the framework and delegate the task of maintaining important functionalities to the open source community. This means that even for very basic apps you are dependent on a large amount of people’s free time for certain features.

As said before, Flutter apps are written in Dart — a programming language that is developed by Google. Dart looks a lot like JavaScript (even more like TypeScript) and is a strongly typed language, which means you can develop more robust apps and have to spend less time reading documentation. Because Dart is a relatively new programming language, there are not that many libraries for it yet, the same goes for Flutter (while this number is expected to grow while Flutter is becoming increasingly popular). As with React Native a lot of important functionality lives in separate libraries — but with one notable difference — a lot of these libraries are being maintained by Google employees.

Desktop

Google is building first-class support for desktop environments in Flutter, which means that you will be able to develop for Windows, macOS, Linux, Android and iOS from a single codebase. For React Native, it is actually Microsoft that is contributing to the development of Desktop support for both Windows and macOS. Both are potential competitors to Electron — a browser-based cross-platform development platform for macOS, Windows and Linux developed by GitHub, a subsidiary of Microsoft.

Development speed

An important selling point for Google’s Flutter is stateful hot-reload. What this means is that, whenever you make a change in your code, your app instantly updates without leaving the current screen or losing the current data. React Native also provides hot-reloading, the JavaScript ecosystem makes it difficult for them to implement it reliably. Although a recent tweet by Dan Abramov — part of the react development team — could mean that this is changing in the future.

JSX vs. Dart

Unlike React Native, Flutter does not have a separate (XML-based) template language. With Flutter everything you write is Dart — just regular class constructors and their properties.

Some people feel that JSX is more straightforward to work with because it is easier to distinguish hierarchy. This is a problem the Flutter and Dart teams at Google know about, which is why they are heavily investing in IDE plugins and Dart language features that make it easier to work with.

Overall development experience

Flutter provides first-class IDE support with plugins for Android Studio and Visual Studio Code. It also has a YouTube channel where video’s explaining core functionality and widgets are posted frequently. I personally wish React Native would publish an API reference like the one available at api.flutter.dev, but all it has currently is (a sometimes out of date) documentation site.

Compared to React Native, Flutter has a superior development experience.

Conclusion

After reading all of this, it is easy to realize how similar React Native and Flutter are. It’s impossible for me to recommend one over the other at this point. Some of Flutter’s major selling points may be coming to React Native and Google keeps working on improving Flutter. You or your team will have to decide what fits your needs best. Whether you want a very fast app with less potential for (platform specific) bugs or an app with a possibly truly native look and feel on all platforms while leveraging the JavaScript ecosystem.

Don’t forget to check out the showcase pages for both React Native and Flutter.