Comparison: React Native vs Ionic 2

There are around 5 Billion smartphone users in the world today. These smartphones travel with your users almost every hour of every day. If you’re looking for a platform to give you maximum user engagement, mobile phones are your target. No wonder the Mobile First approach has swept across all sectors, replacing the previous workflow of starting with a website and working your way down. With the rising popularity of the mobile platform, a lot of technologies have been introduced to make our foray into the realm of smartphones easier.

It began with Hybrid application development frameworks allowing us to use basic website languages like HTML, CSS, and JavaScript for compiling and deploying apps across multiple platforms. Then came native frameworks which not only allow us to use web tools for mobile development but also use the native API of Android or iOS.

These platforms serve the same purpose of supporting the creation of mobile applications through web technologies like HTML, CSS, JavaScript. What sets them apart are the features they provide and how they communicate with the APIs of specific platforms.

Ionic 2

Ionic 2

Ionic 2 is part of the hybrid mobile development framework family. Ionic 2 is not only a rewrite of the previous Ionic framework, it embraces the structure and design of AngularJS 2, while also taking inspiration for their design language from Android, Material Design, and iOS. If you are from a background of AngularJS, you’ll be comfortable developing apps using Ionic. Also, it’s TypeScript ready, meaning you can use your current AngularJS 2 components too. Ionic also comes with pre-developed and styled components making it easier for developers to create the UI of an app. The UI is not native though but can give the appearance of a native UI.

Ionic is a framework on top of Cordova, which is used to access the phone hardware functionality. In other words, Cordova whirls up your system browser to render you app, known as WebView. Keep in mind, Cordova isn’t the only framework for hybrid apps, and neither is Ionic the only framework using Cordova. WebView is a browser-free web page loader, giving you access to mobile functionalities like camera, contacts, etc. It’ll be slower in comparison to React Native since here you have to write the HTML code in your Android activities. If your user’s smartphone has a slow processor, it can lead to performance issues or graphical issues

You need to download plugins to access native functionality. For instance, you need to download Cordova plugins if you want to use Google Maps. Ionic 2 supports Ionic Native which does the job of accessing native functionalities of the device through JavaScript more smoothly than the older version. There’s a common interface for all plugins, and this makes it easier to use native functionalities.

With Ionic 2, TypeScript components can make tasks slower compared to directly working with native API. Nevertheless, Ionic 2 does overcome many performance issues with the help of its structure.

Pros:

• Fast development-testing cycle.
• It cross-compiles to iOS and Android.
• Ionic is easy to learn & work with.
• You can write code in TypeScript, which makes it easy if you’re coming from a background of AngularJS 2.
• You can use TypeScript to develop applications for all platforms.
• You can access the native functionalities of your user’s devices with the plugin system.
• Angular itself is easier to learn & work with, for smaller projects than React.

Cons:

• There could be performance issues if you need to use a lot of callbacks to the native code.
• If your users prefer the native UI look, the same UI look in all the devices could put them off.
• Development of advanced graphics or interactive transitions will prove difficult.

Previously, working on Webview was slow and in a way, guaranteed low app ratings because of performance. Now, it's less an issue, as newer smartphones come with better system browsers and better phone specs. However, it still is a noticeable performance difference compared to native.
Ionic is easy to use and learn, but there are restrictions on using the Native features of the device. You bridge the gap using Cordova or PhoneGap, and both have plugins for almost all Native features you may need like GPS, file system, etc.

Ionic is a good choice for prototyping, or projects which have fast development needs, or if you have many app requirements with lower budgets, and whose app performance ratings aren't paramount.

React Native

React Native

An application build using React Native is a real native app, not a “hybrid app” or an “HTML5 app”. You write your code in React components while they render as native UI components in your mobile app. JavaScript, processed through the system's JS engine, is still your app logic. Then again, UI is the bottleneck of hybrid frameworks when it comes to performance, because of DOM performance, not the app logic. Hence, React Native could take more learning, effort, and maintenance, but you’ve created a higher quality app.

Developed by Facebook, React Native is an extension of React.js, using the same principles, such as Virtual DOM for updating the UI. You calculate the changes which need to happen to the UI in the background and once those changes are incorporated, it's applied in batches. The advantage here is, you don’t touch the UI thread, which gives you a responsive UI. The disadvantage, it's slow to communicate with the underlying native OS. If you’re familiar with React, you know it focuses heavily on user-interfaces, React Native does the same.

Unlike Ionic 2, React Native uses native UI components. You are still writing the components in JavaScript, HTML or CSS but React Native uses native components behind the scene. This ensures your users will have the same user experience similar to a native app. Also, this is not a browser-based app like in PhoneGap or Cordova of Ionic, so the implementation is faster and runs quicker on mobile devices.

React Native is cross-platform, meaning the same code-base can be used to develop applications for both iOS and Android. It sort of wraps around the native code of specific platforms, so the logic layer is the same across the web, mobile, and other operating systems. Unlike Ionic, it is not designed to write once, run everywhere, so you need to change some platform-specific code in your program since the goal is to create the closest native look as possible.

Pros:

• Ionic apps enable developers with both cross-platform deployment and deployment to the mobile web as a Progressive Web App with the same code.
• You can use the same code-base to develop applications for Android, iOS, Windows Phone.Better performance than Ionic 2, since the processing of hardware functionalities, is by the specific platform, and not Cordova.
• React is easier to maintain if you have large projects since it follows stricter design patterns and paradigms.
• React Native is more stable and feels like a native app.

Cons:

• The process of converting HTML code to native code can be buggy at times, to fix this problem, you need to know ObjC/Swift.
• It was created for iOS, so certain components for Android may require work from your end.The use of JavaScript may give you an outdated feel, especially if you come from the TypeScript background.
• React Native motto is "learn once, write anywhere,” this means you're using the same framework, and may be shared components, although you maintain separate code for your Android and iOS apps. This means more work on top of the steep learning curve.
• In React Native you use the Native features of the device without needing any plugin. React Native does not use a web layer over the platform, rather makes use of the device’s core features which gives your users the feeling of a native app.
• React Native is meant for more "hardcore" apps where performance is essential and budget is high.

Conclusion

Ionic 2 and React Native both are meant for the same purpose but different project requirements.  If you are looking for performance, responsiveness and want a natively rendering app, there’s no doubt React Native is the one for you. On the other hand, if you are low on time, budget and looking for support of Native Browser apps and fine with compromising performance, then go with Ionic 2.