What are Flutter, React Native, and Ionic?

On 07-02-2021

This article will compare Flutter, React Native, and Ionic.

All three technologies allow you to build real mobile apps for both iOS and Android - without the need to learn Swift, Objective C, Java or Kotlin!

Instead, you’ll use JavaScript (for React Native, and Ionic) and Dart (for Flutter). Hence you’re able to create native apps for both platforms with one language instead of two - this obviously reduces the learning effort you have to take to build your mobile app by a lot!

React Native

React Native is a technology/ framework developed by Facebook.

It uses JavaScript and the React library to allow you to build beautiful user interfaces composed of React components.

Important: Unlike in “normal” React apps built for the browser, you’ll NOT use HTML tags. Instead, you’ll use a set of pre-built components which will be compiled to native code by the React Native tool chain.

Ionic

With Ionic, you still create a real native app but you do this by creating a web app (with HTML, JS and CSS) which will be wrapped by a real native app that hosts a webview (basically a hidden browser).

Since you build a web page in the end, Ionic is pretty easy to get started with for web developers.

Flutter

The idea behind Flutter is that you write Dart code which can be compiled to native code that runs on the target device. You use Dart + the Flutter framework to build user interfaces composed of so-called widgets. Flutter ships with a bunch of pre-configured widgets (buttons, tabs etc.) and you typically use these to then also build your own, more complex widgets.

How should we compare these options?

After these brief introductions - how should these options be compared?

Let’s also add the native platform languages (Java/ Kotlin for Android, Swift/ Objective C for iOS) to the mix and have a look at five totally subjective metrics.

1. “Write once, use everywhere”

Ionic: Awesome re-usability! The “wrapped web app” concept ensures that you can easily re-use your code - you’re just building a wrapped web app in the end. The great component library of adaptive components (i.e. automatically styled for the platform the app runs on) also helps.

React Native: Also compiles to native defaults but only provides a basic set of components to start with. You have to style most of them on your own, hence more work is required to achieve appropriate styles on both platforms. Generally, code can be re-used though (since you still only use one language and libraries like Redux need no adjustment)..

Flutter: Also really great to re-use. The widgets it ships with often don’t adapt to the underlying platform, instead you use Material Design on both platforms by default. The Flutter team is providing more and more iOS-styled components though

2. Rich pre-styled Component Library

Ionic: Ionic in its core is a big set of pre-built (and pre-styled) components. The compiler/ toolchain which yields a native app is also part of the Ionic package (handled via its CLI) but it utilizes other packages like Cordova or Capacitor.

React Native: A decent set of built-in components is provided but a lot of them need to be styled by you. And they’re non-adaptive, instead - just as with Flutter - you get alternatives for both operating systems. That requires adjustments in your code, where you have to choose, use and style widgets conditionally.

Flutter: Flutter also ships with a comprehensive suite of built-in widgets. These mostly use the Material Design, some Cupertino-style (iOS style) widgets exist, too. More and more iOS-styled components are getting added.

3. Ecosystem / Third-Party Libraries

Ionic: Ionic uses JavaScript for its logic - and whilst you can use it with any (or no) JavaScript framework, it provides especially great support for Angular. Therefore, you benefit from these ecosystems. And the JavaScript as well as the Angular ecosystem is huge! Thousands of threads on Stackoverflow and packages on npm help you solve your problems.

React Native: It’s most popular solution for building native mobile apps with JavaScript. At least when we look at the alternatives that really compile your app to native code. It uses JavaScript and React, hence you got those ecosystems available.

Flutter:It’s most popular solution for building native mobile apps with JavaScript. At least when we look at the alternatives that really compile your app to native code. It uses JavaScript and React, hence you got those ecosystems available.

4. Performance

Ionic: Ionic offers the worst performance as it’s a wrapped web app in the end. But this is often misunderstood! “Worse” sounds extremely bad but “worse” doesn’t actually mean “bad” or even “horrible”. Instead, you got worse performance than with the other approaches but on the devices we got these days, your app will probably run more than smooth! If you only (imaginary!) got 100fps instead of 105fps - would you notice a difference? You wouldn’t, so keep Ionic in your mind for your next app!

Flutter, NativeScript and React Native: These three all offer you real native apps (compiled from your code) and therefore, they provide a better performance than Ionic does. Doing exact measurements on who of the three is best is pretty hard or even impossible as it depends too much on the app you’re building, the device you’re using, the operating system and the version of Flutter/ NativeScript/ React Native used. They all provide really good performance that is what you need to know!

So, what should you choose?

With all these metrics discussed - which one should you choose?

There is no bad choice here, these are all great alternatives!

First of all, you have to decide whether you want to stick to the native languages (Swift, Objective C, and Java) and accept the disadvantage of learning two things and writing two apps. This is a lot of work and mastering two languages and platforms is way harder than mastering one. But you saw a couple of “pro” arguments, too.

If you don’t want to use the native languages, you have to decide whether you want a wrapped-app solution as Ionic offers it. Whilst having the performance disadvantage (which might not matter that much as discussed above), you will get a super-fast development experience. You can use your web development know-how and build two apps with one tech stack in little time.