Mobile Apps Using React/Ionic

I wanted to learn mobile development to make TreePad Cloud available on iOS and Android. As a React.js programmer, I chose to use Ionic instead of React Native.

Thanks to Ionic, in less than two weeks, I've already programmed numerous mobile apps, and already added an app to the Apple store. If you know how to program React.js, you can create your first mobile app... today.

The first thing that I like about Ionic is that the tags are intuitive for any HTML programmer. For example, in HTML we use <input>, <textarea>, and <button>. With vanilla ionic, you simply add 'ion' in front of the tags and all the mobile UI styling is done for you: <ion-input>, <ion-textarea>, and <ion-button> for example. Ionic also runs on React, Angular, and Vue. For React, simply use Pascal case notation for the tags and you're good to go! For example, <IonInput>, <IonTextarea>, and <IonButton>. It's really that simple.

The second thing I like about Ionic is that it automatically converts the UI elements to emulate the native experience of the target device. For example, sliders look different on iOS and Android, and Ionic automatically styles the sliders for the devices. One line of code produces different results when run on iOS and Android. Nice!

The third thing I like about Ionic is the performance. In fact, if Ionic did not have great performance then that would be a dealbreaker in itself. In a recent side-by-side test against React Native, where React Native was trying to consume 200% of the CPU, Ionic was only consuming 10% of the CPU. The way Ionic achieves this is two-fold. First, the Ionic team developed their own conversion program called Capacitor — the program that converts HTML, CSS, and Javascript. Second, Ionic apps always run with a JIT (Just In Time) engine. Apps that use JavaScriptCore or Hermes, such as React Native, do not have access to a JIT engine.

Please don't get me wrong, I look forward to mastering React Native as well. It is an extremely popular, highly effective framework for cross-platform mobile app development. Just as I look forward to doing deep dives into Angular and Vue, so too I relish exploring React Native and Flutter as well. One cannot have enough toys in the playground!

However, to my fellow BrainStation Web Dev alumni, if you want to instantly convert your React.js skills into native-looking, highly performant, mobile apps then I highly recommend that you take a look at Ionic. If you have any questions, please let me know. I'd be happy to help you get started.

As for my own personal journey, thanks to Ionic, I am now developing the mobile versions of TreePad Cloud.