Hybrid vs. native

For starters, we need to make a distinction between hybrid and native applications. They are two separate groups of mobile apps, and grasping the differences between them is necessary to get the most out of this article. Hybrid and native apps differ in a variety of ways, including:

                     
• user experience,
                     
• performance,
                     
• features,
                     
• technologies,
                     
• development costs and maintenance costs.
                   

Hybrid mobile applications

Hybrid apps are based on web technologies—like HTML, CSS, and JavaScript—and run on a mobile platform called WebView. They can be more than just Single-Page Apps (SPAs) or Progressive Web Apps (PWAs), because you can augment them with native modules or plugins. This allows hybrid apps to have capabilities unavailable to mobile browsers, like the camera, contacts, or accelerometer.

Hybrid apps can also have native UI elements, just like native mobile apps do. However, what they have in most cases is just a native UI container and a WebView inside.

This can lead to a slightly worse user experience than a fully native mobile app; we are using a web page, after all, and the user interface might not be as responsive as on its native counterpart.

Hybrid apps are also much easier to develop if you already have a responsive Single-Page App. You can wrap an SPA in a native container, compile it, and make it available on the App Store or Google Play, delivering it to end users like any other app.

Native mobile applications

Native apps rely on fully native, platform-specific UI components. They operate on elements tailored for individual mobile operating systems. In theory, this provides the best user experience. Native apps also offer better performance, easier access to hardware sensors, and more out-of-the-box features, such as offline mode.

In the past, it was only possible to develop native apps using technologies like Java for Android and Objective-C or Swift for iOS. Because of that, the code could not be reused between these two platforms. This led to increased development and maintenance costs.

What’s more, many apps were available only for one platform. For example, Instagram was released in 2010, but just for iOS; it took 2 years to release the Android version. Of course, at the time Instagram wasn’t nearly as big as it is now, but still as many as 430,000 people had signed on for the Android app waiting list.

In the early 2010s, there were no widely used multiplatform mobile app development tools and creating apps was much harder. They required bigger budgets and multiple development teams if they were supposed to launch on both iOS and Android.

Fortunately, we have choices now. We can still use Java/Kotlin or Swift/Objective-C to create mobile apps, but we can also simplify the software development process by using multiplatform technologies. There are little to no drawbacks to this.

Using JavaScript in mobile app development

Mobile applications aren’t going anywhere. They’re in demand now, and the demand is only going to keep growing in the future. You can’t do everything with web applications, due to the mobile browser’s limited API and the differences between them. Sometimes, the user experience is the most important thing.

React Native and Ionic both allow you to create mobile apps using JavaScript. Both of them are multiplatform and much more cost-effective than fully native development.

Here are some statistics about the programming languages professional developers use, as reported by Stack Overflow:

You’ll notice that JavaScript has more users than Java, Swift, and Objective-C combined. That’s no coincidence.

JavaScript is widely recognized as the most universal programming language. It is mostly used in web development, but also in backend (Node.js), mobile (React Native), and even desktop apps (Electron).

Frameworks using JavaScript usually have a lower entry point for developers, because they don’t require learning a specific programming language first (assuming the developers know JavaScript already).

Choosing the wrong programming language can have dire consequences. An example of that is Flutter, a direct competitor to React Native. Dart, the language Flutter uses, is an unpopular choice, therefore it is considered one of biggest disadvantages of Flutter.

But enough about the theory. We know where we stand, so let’s talk about React Native and Ionic in detail.

What is React Native?

React Native is a framework that allows you to create native mobile apps using JavaScript. It is based on React—one of the most popular technologies in frontend development and one developers tend to like the most. Both React and React Native are open-source and backed by Facebook.

React Native was open-sourced in 2015 and has been rapidly growing ever since, gaining more and more market share and developer support. In February 2018, Facebook changed its license to MIT from BSD+Patents following the backlash from the open-source community. This made React Native a safe choice no matter how you plan on utilizing it.

Although it uses JavaScript, React Native does not rely on HTML or CSS and isn’t based on the hybrid app development approach. Instead, it gives pure native results with JavaScript code. An app created with React Native is indistinguishable from a mobile app built using Java, Swift, or Objective-C thanks to bridging the native and JavaScript threads.

React Native follows the “learn once, write everywhere” principle. It means that the framework respects the differences between platforms, and you may need to implement certain features differently on iOS and Android. This is a good thing in terms of providing the best possible user experience, though it may increase development costs.

React Native performance: statistics and popularity

Looking at these stats, we can conclude that even though React Native is only used by a relatively small percentage of apps (1.3% overall and 5.61% for the top 500 apps), those apps are more popular than the others (4.05% of installs overall and almost 13% of installs for the top 500).

Based on that, we can say that choosing React Native directly influences app popularity and success rate. Also, each of those top apps has a high user rating—over 4.0.

Although React Native is hugely popular on the startup scene because of its cost-effectiveness, it is also widely used by the largest companies on the market. Apps like Facebook Messenger, Instagram, or Skype have been downloaded over one billion times.

The tech giants behind those apps—Facebook, Microsoft, Airbnb, etc.—also support the open-source community by offering their help, expertise, and production-ready modules. This means that React Native is only going to keep growing and being used more and more—also by STX Next, in projects such as Zappi. Head over here to learn

What is Ionic?

Ionic is a hybrid mobile app development platform for web developers. Launched in 2013, it allows you to create apps with a shared codebase between mobile, web, and desktop apps.

Ionic uses the same technologies as the web, including HTML, CSS, and JavaScript. Unlike React Native, Ionic follows the “write once, run anywhere” principle. This means that apps written in Ionic can be easily ported between environments.

Using Apache Cordova and PhoneGap to access native features, hybrid apps created with Ionic are much more capable than web apps in terms of features, while still using web technologies.

Since 2013, Ionic has come a long way to become the modern, mature framework it is now. These days, it’s tightly coupled with Angular—React’s biggest rival, next to Vue.js.

Ionic performance: statistics and popularity

Based on these charts, Ionic is more widely used than React Native (3% of all apps use Ionic and 1.3% apps use React Native). However, if we compare the market share in terms of app installs, React Native is greatly ahead (4.05% for React Native and 0.27% for Ionic).

If we look at just the top 500 apps, the difference grows even larger: Ionic counts for only 0.01% of total app installs, while React Native is close to 13%. This comparison might be a little unfair, though, since Facebook Messenger alone might have more downloads than all the highest-ranking Ionic apps combined.

For new apps, Ionic also has a lower success rate (0.20% of app installs versus 0.52% for React Native) with a comparable number of apps using each technology.

Future-proofing your mobile tech stack

When you choose the tech stack for your future product, it’s important to pick technologies that meet your specific needs. However, it may also be beneficial to go with something that is popular, widely used, and well liked.

This isn’t just about making life easier for your developers. More popular technologies get more valuable questions and answers on Stack Overflow. There are also more tutorials and courses available for them.

Community support of this kind makes it easier to find help when you’re in a tough spot, which can greatly speed up your development process. It’s also easier to find and recruit developers for popular technologies than niche ones.

Furthermore, popularity is a great indicator which tools are here to stay or are likely to gain relevance in the nearest future. It ensures your choice will pay off in the long run.

After all, no one wants to invest in a product based on technology that is bound to become obsolete sooner rather than later.

Do developers prefer React Native or Ionic?

Stack Overflow is where developers learn and share knowledge by asking and answering questions. Every year, Stack Overflow conducts a developer survey.

In 2018, over 100,000 developers participated in the survey, giving great feedback about the current state of technology. The survey covers a variety of subjects, including database, platform, and framework choices.

One part of the survey caught our eye in particular, namely the “Most Loved, Dreaded, and Wanted Frameworks, Libraries, and Tools.”

The name may not roll off the tongue, but that’s because of the all-encompassing nature of the section. Not only does it cover frontend or mobile frameworks, it also tackles the most popular frameworks, technologies, and tools for various other use cases.

Plus, it holds the key to determining whether developers like React Native or Ionic more.

Most loved frameworks, libraries, and tools

As you can see, React is the most loved frontend technology—second only to TensorFlow, which is a machine learning framework, and thus not a direct competitor to React.

Cordova (the basis for Ionic), on the other hand, is the major framework developers love the least. Granted, Ionic isn’t the same thing as Cordova, but the fact one uses the other means we need to keep the relationship between these two in mind.

Additionally, Ionic is also coupled with Angular, which ranked below React on the chart, as well. While React Native isn’t featured on the list, it’s safe to assume it would score similarly high as React, since it’s based on it and follows the same architecture.

Most dreaded frameworks, libraries, and tools

Conversely, Cordova is considered the most dreadful technology for developers, while React is the most developer-friendly of all the frontend frameworks and libraries. Angular is also rather high on the chart, dreaded by 45.4% of developers.

The popularity of React works to its advantage a great deal. Even if developers have trouble implementing features, it’s easy for them to find information online to help solve their problems and keep on coding.

Most wanted frameworks, libraries, and tools

This last chart shows the technologies developers would like to learn or think they should learn in the nearest future.

Almost none of them show any interest in Cordova, which is a strong indication that this technology doesn’t have a bright future. React seems to be most optimal choice, with Angular a little bit behind it.

Now that we’ve established what the developers’ preferences are, let’s take a closer look at how React Native compares to Ionic. We’ll list the strengths and weaknesses of each.

Pros and cons of React Native

Seeing as it’s our mobile app development solution of choice, we believe there’s a lot to love about React Native. One of the software products we wrote using the framework is Deuce Tennis. You can read all about it here:

Pros of React Native

Here are the main advantages of React Native:

                     
• Creating fully native mobile apps using JavaScript
                   

Additionally, the performance of apps written in React Native is on par with fully native apps created using Java, Objective-C, or Swift.

                     
• Huge development community
                   

The same applies to React.

                     
• Speeds up development
                   

With tools like Live Reloading, there’s no need to recompile the app as long as the native code hasn’t changed.

                     
• Easy to scale
                   

It owes that to React’s component-based architecture.

                     
• Lots of job opportunities
                   

The framework has a very promising future ahead, with the job offer ratio consequently tipping in React Native’s favor.

                     
• Widely used
                   

Especially by the most popular apps out there.

                     
• “Learn once, use everywhere”
                   

Following the principle respects the differences between platforms. For example, permission handling in operating systems is much different in iOS and Android. Writing code that would handle both systems at the same time and cover all the corner cases is simply impossible.

There are also differences in navigation, gesture handling, input types, etc. If respected, they give better user experience and seamless integration with the operating system.

                     
• Better user experience than hybrid apps
                     
• Writing code in Java, Objective-C, or Swift when handy
                     
• Ability to share over 95% of the JavaScript codebase for Android and iOS apps
                     
• Preexisting open-source modules for almost every native feature you may need
                     
• Open-source under the MIT License
                   

Cons of React Native

However great it may be, React Native isn’t without flaws.

Here are the main disadvantages of React Native:

                     
• “Learn once, use everywhere”
                   

While the principle is advantageous for a number of reasons, it also means that sometimes using the same approach on both platforms isn’t viable.

                     
• Some mobile development knowledge from your developers is required
                   

Some of the tech examples here include Xcode, CocoaPods, Gradle, basic Objective-C, and Java syntax for native code integration. Knowing the platform differences between iOS and Android, as well as different versions within a specific operating system, can be very beneficial.

                     
• Certain open-source modules for crucial features sometimes get abandoned
                   

This forces developers to find or create a fork to provide compatibility with the newest version of React Native.

                     
• Slightly steeper learning curve
                   

The good news is that this can be mitigated by using tools like Expo. It allows you to create React Native apps without needing to integrate or even have any native code. The main drawback of Expo are its limited APIs, which make it impossible to add more out-of-the-box native features than provided.

                     
• Only a portion of the code can be reused between React and React Native web projects
                   

Pros and cons of Ionic

We’ve made it clear that we favor React Native over Ionic. However, that doesn’t mean Ionic doesn’t have benefits.

Pros of Ionic

Here are the main advantages of Ionic:

                     
• Independent platform
                   

It runs on mobile, web, and desktop.

                     
• Uses web technologies
                   

This makes it easier to learn by web developers.

                     
• Augmenting web technologies
                   

It allows for that with native mobile features.

                     
• Clearer documentation than React Native
                   

All the native modules are in one place, instead of being scattered all over GitHub.

                     
• Open-source under the MIT License
                   

Cons of Ionic

Unfortunately, the drawbacks of Ionic may be substantial enough to overshadow the good things about it.

Here are the main disadvantages of Ionic:

                     
• Smaller community than React Native
                   

This makes it harder to solve problems and get help.

                     
• Reliance on Cordova
                   

We already know that Cordova is not the most developer-friendly platform out there, to say the least.

                     
• Worse user experience than fully native solutions
                   

Final thoughts

Even though React Native is, by and large, superior to Ionic, there are still factors to consider that may sway you in either direction:

                     
1. The choice between React Native and Ionic largely depends on the skillset of your development team.
                     
2. If user experience and overall performance are your top priorities, go with React Native.
                     
3. If you need more sophisticated native features, like Bluetooth or background geolocation, also go with React Native.
                     
4. If you already have a responsive Single-Page App or Progressive Web App and want your mobile app to cover roughly the same features with minor additions, consider giving Ionic a shot.
                     
5. If you need to develop both web and mobile apps within a limited time period and with limited resources, but with limited mobile features, also consider giving Ionic a shot.
                   

Ultimately, and as always, the choice is yours.

Thanks a lot for reading our post. React Native is an exciting framework, and we’re very happy to be working in it and writing about it.

We’ve recently delivered a number of software products written in React Native, chief among them Zappi and Deuce Tennis. Head over to our Portfolio to learn more about the services we’ve provided for them.

And if you’d like to discuss your own mobile development plans with us, look no further than here