React Native vs Flutter vs Ionic vs Xamarin vs NativeScript

In the world of mobile application development, we have the choice of building fully native apps or building cross-platform apps. There are advantages to both approaches.

In this post, we are going to compare 5 of the most popular cross-platform options among mobile development teams today. Whatever development project you have, each of these platforms provides several advantages. We aim to highlight the relative strengths and challenges presented by these platforms for your consideration before or during any project.

We will be looking at 5 Hybrid App development platforms: React Native, Flutter, Ionic, Xamarin, and NativeScript.

And we will be comparing them across the following parameters:

• Popularity
• Code Reuse
• Pre-Styled Component Library
• Application Performance
• Accessing Native Device Features
• Community Support

Difference between Native and Cross-Platform

But first, let’s look at the difference between native and cross-platform mobile app development.

Native apps use the technology/language of the platform, that is, Objective C or Swift for iOS, and Java or Kotlin for Android. Since native apps fully leverage the underlying platform they provide the best performance and user experience.

However, when developing apps for multiple platforms in their native codebase, you have to develop the iOS and Android app separately. This means you need two different codebases and often two different development teams.

Cross-platform apps are written in a different language (than the OS language) and render a native app experience at run time.

The advantage of cross-platform apps is they can be developed with a single codebase, thus saving a great deal of time, effort, and cost. You can leverage some of the most popular coding languages without having to learn Swift, Objective C, Java or Kotlin. These apps lack somewhat in performance compared to native apps, but the difference in performance is greatly outweighed by the ease of development.

We are going to look at a few of the most popular platforms in hybrid app development. We are considering two cross-platform framework approaches, Compile to Native and Webview Wrapper.

Fully Native	Cross-Platform
iOS (Objective C, Swift)	Hybrid Apps		Web Apps
Android(Java or Kotlin)	Compile to Native	Webview Wrapper	PWAs
	React Native Flutter Xamarin NativeScript	Ionic	PolymerJS Angular React

What is Compile to Native?

The app is developed with a single codebase. The framework then compiles the codebase to native iOS or Android.

UI components in your development language are translated into the actual native widget for the target platform. So, for example, a button widget in your codebase when compiled to a native iOS App is actually rendered using the native button component of iOS.

Only the UI components of the code are converted to the equivalent native UI components in the target platform.

These platforms also provide access to all of the underlying device features by abstracting a layer over the device hardware.

Compile to Native Platform	Programming Language	Maintained by
React Native	JavaScript	Facebook (open source)
NativeScript	TypeScript	Progress (open source)
Xamarin	C# (Dot Net)	Microsoft (open source)
Flutter	Dart (similar to JavaScript, custom language by Google)	Google (open source)

What is Webview Wrapper?

In this approach, the app code is wrapped in a web view and displayed without the browser bar as a review “native” app. So unlike Compile to Native, no code conversion takes place.

Rather, the app detects what OS the device is running, and when the app is rendered in the browser the UI code mimics the UI look and feel of the underlying OS using CSS, Sass, etc.

Also, “webview” frameworks have access to far fewer device hardware features. But Ionic uses Cordova bridge and Capacitor packages to tap into native device features.

There is more than one webview wrapper platform, but we will only cover Ionic in this post.

Webview Wrapper platform	Programming Language	Maintained by
Ionic	JavaScript/HTML/CSS	Ionic (open source)
Apache Cordova	JavaScript/HTML/CSS	Apache (open source)
PhoneGap	JavaScript/HTML/CSS	Adobe (PhoneGap is Adobe’s commercial version of Cordova)

Mobile App Dev Platform Comparison

Now let us make a more detailed comparison of our chosen mobile app frameworks. We want to mention ahead of time that we do not wish to compare them to find out which is the “best” option – that is entirely subjective and will depend on your own project requirements and which platform best suits your mobile development team.

Popularity

Firstly, let’s take a look at the relative popularity of these mobile app development platforms.

Below is a snapshot from GitHub taken on August 2020.

	React Native	Ionic	Flutter	NativeScript	Xamarin (XamarinComponents)
Stars	89.5k	41.5k	98.7k	18.9k	1.9k
Forks	19.8k	13.3k	13.6k	1.4k	640
Watchers	3.7k	1.8k	3k	697	311
Contributors	2207	387	670	185	66
Used by	460k	Not mentioned	Not mentioned	13k	300

React Native is highly popular, as evidenced by its 89.5k stars. Of course, that doesn’t mean it is loved by everyone – it does have flaws, and many of the discussions on GitHub dive into them. But React Native app development is still very widespread, as evidenced by the Contributors and “Used by” statistic.

The popularity of Flutter has absolutely exploded, and now has more stars than React Native –nearly 100k stars, up from just 30k in August 2018. That is phenomenal growth!

Ionic is somewhere in the middle, and NativeScript has rather slow-growing popularity.

In Stackoverflow’s 2019 Developer Survey, respondents voted for their “Most Loved Framework”. Flutter scores the highest out of our chosen frameworks, and note that NativeScript and Ionic don’t figure in this list.

Source: Stackoverflow.com

Ultimately, popularity shouldn’t decide which platform to use for your app, but it does give us a good idea of the trends in mobile app development.

Code Reuse

This metric explores the reusability of code. While you will be using only one code language, you might still need to write different code if you need platform-specific re-styling.

Ionic: The webview wrapping concept ensures that you can easily reuse your code. Ionic also has a wonderful library of adaptive components that are automatically styled for the platform the app runs on.

Flutter: Also allows high reusability. Often, the widgets it ships with don’t adapt to the underlying platform, so instead you use Material Design on both platforms by default. You can manually swap widgets based on which platform you are running. Thus it scores less than Ionic in terms of reusability.

NativeScript: Like Flutter, overall code reuse is quite good. Many components automatically compile to their native equivalents and therefore need no re-styling. You need to manage components that do not exist on both platforms.

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. But code reuse is still high since you use one language and libraries like Redux that need no adjustment.

Xamarin: Developers can reuse up to 96% of their C# code. Xamarin also offers form components, making it better for code reuse than React Native and Flutter.

Pre-Styled Component Library

This metric looks at the availability of pre-built UI elements. The more components that a framework ships with, the easier it is to build beautiful UIs.

Ionic: Ionic has a big set of pre-built and pre-styled components. The components provided by Ionic automatically adapt to the platform the app runs on. Ionic also provides a lot of tooling that makes mobile application development easier, like a development server for running your app on an emulator.

Flutter: Flutter also comes with a comprehensive suite of built-in widgets. These mostly use Material Design, and Flutter is always adding more iOS-styled components. Flutter app development doesn’t require a lot of manual styling. But widgets don’t adapt to the platform automatically, so you might need to put some effort if you need a different look for different platforms.

NativeScript: NativeScript ships with a decent number of UI components, and they adapt to the underlying platform. But it is less comprehensive than Ionic or Flutter, and you might need to create some additional widgets on your own.

React Native: React Native also has a decent set of built-in components, but a lot of them need to be styled by you. Plus they don’t adapt to the underlying platform. Instead, like with Flutter, you get alternatives for both operating systems.

Xamarin: Xamarin.Forms offers a complete cross-platform UI toolkit consisting of native UI components for both platforms which are compiled into platform-specific UI components. You can also use Xamarin.iOS or Xamarin.Android for custom app UI and better performance.

Mobile App Performance

This metric looks at how the mobile app designed with the platforms compare from a run-time performance perspective. However, there is one caveat: benchmarking performance is not straightforward, it depends on many factors and variables including device, code, app, and features being used.

Ionic: Ionic applications offer the “worst” performance since it works as a wrapped web app, but that doesn’t mean it is very far off from the others. In practical terms, you would hardly notice a performance difference in most cases, because modern devices are more than capable of running most apps smoothly. The difference is minute.

Flutter, NativeScript, Xamarin, and React Native: All of these platforms offer you real native apps (compiled from your code), so they provide better performance than Ionic does. Some argue that Flutter’s performance is better than the others because Dart code is compiled to a C-library, which means it’s closer to the native code.

Accessing Native Device Features

Each of these platforms provides a good set of features to access common native device functionalities like the camera. Of course, you can always write your own code to access these features or use the third-party packages that are available.

Ionic: Ionic uses Cordova or its own solution, Capacitor, to give you access to native device features.

Flutter and NativeScript: The Flutter team has put a lot of effort since 2018 into providing official packages for many of the common native device features that you typically need access to. Both Flutter and NativeScript have a good number of own and open-source plugins to choose from.

React Native: Since it’s the most popular, you will find a huge set of third-party packages as well as some built-in APIs for accessing native platform functionalities. You will mostly be relying on these third-party packages. The disadvantage of this is that the core maintainers of any package might quit, hence continuous support for these packages is not guaranteed.

Xamarin: Developers can integrate deeply into iOS and Android since Xamarin exposes every API directly in C# to access these features. The Xamarin.Essentials library helps streamline and simplify development when needing to add native features to apps.

Community Support

When it comes to mobile app development, particularly cross-platform development, it’s good to have an active community of users. The community provides a lot of ready-to-use packages, and you can find a lot of solutions to common problems as well as reach out to the community to solve unique problems you may face.

Ionic: Ionic uses JavaScript, and it also provides especially great support for Angular. The JavaScript and Angular ecosystems are extremely well developed, so you will never be short on help with Ionic.

Flutter: Flutter is relatively new, but the community is seeing rapid growth. There are plenty of discussions on Stackoverflow, as well as third-party libraries and packages on its own platform.

NativeScript: The NativeScript community is lagging behind a bit, although it’s gaining some traction. You do find some Stackoverflow threads and third-party packages. New initiatives like Nativescript-Vue show that there is a lot of community activity, and it allows you to use a framework other than React and Angular.

React Native: This is definitely the most used platform. React Native app development is well ahead of the competition. You have both JavaScript and React communities to help, which are very large and mature. And this a good thing, because React Native comes with only a few core features, so you’ll need to rely on the ecosystem to solve a lot of your issues.

Xamarin: Support for Xamarin is rather limited. But Microsoft provides some free Xamarin courses and learning paths to help you get started.

Icicle - Your Mobile App Dev Partner

If you are looking to build an app, Icicle can help you put together a remote mobile development team that is aligned to your platform needs. We have expertise across all of the major platforms, and we can build with whatever approach best suits you: native app, cross-platform, or Progressive Web Apps.

Contact us today to get started custom building your remote mobile development team. Forget the hassles of hiring, just tell us what you need and we’ll get you started in no time.

HIRE MOBILE APP DEVELOPERS

Spread the word - Feel free to re-tweet and share the article. If you think there is any other information out there that we have missed here, please tweet at @icicletech and let us know. Happy Developing!

React Native vs Flutter vs Ionic vs Xamarin vs NativeScript https://buff.ly/2SudEwX via @icicletech

— Icicle (@icicletech) 27 August 2020

Published in | Tagged with