by Apriliana Nur Rahmawati, Programmer at Mitrais
Mobile application development is growing fast! Millions of apps are available in the various app stores. The popularity of mobile applications means that many developers are desperate to learn how to code and deliver their own applications, for either passion, prestige, or money.
Just a few years ago, a developer who sought to be a mobile programmer needed to know each native language used in the desired platform. Java or Kotlin for Android, Objective-C or Swift for iOS. If a cross platform application was the desired result, then skills in both camps were necessary – difficult to achieve!
Now, technology has begun evolving to the next level, especially for mobile programming. Hybrid code is the newcomer to mobile programming, and is becoming increasingly popular. Hybrid platforms allow developers to learn a single language and create cross platform applications with the same code base. They don’t need to learn Java, Kotlin, Swift or Objective-C deeply to develop their own application. Ionic, Native Script and Xamarin are just a few examples of Hybrid platforms currently sweeping the market.
Some mobile developers still prefer to work with native languages, arguing that they produce superior results in terms of performance and UX. However, when Facebook introduced a new platform known as React Native few years ago, it quickly became a new wave. React Native has the concept of Hybrid platform, but actually renders to a native component.
Ionic or React Native? Which is better? What should I use for my mobile application?
Before diving deeply into the differences between Ionic and React Native, let’s briefly remind ourselves what hybrid and native apps are.
Apps built in native languages can access all the feature in their platform.
Apps are built with native languages, generally Kotlin or Java for Android, Objective-C or Swift for iOS.
The resultant apps feature fast and responsive UX and UI.
Native app development generally requires an initially higher investment in resources and time (therefore cost) when cross-platform applications are required.
Apps built in Hybrid languages can connect with a specific platform's features using tools like PhoneGap.
They can exhibit medium level performance compared to native apps.
Hybrid development can result in significant time and money savings when building cross-platform applications.
Ionic and React Native are the top 2 hybrid framework nowadays, both featuring large developer communities and good support. Let’s look at what are they and how they compare.
Ionic: Write Once, Run Anywhere
Ionic lets the developer to write a single set of code that will run on both platforms. It adapts a few behaviors of each platform to get some “native” look in the apps. For example, if we use tabs in our app, by default it will be shown in the bottom for iOS, and in the top for Android without explicitly seeting the tabs’ position.
React Native: Learn Once, Write Anywhere
As mentioned, performance can be one of strengths of native apps.
React Native usually displays better performance than Ionic because it is rendered as Native component, having direct access to platform functionality.
Ionic can exhibit performance issues if the apps use a lot of callbacks to the native code, advanced graphics or interactive transitions.
However, Iconic performance in Ionic is not bad at all. Apps written in Ionic have smooth transitions for the common case, fast boot up times, and quick waiting times as well. Only in a direct AB comparison with a React Native app will an Iconic app show it’s disadvantage, and that is because of React Native concept itself.
Say no to testing in browser anymore! The Testing process in Ionic and React Native is quick and easy. Both have great tools to rendering the code modification, Ionic with DevApp, and React Native with LiveReload. There is no need to recompile, rebuild, or re-renderin either, and the result is shown in fast saves within our IDE.
DevApp in Ionic lets us instantly see the result on the mobile device, even for multiple devices as long as they are on the same WiFi network.
React Native’s LiveReload lets developers implement conditional rendering, depending on the state of the application.
Documentation and Community
When choosing an open source framework on which to build our app, the first consideration should be how good the documentation is, and how big the community is. Ionic and React Native are both newcomers, but deliver good documentation. This helps a lot in the learning process, and the community helps even more when bug fixing.
Ionic was announced in 2013, while React Native in 2015. As the earlier framework, Ionic has slightly better documentation than React Native.
As two of most famous hybrid framework for mobile, both feature large community and a variety of plugins available. Ionic has marketplace for selling and buying plugins directly from developers, while React Native has provided many plugins through their NPM.
As great solutions for building mobile cross-platform applications, Ionic and React Native both come with their respective strengths, but neither is clearly better than the other.
Which is better in any instance will come back to the project and the developer’s preferences. If the developer already has ReactJS exposure, React Native will be a very good choice. If the developer is more accustomed to Angular, Ionic may be a better choice.
If app performance, responsiveness and rendering of native component is the highest priority, React Native is probably the better choice. On the other hand, if you are looking to build an app that fully supports native browsers, has a tighter deadline and budget, and can stand a modest compromise in terms of performance, then go with Ionic.