Hybrid Platforms – When to choose what

“To Write A Single Code Base And To Deploy It Across Multiple Platforms – Sharing As Much Code And Thus Saves Time And Money.”

There was a time when mobile app development industry was restricted to develop app on chosen platforms i.e Android and iOS, but now the tables have drastically turned.

Modern popular mobile applications from time to time are needed in advanced tools for their implementation. That’s why professional developers strive to satisfy actual market demands in this sphere. The most interesting and useful innovations become the subject of discussion.

React Native cross platform was released as open source on GitHub in 2013, united the Android and iOS native APIs. Despite its unquestionable benefits, we are certainly sure you have heard about another interesting, unusual programming — Flutter, the advanced Google’s reply to standard technologies. This new user interface was launched in 2017 and intended to craft high-quality native apps on iOS and Android versions in record time.

So, coming back to the current scenario, Flutter and React Native have gone into an open war of adoption and traction by masses of business and people and the search query in the Google ends up with the result showing – “Flutter v/s React Native.

WHAT IS REACT NATIVE, FLUTTER, IONIC

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.

Besides writing Dart/ Flutter code, you’ll also use the SDK portion of the technology. That basically is a set of functionalities that help you during development (IDE extensions, development server, live-updating of your app on an emulator or real device) and with deployment (compile your app code to native code).

REACT NATIVE:

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 toolchain.You’re still able to use packages like Redux and knowing JavaScript and React of course allows you to quickly get started with React Native, too.

IONIC:

Starting with Ionic 4, Ionic is basically a huge suite of components you can use (buttons, cards etc) with any frontend framework (or none at all).Ionic also provides a lot of tooling that makes the development of mobile apps easier (e.g. a development server for running your app on an emulator/ real device with live-updating) and it also bundles the app into shippable packages. Additionally, the Ionic team is involved in the capacitor project which offers a lot of JavaScript packages you can add to any (!) web project to tap into native device features like the camera.

HOW SHOULD WE COMPARE THESE OPTIONS:

Write Once Use Everywhere:

Ionic: Awesome re-usability! The “wrapped web app” concept ensures that you can easily reuse 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.

Flutter: Also really great to reuse. The widgets it ships with don’t adapt to the underlying platform though, instead you use material design on both platforms by default. You can find out on which platform you’re running and manually swap widgets but that’s of course a bit more work than required by Ionic. If you need platform-specific re-styling, you can move the position of Flutter on the slider further to the right.

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).

Learn Once Write Everywhere:

Ionic: Awesome re-usability! The “wrapped web app” concept ensures that you can easily reuse 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.

Rich Pre Styled Component Library:

Flutter: Flutter also ships with a comprehensive suit of built-in widgets. These mostly use the Material Design, some Cupertino-style (iOS style) widgets exist, too. With all these widgets, you can quickly create nice-looking UIs without doing too much manual styling. Only if you need different looks for different platforms, some effort can be required since the widgets don’t adapt automatically.

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.

Ecosystem/ Third Parties Libraries :

Flutter: Flutter is still relatively new but extremely trending. You already find quite a lot of discussions on Stackoverflow and third-party library/ package support (on its own platform) gets better every day. For the moment it’s not on the same level as its more mature competitors but I’d expect this to change in the future.

React Native: It’s THE 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. Additionally, React Native on its own has quite a vibrant ecosystem and community, hence you find many threads on Stackoverflow and a lot of third-party packages that add missing functionalities.

Popularity & Coverage :

Having a vibrant ecosystem is a good thing – but how popular is an option? This is not necessarily the same, as you could have a rich ecosystem due to the alternative being mandatory in an industry without it being very popular amongst developers.

Flutter: Flutter is close to Ionic in terms of Github stars (30k) and is extremely trending right now. It’s heavily advertised by Google and they clearly want to make it a big thing. And it’s fairly well-received. Whilst it still has some itching points, working with it is fun and you can go very quickly from idea to prototype (to app).

React Native: React Native is the king. 65k stars on Github speak a clear language. It actually has its flaws and if you dive into discussions, you can see that not all developers are loving it. Not everything works flawlessly but overall, it uses an extremely popular library (React) and the most important web development language (JavaScript) and gives you real native apps.

Performance:

This metric probably speaks for itself – how do the different technologies compare from a run-time performance perspective?

Ionic: Ionic uses Cordova or its own solution, Capacitor, to give you access to native device features. It provides a very decent set of packages to access common native device functionalities like the camera. You can also write your own wrappers around native functionalities and then include them in your code of course.

Flutter: You’re mostly forced to look for third-party packages if you want to access native features like the camera. For the most common functionalities, such packages exist but due to the immaturity of the ecosystem, you’ll also end up with quite a lot of missing features. Relying on third-party package maintainers of course always bears the danger of them quitting maintenance. You can write and connect your own native code relatively easily though – but that of course requires you to know the native languages for the platforms.

React Native: Being the most popular solution, you find a rich set of third-party packages as well as some built-in APIs for accessing native platform functionalities. Relying on third-party packages (which you mostly have to do) of course has the disadvantage that the core maintainers of that package might quit, hence the support is not on the same level as it is with Ionic or NativeScript.

Real World Usage:

Flutter: Flutter is relatively new and has no super-big companies using it – except for one very important one: Google. Google develops Flutter and uses it for some of its apps – including its AdWords app. Google is also heavily investing into Flutter and there are other companies using it, too. It’ll be exciting to see if some other industry leaders will start to use it (and keep using it).

React Native: React Native is used by a couple of bigger companies, Facebook itself (which develops React Native) for example. But we also have to note that one big company which used it – AirBnB – lately moved away from it. It’s definitely worth reading that series of articles! But it’s also important to realize that a couple of big companies remain and React Native still is extremely popular.

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, 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.

But if performance is super-important to you – or you need to access a lot of (advanced) native device features – you might want to take a look at React Native, Flutter or NativeScript. Here, the details outlined above matter as these approaches are pretty similar otherwise.