Today, there are plenty of ways of having a mobile application as a final product. The most popular solution is building it as native, by using the native language of each platform. The alternative is to choose a cross-platform tool that I will mention later on.
Using native code leads to superior performance, but has the downside of having two teams to handling the product: one for the Android ecosystem and another for iOS.
Cross-platform libraries rely on standard web tools like HTML, CSS, and JavaScript, providing native experiences by accessing the native features.
The hybrid path has the advantage of increasing the speed of mobile development, by having just one project for both platforms and offering UX consistency across channels. After this short introduction, let's go further in detail about the two most used tools to build cross-platform mobile applications: Ionic and React Native.
Both have a wide community around them, with a strong adoption by big companies and mobile applications used by a very large number of customers. This is what we can perceive from npmtrends data:
As seen in the graphic above, Ionic had way more downloads than React Native in 2017. This occurred because Ionic is older than React Native. At that time, it was more mature, ready to be used in mobile development, with less bugs and more stable. After 2019, Facebook put more effort into making React Native a stable library, by updating it frequently, using it in their own products, and presenting showcases about the results.
Ionic also has plenty of apps that were released to both Play Store (Android) and App Store (iOS). The Untappd App is one of the examples.
While with React Native, we can check the Marketplace feature, which is part of the Facebook app.
Both of them have different characteristics and different ecosystems. Let’s talk about each of them individually to better understand how Ionic and React Native work and its pros and cons.
Ionic Framework is an open-source UI toolkit for building mobile and Progressive Web Apps (PWAs) apps using web technologies like HTML, CSS, and JavaScript. It provides mobile-optimized web technology-based components as well as native APIs using Capacitor and Ionic Native. It was created in 2013, by the Drifty Co. The original version was released in 2013, built on top of Angularjs and Apache Cordova.
In 2019 they launched a version with support for multiple front-ends, including React.js.
Today you can build an Hybrid mobile application in Ionic with Angular, React.js, Vuejs, or even with just plain JavaScript.
Now let’s take a look at its advantages:
Although it has benefits, we can also encounter some challenges in the way, like the ones listed below:
With React Native, developers can build mobile applications for Android and iOS platforms using JavaScript, but they can also implement features with native code. It enables cross-platform builds by providing platform-agnostic native components that map into the platforms’ native UI building blocks. It was created in 2015 by Facebook and it is used in many of its products, as for example, the marketplace section of Facebook's application.
Developers can also build TV applications with React Native. This means that with a few extra steps, it is possible to deliver applications for the Apple TV and Android TV.
Now, lets dive into some benefits of React Native:
Now let's take a look at the issues we've encountered as below:
This often leads to breaking changes in tools and dependencies between versions. But hey, Gmail was almost 5 years in beta and it worked pretty well.
Both allow developers to build mobile applications that can run on different platforms and use JavaScript as the principal language. However, Ionic's approach is more "web-like". This means that the application runs on a web browser wrapped in an SDK, to access the native functionalities.
React Native uses three bridges, UI Thread, Layout Thread, and Javascript Virtual Machine, to trade information by sending messages to each one.
It uses the JavaScript language to map the native capabilities. This allows developers to build mobile applications that are then translated into native code. On the other hand, the Ionic Framework uses web technologies (HTML, CSS, and JavaScript) to build the applications. It is possible to use Ionic Native and/or Capacitator to connect JavaScript and native abilities like accessing the user location, Bluetooth, camera, etc.
Ionic and React Native also have a different technology stack. With Ionic, developers are building one application on top of the browser, and have the ability to use all the npm packages available to React.js.
React Native has a more restricted stack since the code is translated to native code. Despite this, the React Native community is very large, with lots of ready to use libraries that help the mobile application development.
Since Ionic works with web technologies (HTML, CSS, and JavaScript) it fits well in a team that has no background in the native world.
With Ionic, you will have the capability to make great mobile applications, accessing native features like GPS, maps, or audio. These features are ready to be deployed into both Play Store and App Store, with the same effort and expertise that will require to build a web site.
React Native is easily addressed by developers with prior iOS or Android development knowledge. The learning curve for a React developer to understand and debug a React Native application is higher than with Ionic. However, React Native stands with the golden triumph of accessing the native functionalities of the mobile devices, allowing your mobile application to deliver a more native look and feel.
Javascript developer since 2016, I've built mobile apps using Ionic and React Native. Guitar player and cooking lover.
People who read this post, also found these interesting:
.png)
