Ionic vs React Native - the battle of mobile

At first, let me introduce myself - my name is Konrad and I work with 314 for 6 months now. In my daily work I focus on React and React Native Development, but I've also had a chance to work with several other technologies - like for example Ionic. The purpose of this post is to express my thoughts about React Native and make a little comparison between Ionic and React Native.

What is React?

First, let's take a look at React itself. React isn't a complete web framework. It's just a JavaScript library for building user interfaces, which means it doesn’t have any global state management, routing or any other features known from e.g. Angular. To create a fully-functional web app with React, we usually need redux/mobX, react-router, react-dom and many more small packages which add essential features to our app.
alt

What is React Native then?

React Native is a framework for building mobile apps using JavaScript and React. It allows building rich mobile UI using declarative components, same as React does for the web. The purpose of this framework is to create native apps for Android and iOS with one source code. As it uses React for creating UI, React Native also needs some global state management system, routing etc.

alt

Hybrid Native apps with React Native

When we know what is it, it's time to say why it is different than, for example, Ionic.
With React Native we don't create a hybrid app but a real native mobile application which uses the same UI views as an app written in Java or Swift. The code is written in JSX and pure JS and then compiled into two separate native apps for iOS and Android.
Apps created with Ionic are hybrid, which means that they run inside a native component called ’Web View’ and render HTML with CSS inside of them. Such an approach gives them the possibility to run everywhere with minimum work effort, at the cost of performance.
Writing in React Native has also more features, such as access to mobile system elements like the camera or GPS. In Ionic, we have to get access to it through Cordova or a system similar to it.
React Native has a very strong community and is powered by Facebook, which unfortunately means that it also has poor documentation.
Ionic, on the other hand, has many more questions and replies on StackOverflow, a great documentation and a lot of examples, but has less stars on GitHub than React Native.
alt

What else did I find fantastic about React Native?

I'm a frontend developer, so I like it when my changes appear immediately in the application view layer without waiting for compiling. In React Native, the app is compiled once and then it has the hot reloading feature, what means that the view changes instantly after saving the progress.
Apps in the development mode can be easily connected to ‘Chrome dev tools’ and debugged outside of an emulator. Of course, a development console can be also run in your favorite terminal.
And last but not least, you can add Native components written in Java or Swift into a JavaScript application just by importing them. This approach gives React Native developers almost unlimited possibilities.
alt

Why I choose React Native

I chose to learn React Native because it looks like an awesome solution for creating mobile applications without changing my specialization, and also because I already knew React, which I prefer over Angular. After spending a few months with this framework, I can say that an app written in React Native can have really great performance if the code is written using solid JS patterns.
Finally, in my opinion, the most important advantage of React Native is that it compiles into a real native app instead of rendering HTML in the WebView. JavaScript can't be as fast as native code can be but React Native gives advantages of mobile native UI components performance and JavaScript logic working in a separate thread. Such approach is much more powerful than rendering HTML in WebView as classic hybrid applications do.

Contact Us

Oops, there was an error sending your message. Try again.
Sending...
Thanks for getting in touch! We'll get back to you as soon as possible.