Ionic vs React Native: Which one is better?

While looking to develop mobile apps with other than the native toolsets, I found myself evaluating Ionic and React Native as two of the most common alternatives. Both have a large community of passionate developers, are used heavily in large enterprises, and can lay claim to many popular consumer apps.

In this post, I will try to compare — Ionic and React Native framework. Both technologies allow you to build mobile apps for iOS as well as Android. After extensive research, I would say these two are great frameworks because they allow developers to quickly prototype and publish apps on multiple platforms with single source code.

The reason why I am writing this is that it is often asked — “What platform should I select for my enterprise app development?”. Though it is for most of the time very specific, we can still layout (or at least try!) some general guidelines to better decide.

The first great thing is — you can publish apps without the need to learn Swift, Objective-C, Java or Kotlin! Instead, you’ll use JavaScript for React Native and Ionic. Hence you’re able to create native apps for both platforms with one language instead of two — this obviously reduced a lot of learning effort for me to build my mobile apps.

Great! So how do these technologies differ, which one is the best choice for your next mobile project? Let’s take a look…

What is Ionic 4?

Ionic is a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry and Adam Bradley of Drifty Co. in 2013. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging Cordova.

So, in other words — If you create Native apps in Android, you code in Java. If you create Native apps in iOS, you code in Obj-C or Swift. Both of these are powerful but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS.

What Is React Native?

React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. In other words: web developers can now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript library that we already know and love. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.

Similar to React for the Web, React Native applications are written using a mixture of JavaScript and XML markup, known as JSX. Then, under the hood, the React Native “bridge” invokes the native rendering APIs in Objective-C (for iOS) or Java (for Android). Thus, your application will render using real mobile UI components, not webviews, and will look and feel like any other mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location.

React Native currently supports both iOS and Android and has the potential to expand to future platforms as well. In this blog, we’ll cover both iOS and Android. The vast majority of the code we write is cross-platform. And yes: you can really use React Native to build production-ready mobile applications! Some example: Facebook, Palantir, and TaskRabbit are already using it in production for user-facing applications.

Hybrid Mobile Apps vs. Native Apps: A Popular Debate

Before we start, here’s something important you should consider. Ionic is a framework for hybrid mobile app development and React Native is a cross-platform framework to build native apps.

Native apps are built in a specific language for a specific platform. For example, when you write code in Objective C for the iOS platform or use Java for Android, then the application is called as a native app. The main advantage of native app development is superior performance. Contradictory to this, hybrid applications are web applications that use web technologies such as HTML, CSS, and JavaScript to develop an application. To provide native experience and access to native features of Android, iOS, or any other platform, it uses PhoneGap/Cordova platforms.

Parameters

To decide which one is better for Cross-Platform Mobile App Development, I chose to define some parameters, on the basis of which I will try to make a clear comparison. And, those are:

• Language Stack
• Do not repeat yourself(DRY)
• Rich pre-styled Component Library
• Performance
• User Interface
• Ecosystem / Third-Party Libraries
• Market and Community
• Accessing Native Device Features
• Supported Platforms
• Popular Apps
• Pricing
• Maintainability

1. The Language Stack

With this metric, I want to explore which framework utilizes which programming languages and offer what benefits:

React Native: It utilizes JavaScript which is at present one of the most popular, dynamic and high-level programming language. It combines the advantages of JavaScript and React.JS and is backed by Facebook.

The solid side of React Native that makes it best among the other three frameworks in terms of PL is that it allows writing a few components in Swift, Objective-C or Java when developers require them. Utilizing native modules and libraries in React Native applications, you can manage computationally heavy operations like video handling or image editing.

Ionic framework: It uses HTML5, CSS, and JS to develop and run applications, and requires Cordova wrapper to access native platform controllers. Utilizing IONIC, you can also use TypeScript that improves the quality of the code.

Here is how you can rank these frameworks based on the advantages offered by their programming languages:

1. React Native (React)
2. Ionic Framework (Angular)

2. Do not repeat yourself (DRY)

With this metric, I want to explore how much of the code we write can be re-used for both platforms.

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

Here is how you can rank these frameworks based on the Code Reusability

1. Ionic Framework
2. React Native

3. Rich pre-styled Component Library

How easy is it to build beautiful UIs? Do you have to create and style a lot of components (UI elements) on your own or do you have a rich suite of pre-built ones? Are the components adapting to the underlying platform automatically? That’s what this metric is about.

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. The components provided by Ionic automatically adapt to the platform the app runs on and therefore, Ionic makes the creation of beautiful, native-looking apps a breeze!

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.

Here is how you can rank these frameworks based on the pre-styled Component Library

1. Ionic Framework
2. React Native

4. Performance

This metric is the most important one and speaks for itself — how do the apps made in different frameworks perform from a run-time performance perspective?

React Native: The performance it provides is very similar to native applications as it renders code elements specifically to the native APIs. React additionally allow developers to use native modules written in native languages to write code for complicated operations. However, they can’t be reused across two platforms; their main purpose is to provide higher performance.

Ionic: In terms of performance, Ionic loses the game. Its performance isn’t as similar to React Native or flutter offers since it utilizes web technologies to render an application. This approach significantly decreases the speed. Also, it doesn’t utilize native components and tries to create a native look and feel by using web technologies.

The upside of Ionic is its quick testing process that runs instantly in a browser that streamlines the development process.

Ionic offers a poorer performance among these 3 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 “horrible” or even “bad”. Instead, you got worse performance than with the other approaches. In fact, 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!

Here is how you can rank these frameworks based on the performance they offer:

1. React Native
2. Ionic

5. User Interface

Users judge apps within the first few seconds of usage and that’s why GUI of an app must be engaging while being easy — let’s see what these frameworks offer:

React Native: React Native modules associated with native UI controllers, which gives amazing user experience that is very close to native apps. It additionally utilizes the ReactJS library with extensive UI elements and streamlines the UI development.

Ionic: Ionic UI doesn’t utilize native elements at all and renders everything in HTML and CSS. Then it applies Cordova to give native mobile experience. Angular components that accompany the framework also enable Ionic apps look like the native ones.

Here is how you can rank these frameworks based on the UI they offer:

1. React Native
2. Ionic

6. Ecosystem / Third-Party Libraries

What does the ecosystem look like? Is it easy to find help (on Stackoverflow etc) and are there enough third-party libraries available to add that one feature your app needs?

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 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. A downside is that you often need to rely on the ecosystem (like plugins, starters etc.) since only core features are included in React Native itself. React Native’s ecosystem in not as strong as others, and often keeps changing or the third-party plugins can’t keep pace with changing React Native

Here is how you can rank these frameworks based on the Ecosystem / Third-Party Libraries

1. Ionic
2. React Native

7. Market and Community

Having a dynamic ecosystem is something worth being thankful for — but it matters how popular is an option? Let’s see:

React Native: React Native is the king when it comes to market and community recognition. The network of its developers is quickly growing and as of now has many experienced React Native Engineers. This makes it easy to kick start a React project. It utilizes an amazingly popular library (React) and the most essential web development language (JavaScript) and provides real native applications. These qualities make it a strong platform and are the reasons behind its fame.

Ionic: It is the second most popular framework after React. It empowers developers to build native mobile apps in the fastest possible way. Ionic has a huge community support, as well as a great marketplace where you can find a lot of starters and templates to jump start any app from Uber to Spotify.

Here is how you can rank these frameworks based on their industry recognition and reliability:

1. React Native
2. Ionic

8. Accessing Native Device Features

Your mobile apps most likely need access to some native device feature like the camera or GPS. How easy is it to get that access? And how easy is it for relatively new features (e.g. AR APIs provided by Android/ iOS)?

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. Also, Ionic/Cordova and/or Angular plugins are very stable, and update readily with platform updates.

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.

Here is how you can rank these frameworks based on the Accessing Native Device Features :

1. React Native
2. Ionic

9. Supported Platforms

React Native: Android 4.1+ , iOS 8+

Ionic: Android 4.4+ , iOS 8+ , Windows 10

10. Popular Apps

React Native: Facebook, Instagram, UberEats, Airbnb (they later removed RN from usage. Read More here — Why Airbnb left React Native)

Ionic: JustWatch, Pacifica, Nationwide and many more.

11. Pricing

React Native: Completely open-source frameworks. Engineers can utilize this system and their libraries for free.

Ionic: It is a free open source framework for developing cross-platform mobile applications. But, the organization offers its Pro Development Environment which is paid. The company guarantees that Ionic Pro accelerates the development process.

12. Maintainability

With React native any 3rd party library that you might use could get outdated or become incompatible with your updated codebase. Hence, maintainability remains a big issue.

As opposed to React Native, you would only require maintaining one single app in Ionic(you had to maintain iOS and Android builds in React native).

However, the biggest challenge with the maintainability of Ionic apps is that the framework itself is undergoing continuous changes with frequent release cycles on Ionic and Cordova.

Conclusion

If it requires you to deliver high performing apps which are closed in giving the native performance of users, then React Native will be the best option for you. On the other hand, if your project requirement allows you to deliver a decent performing app which looks like native to users then you can always go with the Ionic framework. It all depends on the project requirement. In case of any further questions, feel free to comment or get in touch.

This article was originally published on Enappd.