Why I still prefer Ionic to React Native
There is a lot of discourse on which is the best JavaScript framework, where React, Angular and Vue.js are the main competitors. In the field of hybrid mobile apps development, particularly for iOS and Android, there is a similar battle between Cordova Application and React Native. Former is basically a Web App that is run in Web View, wrapped in an native application. It displays HTML and CSS visual components and executes JavaScript code in the targeted platform browser engine. The latter, as explained in this blog, is running JavaScript engine in addition to the main native thread. While JavaScript is responsible for the business logic of the application and defines the structure and the functionalities of the user interface, the actual visual elements are native UI components.
To be clear, personally I am working professionally with Cordova (previously PhoneGap), Angular and Ionic for more than eight years now while I have devoted some time to actually try out React and React Native only in the last year or so — this article is not aiming to be the objective comparison between the two, I would only like to state my observations and perhaps get some feedback from more experienced React and React Native developers.
Cordova applications have at least one great benefit — the same code-base can be used for web applications, usually with some styling modifications. Additionally, progressive web applications (PWA) as a completely web-based alternative to native apps — with easier distribution and instant updates. However, I believe it is more or less common consent that React is the more widely used framework than Angular and React Native provides a much more native-like experience than any Cordova application. These facts have lead me to explore the two in more detail by myself. Coming from the Ionic world, I had some high hopes in the areas that have troubled me the most in the past, such as using plugins (accessing native functionality), styling (CSS) differences between platforms and smoothness of the UI transitions.
After some research and experimentation, I am left with a mixed bag of feelings and perhaps because I work at a small company that produces mainly business mobile and web applications and where few people have to maintain existing and develop new applications, for now I am choosing to stick with Cordova and Ionic. And also because I love working with Ionic framework and I admire the team’s passion and dedication to constantly improve the technology.
Development environment and build scripts
This is mostly based on my personal experience and I must say that I am not experienced enough to make an objective comparison. However, I enjoy using Typescript — it makes JavaScript code more readable and easier to refactor. Additionally I prefer HTML templates over JSX — it seems more manageable to me.
Based on Webpack, ionic cli and ionic app scripts offer great developer experience. Out-of-the-box live-reloading development server, compiling SCSS to CSS, automatically prefixing CSS properties, compiling ES6 an newer to ES5 for older browsers, JavaScript and CSS minimisation and compression and much more … You can start developing and deploy your first application to mobile device really quickly, with minimum required configuration.
Debugging tools
In my opinion, this is the biggest advantage of Cordova applications development over React Native ones. Chrome Developer Tools enable debugging both visual components and JavaScript code. It is easy to inspect every single UI element in run time and instantly try out different adjustments. This can be done either on the test web server with simulating various devices resolutions, or on the connected actual mobile device (both iOS and Android).
Reloading on test web server is almost instant — the best development experience I have ever seen.
React Native StyleSheet vs CSS
In several years of web development I have become quite fluent in CSS and when I see static designs I immediately start thinking about underlying CSS and classes and properties. With SCSS things got even better, with nesting, variables, mixing etc. Browser specific prefixes are a thing of a past (with great tools, such as autoprefixer). Development of CSS styles is simple and effective — you can easily inspect every aspect of your application design in Chrome Developer tools — where you can easily resize the app, measure every single component and even update the styles in real time. Awesome!
In comparison, React Native style and StyleSheet are less reusable (React Native encourages components reuse instead of styles reuse) but more programmable. Probably takes some time, to get used to :).
Native code
Using Cordova Plugins to access native functionality on iOS and Android can be a nightmare. Few unofficial plugins are well maintained and a lot of problems arise when you are trying to combine different plugins that use different versions of the same platform dependency (e.g. Google Play Services). Because otherwise great out-of-the-box configuration tries to hide platform-specific configuration from the developer, these situations can be very frustrating.
Easier and more stable use of native functionality was my greatest motivator to try-out the React Native. Unfortunately I discovered that situation is not mush better here — quickly evolving React Native platform can cause simple React Native Link installation to fail and I had to resort to manual installation as well. And even then — with a plugin that looks exemplary maintained — I was not able to get it to work either on iOS or Android.
My hope for the future now lies in Capacitor — Ionic Team project that aims to improve on Cordova Plugins mechanism.
I can confirm that developing Angular and Ionic apps has really become enjoyable in the last years. I believe React and React Native offer a similar experience and you probably can not go wrong with either.
