Ionic and React Native

Ionic and React Native are two of the most popular hybrid development frameworks for creating mobile apps. Both are open source and support Android and iOS operating systems. And, both can deliver great mobile apps.  

Here at Softjourn, we have deep expertise with Ionic and React Native, so we’re often asked which we recommend. The good news is, either is a great choice. But if you’re requesting our recommendation, what you really want to know is which is better for your specific situation. And, that’s where things get a sticky because, frankly, the answer depends on what you need and what you’re willing to compromise.

But, let’s start at the beginning.

The Native vs. Hybrid Debate

Deciding whether Ionic or React Native is the better choice for you starts with understanding the tradeoffs between native and hybrid app development.  

Native Apps

A native app is built to work on a specific platform or device, which, in the interest of brevity, we’ll just call “platform” from here on. Because of this specificity, a native app is able to access all of a platform’s native features without restriction, thereby delivering the best possible user experience.

Most agree that a native app is quicker and more responsive for end users due to functionality—such as scrolling acceleration, keyboard behavior, navigation, rendering and animation—finely tailored to optimize platform performance. In addition, some contend that a native app is more stable and more secure than its hybrid app counterpart. While these statements are generally true, the magnitude of their effect is related to the specifics of the app you’re building.

The strength of a native app is, however, also its weakness. Its design specificity means if it’s to be used across multiple platforms, it must be redeveloped or modified to work on each platform, introducing incremental time and cost to the development process.  

Hybrid Apps

Those who champion hybrid apps say they can accelerate a go-to-market strategy and deliver apps on a tighter budget. A single codebase used across multiple platforms avoids the added time and cost of native apps for platform-specific customization. And, of course, there’s the benefit of having only one codebase to manage. Can these savings be quantified? One developer claims, “If you’re deploying to multiple mobile platforms, you’ll find your development costs are reduced by as much as 50 percent or even more.”

But, that saving comes with another kind of price. It’s generally conceded that apps built using a hybrid framework give up something in performance and UX, because they don’t have the direct access to platform functionality that native apps do. Another developer characterizes hybrid apps as “essentially websites embedded on a mobile platform through a Web View and styled to look like native.”

The relative merits of native and hybrid apps set up our evaluation of whether Ionic or React Native is the better choice for you.   

Overview

Ionic: One Code, Many Platforms

Ionic is the classic hybrid mobile app development framework. It exists to make mobile app development easier across multiple platforms by using a single codebase. Its fans attest to its ease of use and fitness for purpose. In short, Ionic can help you build great mobile apps—quickly and economically—that work well across platforms.

One of Ionic’s key strengths is its familiarity. It’s based on Angular and leverages HTML, CSS and JavaScript to write and render apps, with PhoneGap/Cordova enabling calls to native APIs to provide bridges to access or approximate native features, such as a smartphone’s GPS or camera. Since the bulk of an Ionic app is built with HTML and JavaScript inside a Web View, developers with strong JavaScript or front-end web development knowledge can hit the ground running. In addition, Ionic offers strong documentation, an extensive community of developers and a robust marketplace for plugins.

Ionic applications are perfectly suited for developing data collection applications, as well as tons of other applications that do not rely heavily on the underlying hardware as well as those that do not rely on the hardware graphics.¹

As a classic hybrid development framework, what Ionic doesn’t offer is direct access to native features, which may diminish the UX, making it necessary to evaluate the importance to your app of “approximating” native features vs. “directly accessing” native features.  

Pragmatically, if your app doesn’t rely heavily on the underlying hardware and hardware graphics, approximating native features may be barely noticeable in a UX sense. The same is true if you’re simply converting a website to a mobile app or developing an MVP as fast as possible. But, if your app is mobile-first or relies heavily on the underlying hardware or hardware graphics, you might need to think harder about how approximating native features will affect the UX. In those situations, are Ionic’s benefits of speed to market and lower cost worth the tradeoff in the UX?  

React Native: Combining the Benefits of Hybrid and Native

React Native is also a hybrid development framework that supports building mobile apps across multiple platforms using a single codebase, but it also renders defined components as native platform widgets. One way to think about React Native is as a hybrid hybrid. It makes native app development easier by sharing the majority of codebase, while also embracing native platforms.

React Native is focused solely on building a mobile UI, making it more like a JavaScript library than a framework. The resulting UI is highly responsive and feels more fluid thanks to asynchronous JavaScript interactions with the native environment. This means the app will have quicker load times than a typical hybrid app and a smoother feel.²

React Native is primarily a JavaScript-based framework, but rather than using HTML and CSS, like Ionic, it requires separately written bridge components for each platform. The goal is to create apps and UXs that are close to what can be achieved in native environment. It also leverages JSX, a JavaScript language extension similar to HTML but which may present a learning curve for developers who haven’t encountered JSX previously.

Developers who are fans of React Native say apps built on this framework remain understandable even as they get significantly larger. They also point to React Native’s strengths in tracking down bugs and its readability (even to the unfamiliar). But, most of all, they praise the speed of its apps. One developer says React Native is capable of keeping your UI animating and scrolling smoothly at 60 frames per second, even when your app is running complex logic.

But, again, those benefits come with the downside of additional time to market and cost. Reversing the logic of the above Ionic discussion, the question becomes, “Does the app you’re building require the speed and UX to justify the cost/time of creating separate bridge components for each platform?” And, of course, is the talent available to you to build the platform-specific components?  

The Compromise

In some mobile app development scenarios, the choice between Ionic and React Native is clear. For example, if your goal is simply to convert a website to a mobile app or to create a mobile app that’s not closely tied to the platform’s native features, then Ionic is the logical choice. On the other hand, if your mobile app must support a lot of animation or the underlying hardware is integral to the app’s quality or functionality, React Native likely is the better fit.

Most mobile app development scenarios, however, aren’t so clear cut, so your Ionic vs. React Native decision won’t be either. You’ll need to evaluate the benefit of Ionic’s

There’s another factor to consider, too—the practical business side. How tight is your turnaround? What’s your budget? How many platforms is the app expected to run on? If you don’t have the time, budget or availability of talent to build platform-specific app components, the choice of using Ionic may have been made for you. But, if your review of the app specs determines it would suffer without direct access to native features, you should inform your client of the potential tradeoffs and whether additional time or budget could be allocated.

Again, compromise may be necessary.speed-to-market and potential cost-savings against React Native’s potential of better UX performance. Only you can weigh and quantify those benefits based on your specific situation and determine the best compromise for your app.  

Evaluate Your Situation  

Both Ionic and React Native can help you build great apps, but what does your app need to accomplish and what business constraints are you working under?  

Before you make your mobile app development framework choice, get clarity in these areas:

• Mobile App Goals and Required Functionality
• Available Development Budget
• Time to Market Expectations
• Required Developer Experience and Availability
• Number of Platforms to Be Deployed
• Importance of Underlying Hardware to Mobile App Functionality
• UX Performance Expectations

We’re Here

Again, both Ionic and React Native are both great tools for mobile app development.

But by examining your mobile app’s requirements, the business environment in which you’re working and the tradeoffs being made in your choice of Ionic or React Native (See Table 1), you’ll make the right decision for your situation.

If you’re still not sure which framework is better for you, contact us. We have deep experience working with both and we’re happy to share our recommendations one-on-one to help you make or validate your decision. 

Table 1 Ionic and React Native: Key Points of Comparison^3,4