React Native vs Ionic. Building a Mobile App

Mobile is huge these days. But development and support of mobile apps is not a small thing. For both – iOS and Android – you need to have separate dedicated teams. There have been couple of attempts to build a unified framework to support both platforms. Examples are Phonegap and Ionic. Getting benefits from a single codebase you also pay the price – application performance.

When Facebook introduced React Native to the world a few years ago, many developers treated the open source project with a certain amount of scepticism. Some wondered why another client-side library was needed amongst so many others.

React Native was created to make it easier to build native apps. With the framework, view layer consists of React components, which are small fractions of code that describe how your app should look based on input data – that depends on the native platform the app is built on. Native apps usually perform better, certainly when it comes to rendering and animation than hybrid apps, which is one reason React Native was first created – to solve the problem of poor hybrid performance and the inefficient process to create native apps.

Ionic is a mobile app development framework, also designed to make mobile app development easier. So, React Native or Ionic? However, before we compare these two ways of building an app, we need to briefly refresh ourselves on the key terms: Hybrid and Native.

Hybrid vs. Native

Hybrid apps are not native. Hybrid apps are essentially websites embedded on a mobile platform through a WebView and styled to look like native. This is what Ionic provides out of the box. Hybrid app development can be achieved using HTML5, CSS or JavaScript and can execute the same code regardless of operating platform they are running on. With tools such as PhoneGap, hybrid apps can connect with native features of the phone/platform, including GPS, accelerometer, camera etc.

Native apps are – as the name suggests – native to the platform they operate within, created in the relevant coding language – Objective-C or Swift for iOS and Java or Kotlin for Android. Native apps can access all of the platform’s features without restrictions.

Hence, Facebook – Instagram’s parent company – and numerous other consumer-oriented tech and media brands, such as Airbnb, Vogue, Bloomberg and Netflix turning to React Native for native app development. Can Ionic match up to these credentials? Finally we moved to the main comparison here: React Native JS vs Ionic.

React Native vs. Ionic Comparison

Let’s start our journey with highlighting the key differences and similarities between both frameworks:

React Native

Though React Native is three years old, we can state that it is a mature technology for cross-platform app development. This framework inherited the principles and partially the name of the JavaScript library that came out in 2011. Generally, the RN working principle is simple – you write code in JS, which interplays with native components of a specific operating system. With that, no browser or even more WebView are involved in the process. The interplay between the native code and JS code is carried out via the so-called bridges that are separate for each OS. As for the UI components, you may leverage those provided by Facebook or created by the community of React Native enthusiasts.

React Native advantages

• Code reusability is one of the key advantages associated with React Native. In some cases, you can expect up to 95% of code reuse rate which significantly accelerates the development process and cuts costs.
• Performance of apps built with React Native is excellent and much better than Ionic. However, it still lags behind the native app’s performance due to the bridge between native components and the business logic.
• The user interface of RN apps is akin to native products due to the use of platform-specific UI building blocks. In practice, you get an improved user experience regardless of the platform or device your app is installed at.
• A huge support community, as well as strict design paradigms, ensure the easy maintenance of projects built with RN.

React Native disadvantages

• Delving into the native code is what engineers may face if there is a need to puzzle out the components written in a platform-specific language. In this case, it’s nice to have some expertise in Objective-C/Swift or Java/Kotlin.
• The lack of React background may be an obstacle for a smooth launch of a React Native project since the library itself, its writing approach, and JSX require some additional time to get in.
• RN transforms the graphical elements automatically for each platform which may cause placement issues. In this case, you’ll have to tinker with the code to brush up your design.

Ionic

Ionic is the React Native’s age mate, but it goes another way in cross-platform app development. The focus area of the framework is hybrid mobile apps, which require a special HTML rendering engine, the WebView, to let your app run on the device. It is often stated that Ionic is a successor of the once popular framework called Apache Cordova, but with improved documentation and powerful command line interface. Another technology that influenced the framework is Angular. Hence, if you have a background of the mentioned tools, you’ll have no troubles with creating apps using Ionic.

Ionic advantages

• With Ionic, you do not have to spend much time working with native languages or other platform-specific issues. There is a plethora of native-styled UI components, as well as useful features like interactive paradigms, typography, mobile components, etc. As a result, the development cycle is shorter.
• The framework is easy-to-learn, and the bulk of engineers are familiar with the technologies under the Ionic’s hood.
• Fast prototyping with Ionic is possible due to the preset templates not to mention a variety of third-party starter kits.
• Write once with Ionic and run anywhere is what you get in the full sense of this statement. You might need to make a subtle code change to run your app on any platform.

Ionic disadvantages

• Performance is the price you have to pay for the advantages of hybrid app development. Ionic is not the exception, and performance issues are possible in case of numerous callbacks sent to the native code.
• Native UI look is what you should forget about when using Ionic. Your app will look the same regardless of the platform/device it runs on.
• Use of browser entails a prolonged app loading and a deteriorated responsiveness at the CPU load.

Differences between Ionic and React Native in action

Since now we know strengths and weaknesses of both frameworks, we can proceed with a face-off in the following key insights.

Creating Components

Ionic, as a hybrid development framework uses PhoneGap/Cordova to reproduce native components. Cross platform app development is more commonly undertaking using Cordova, ngCordova, Ionic, or a combination of two development frameworks.

On the other hand, React Native’s building blocks are reusable components compiled directly in the native platform. You get a consistent look and feel to every component. This component-based structure gives you all the speed, functionality and feel of a native app, and you can even apply – using plugins – React Native components to an existing apps code, instead of needing an entire overhaul.

Rendering

React Native functions best when writing apps in JavaScript. However, even when an app is written in another language, such as HTML and CSS, React will render features using native components. Rendering takes place in real-time – no need to recompile, rebuild, etc.; you see results straight away – instant, thanks to Live Reload. You also have the option to implement conditional rendering, depending on the state of your application.

Ionic also allows for immediate feedback, thanks to instant previews of your app on mobile devices. Any time you make a change, your app instantly refreshes.

Platform Adaptability

Hybrid apps run the same code and appear similar, irrespective of the platform. Ionic takes this into account and adjusts features to make cross-platform app development a smoother experience so that you can write an app once and it can run anywhere with minimal changes.

React does not want developers to ignore platform-specific logic and frameworks. Native app development requires more work, which is one reason why RN was created, to make it easier to build native apps. Most components have a platform-specific logical equivalent, so it shouldn’t take much work to adapt features from one platform to another.

Language Stack

Ionic is based on Angular, a JavaScript framework, which uses HTML templates for its views. Logic and views are separated when building apps in Ionic. Cross platform development is somewhat easier using Ionic since much of the basic underlying framework remains the same – although many ‘native’ developers would argue that is why native, not cross platform/hybrid apps are more finely tailored to specific platforms and devices. Essentially it is angular app with concepts from native world.

RN is also based on a JavaScript framework, using JavaScript code that resembles HTML, but essentially isn’t. It is known as JSX, which is something most developers are comfortable with, which results in a native app development using smooth UI components.

React only gets trickier when working with designers since JSX is not HTML and designers can not use CSS directly. However, this doesn’t limit CSS capabilities. Design styles resemble CSS, whilst underneath React Native turns the design inputs into platform-specific styles. You can write everything in JavaScript, with the only noticeable difference is that style names are written using camel casing, e.g. backgroundColor rather than background-color.

Ionic will leave some developers and designers working with them feel on familiar ground. Whereas, React might involve more work, especially when collaborating with other team members.

Testing on device

Nothing is more frustrating than waiting for feedback, or waiting to test whether an app you’ve been working on actually works in practice.

Both React and Ionic deliver a version of real-time testing. Ionic allows for instant previews on smartphones and browsers. It also instantly refreshes if you make any changes.

React also shows you the results of modifications as you make them. Native app development with instant results. Awesome!

Community

Working with any open source framework makes it worthwhile checking how healthy and supportive the community/ecosystem is around the technology. Remember, both Ionic and React Native have emerged from established ecosystems – Angular and React – so there are healthy, supportive online ecosystems.

Both are very active on GitHub, although at the time of writing, the difference is pretty noticeable: React Native vs Ionic – 50,100 vs 30,100. For both, multiple plugins already exist, and they support Android and iOS. Windows Universal Platform support is part of Ionic 2, but you need a plugin to access using React Native.

Which is better?

What tools you use during mobile app development is a matter of personal and team preference. It depends on you, your team, skills and user requirements. Both do different things and to be fair to React Native and Ionic; both do them well.

For those who prefer creating native apps, React is more effective, thanks to native rendering, making apps quicker and more responsive for the end-user.

Whereas, truly hybrid development platforms, such as Ionic, are more prone to speed and usability issues that frustrate end-users. UI is rarely up to the same standard as native apps or apps created using React Native, with it designed to make it easier to input third-party plugins using a native module without noticeably impacting loading speeds and using too much memory.

Saving time and money is usually one of the reasons companies choose to develop using hybrid development platforms, which can backfire when too much time is spent fixing problems – an issue that seems to be less prevalent amongst those who develop apps using React Native and the recently announced, Create React Native App – a collaboration product by Facebook and Expo.

Of course, the best and easiest recommendation here would be to test those two frameworks and see which you prefer before committing to developing an app in either of them. However, having experience with both Ionic and React Native, not long ago we decided to completely switch to the latter one. In this article we compared React Native to Native mobile development.

Source

Ionic vs. React Native, Building a Mobile App