Using React Ionic in production

Sem Postma, 4 May 2020 

Pros and cons of using React Ionic in production.

After long consideration between development frameworks like Xamarin, React Native and Flutter we finally decided to switch to using Ionic React.

Project Details

App Name

Healing App

Project duration

6 Months

Pros

Capacitor

Ionic 4 is shipped with capacitor. If you’ve ever hybrid react apps with cordova and monaco, taco, etc. You know how easy it can be to start and what a nightmare the end of the development lifecycle can become, not even mentioning integrating buggy cordova plugins. Capacitor comes shipped with a few default plugins which take care of most of your needs. No need to install cordova plugins to add a splash screen or a different color to your statusbar. If you want, you can still install cordova plugins using Ionic Native Plugins. It bassicly works like this:

npm install @ionic-native/javascript-package-name
npm install cordova-plugin-name
npx cap sync

Ionic Ecosystem

The Ionic framework is probably the best hybrid mobile app development framework out their. Ionic allows for easy theming and deployment. The ecosystem also includes the Ionic CLI, a command line program that will bootstrap your apps and provides development tools. You can also use Ionic Appflow for continuous deployment. Compared to frameworks like OnsenUI, Ionic provides a lot more, not only styling and visual components but a complete solution for hybrid app development. 

Stability

Compared to projects like React Native and cordova/monaca, Ionic React is a very stable framework. Instead of over abstracting Ionic doesn’t try to get in your way, which really is a saver once you start building more complex apps. 

DOM

One of the most important benefits of building with Ionic React is being able to use the DOM, the most power full user interface that comes built-in on virtually all devices. Though g great knowledge of web technologies and platform differences is definitely required to make this a pro and not a con. Naturally, another benefit of using the DOM is only having to target one execution environment.  

Live reload & Debugging inside the browser

Live reload comes enabled by default when using Ionic, this will save you a lot of development time. Also not having to debug on a virtual machine is a big advantage.

Cons

Performance

A lot of people seem to have performance issues using Ionic-React, after doing some performance debugging using chrome it seems that a lot of Ionic React components are fairly heavyweight components. Some speculate React doesn’t play nicely with the new Ionic 4 Web Components (Shadow DOM). Of course performance will always be a very important consideration when building hybrid apps. When building very performance critical apps on low end devices with lots of animation, going native is probably a better idea. 

Community Adoption

Unfortunately Ionic-React has not seen the widespread adoption that projects like React Native have. Although I have personally not run into many issues, it can sometimes be difficult to find solutions to problems online.

Thank you for reading!