by Apriliana Nur Rahmawati, Programmer at Mitrais React Native vs Ionic Comparation 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. Native:
  • Apps built in native languages can access all the feature in their platform
  • Apps are built with 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 a 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.
  • Hybrid apps are generally developed with HTML, CSS and Javascript. They are essentially a web application embedded on a mobile platform using WebView, and built to look like a native app.
  • 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. Overview  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  In contrast, React Native is not really a “write once run anywhere” solution. The apps are not a “mobile web app”, an “HTML5 app”, or a “Hybrid app”.  They are, instead, “real” mobile applications using each platform’s components and features. For a developer’s side, while it is true that a single set of Javascript code can be written in most cases, that code is translated into native code to make use of the native component. For example, when we declare the date picker in our code, it will render the native Android date picker on Android devices, and native iOS date picker on Apple devices. Some components are not available in both Android and iOS, but they generally have an equivalent. If there happens to be no equivalent, it is easy to separate the logic for each platform. Language Stack Ionic use Angular, a Javascript framework, as the basic language and HTML templates for its view. In Ionic, a MVC (Model View Controller) approach is taken, so the logic and views are clearly separated. For styling, Ionic comes with Sass (Syntactically Awesome Style Sheets). Sass allows us to set some default styles of the apps and makes it easy to change. For developers unfamiliar with Sass, common CSS can be used, making styling an app no different from styling a normal website. React Native also uses the JavaScript framework, creating JavaScript code that resembles HTML (but is not exactly HTML). It is called JSX, a syntax extension to JavaScript. JSX may look like a template language, but it comes with the full power of Javascript. The display logic is blended with business logic. For a developer who works with designers, JSX cannot accept pure CSS because it is not real HTML. However, the application can be styled using JavaScript. All of the core components accept a prop named style, and usually match how CSS works on the web. However names must be written using camel case (e.g backgroundColor rather than background-color). For the designers and developers accustomed to CSS, the transition is easy. Performance 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. Testing Process 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. Conclusion  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.