Mobile development does not mean just native iOS development using Swift or native Android development using Java anymore. We are in the generation of hybrid, cross-platform and progressive web apps.
In this article, I am going to compare two popular mobile frameworks, React Native and Ionic. We will first see how they are similar and also explore their differences. This guide can help you decide which framework is right for you.
React Native basics
React Native is a cross-platform solution to build mobile apps natively on both iOS and Android. It is coded in JavaScript using React. It was open-sourced back in 2015 by Facebook and has gained immense popularity ever since.
React Native is used to build native mobile apps using JavaScript and React on both iOS and Android.
Ionic basics
Ionic is a hybrid solution to build your mobile apps. It allows you to use standard web technologies like JavaScript, HTML, and CSS to build high-quality, cross-platform apps. Ionic Framework has released a free eBook that explains the differences between a hybrid app vs. a native app.
The idea is that you code once, and that code can be deployed cross-platform on iOS, Android, Web, and desktop. The same code-base is shared across all the platforms.
How are they similar?
If you are just learning about both React Native and Ionic, they probably sound very similar from the description above.
Ionic lets you build mobile, desktop and web apps using traditional web technologies like JavaScript/CSS/HTML. Similarly, React Native lets you build native mobile apps using JavaScript and the popular JavaScript framework, React.
This means you don’t need to know native iOS or Android development to use Ionic or React Native.
How are they different?
Now let’s learn how these frameworks are different.
1. Native vs. hybrid
React Native is native
React Native is used to build truly native cross-platform apps. A native app is a software application built in a specific programming language, for the specific device platform, either iOS or Android.
Native iOS apps are written in Swift or Objective-C and native Android apps are written in Java. With React Native the underlying widgets are all native components, giving the user a seamless experience. It is built using JavaScript and React but the components are all native components of iOS and Android. The beauty of React Native, is that it builds native apps, on both iOS and Android, with a single code base.
It is really impressive since you are coding in Javascript, and rendering components that are native to the platform. This is one of the reasons that apps built using React Native have a superior user experience in comparison to frameworks that use Web Views.
Ionic is hybrid
Ionic is a hybrid app. It uses HTML, CSS, and JavaScript to build apps that can be used on web, desktop, and mobile. Hybrid apps essentially use what is called a Web View to build mobile apps.
Ionic apps are built using web technologies and are rendered using Web Views. Ionic apps are built using web technologies and are rendered using Web Views, which are a full screen and full-powered web browser.
The idea here is to reuse code across multiple platforms. So hybrid apps will not have access to native features of the mobile device out of the box. Native features like camera, GPS, contacts and so on. Ionic uses Cordova plugins to integrate native features to your app. Ionic renders its graphic elements via a browser, which takes several steps to start showing the component on the screen. This could cause a performance hit on larger apps.
But when you are building web applications, using hybrid technologies like Ionic, it is easy to convert them to Progressive Web Apps that can be downloaded just like any other mobile app.
Winner: React Native
If your product is solely a mobile app that needs to work cross-platform on iOS and Android and needs to look and feel like a native app, you should pick React Native. If you are looking for an elegant user interface that matches your website in the form of a mobile app, you could consider Ionic instead.
2. Technology stack
React Native
React Native is written in JavaScript using the popular framework React. The UI pieces are written in JSX, instead of HTML. JSX looks like any other template language but comes with all of the powers of JavaScript. The reason React Native uses React is because both the frameworks were developed and open-sourced by Facebook and it makes sense that they chose React to build React Native.
Ionic
You could use Angular, Vue, or even React to build Ionic apps. Ionic’s tech stack is a lot more flexible compared to React Native. With the latest release of Ionic 4, you can use Ionic with any web development framework.
Winner: Ionic
Until last year, React Native could have been considered a winner in this category because Ionic apps were built using only Angular. But with the recent updates to Ionic, it opens up a huge amount of flexibility in building Ionic apps. Any web developer, on any modern web framework, can develop Ionic apps. This is a huge perk for Ionic, making it a winner in this category.
3. Popularity
Before beginning your quest to learn React Native or Ionic, let’s look at which one is more popular.
To get more insight into their popularity factors, let’s take a look at the State of JavaScript survey of 2018. It released data on both React Native and Ionic popularity over the last three years among developers.
From this survey results below, we can infer that React Native is definitely more popular as a mobile framework when compared to Ionic.
Winner: React Native
React Native’s greater popularity is due to its ability to build truly “native” apps using JavaScript and React. The concept of a hybrid app using WebViews is good, but it does not come close to the look and feel of a native app. Ionic being a hybrid app lacks the looks and feel of a truly native app. Whereas, React Native apps are native and it is awesome that the components are all native to iOS and Android. The end-user will not be able to distinguish between a native app and a React Native app. This is the most important factor contributing to React Native’s popularity.
4. Learning curve
React Native
If you are a React developer, then learning React Native is extremely easy. The concepts are the same, and you code in React. The only difference is that React uses web components like <div>, <p>, whereas React Native uses components that are wrappers around native iOS and Android components like <View>. It shouldn’t take a long time for a React developer to become a React Native developer.
That being said, what about newbies who don’t know React? Learning React Native means, you have to learn JavaScript and React. You also need to start thinking like a mobile developer, since you are going to build mobile apps and not web apps. The learning curve could be considered steep for someone with no React knowledge.
Ionic
We already saw that Ionic’s tech stack is flexible. You are going to use JavaScript, CSS, and HTML along with your choice of web framework. It could be Angular, React, Knockout, Vue or any other modern web framework. This means developers who adopt Ionic framework, are going to pick the framework that they are already comfortable in to develop apps. Hence, the learning curve here is not as much as React Native.
With Ionic, you are essentially building web apps, that can become mobile apps. This hybrid approach is different in comparison to React Native’s native approach. This is easier for developers to grasp.
Winner: Ionic
Ionic has less of a learning curve in comparison to React Native. This is because Ionic allows you to pick a framework of your choice that you are comfortable in. It could be Angular, React, Vue or even plain JavaScript. Whereas with React Native, you have to code in React, and there is no flexibility with the tech stack. For a non-React developer, the learning curve is higher with React Native.
5. Performance
If you truly want the best performance, your best bet is to code native apps separately on iOS and Android. This is because native coding provides access to native features directly when you code. There is no layer of abstraction, and the direct interaction with native iOS and Android modules leads to enhanced performance. Both React Native and Ionic cannot match the native performance. Nevertheless, let’s look at which one is better.
React Native
React Native is closer to native performance than Ionic. React Native is essentially building native apps, using JavaScript. It has the look and feel of a native app and uses the same building blocks that native apps use. The only difference is that it is cross-platform and uses JavaScript to wrap around these native building blocks. React Native provides great performance and responsiveness to your mobile apps.
Ionic
Ionic on the other hand is a hybrid approach. It does not build native apps, and you could encounter performance issues. There are a lot of callbacks to the native code, which could cause lag. Ionic also requires the Cordova plugin, in case you need to access native features. Although Ionic is a great solution for building elegant UI and faster development, it does come with some performance issues when compared with frameworks like React Native.
Winner: React Native
React Native provides better performance than Ionic. The additional layer in Ionic, which involves Cordova plugins adds to the slowness since it is building a WebView and not a native app. React Native, on the other hand, wraps around native components, hence providing better performance.
6. Developer community
While evaluating a technology for your team, it is a good idea to explore the community involvement for that technology.
Let’s take a look at how React Native and Ionic compare with respect to the developer community and open-source contributions.
The GitHub stats is a good indication of community involvement for both the frameworks. React Native has about 78k stars with over 1900 contributors to the framework. This indicates that it is hugely popular in the community.
Ionic on the other hand has about 38k stars with only around 330 contributors to the framework. This is less than one-fifth the contributors when compared with React Native.
Winner: React Native
React Native has a much more active and engaged developer community when compared to Ionic. This could be owing to the reason that, it does build native mobile apps and not web apps. And also the fact that it uses React to build them.
Summary
Pros of React Native
- Written in Javascript (a very popular language)
- Uses React, the robust web framework
- Builds cross-platform native apps on both iOS and Android
- Provides a great developer experience
- Great community involvement
Cons of React Native
- React Native is not suitable if you are trying to build an app which is extremely heavy on animations, like a gaming app
- Developers have to learn React before they begin React Native
Pros of Ionic
- Written in JavaScript the supports most modern frameworks like React, Angular and Vue
- Flexible for developers to pick a framework
- Builds cross-platform hybrid apps on both iOS and Android
Cons of Ionic
- Does not perform as well as cross-platform native apps or native apps
- Have to use Cordova plugins, to use native APIs and modules
- Builds a Web View, which will not translate to the look and feel of a native app
Conclusion
So who won? In this post, React Native is the winner. Of course, there is never the “right” framework. If you are planning on building cross-platform apps, make sure you evaluate your use-cases and developer preferences to decide which framework to pick.
Both React Native and Ionic come with their own pros and cons, and it takes careful evaluation to pick one or the other for your development.
Post your comments below and let us know what you decide and why?
Plug: LogRocket, a DVR for web apps
LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
Try it for free.
