My first Ionic Capacitor App

January 29, 2020

I have been working on my first Ionic app and now that I’m on the tale end of the app, we’re getting ready to launch the first version into the app store. Now's a good time to write some thoughts about Ionic and what I learned.

When I first heard about Ionic years ago, I had a bad impression about it because the last cross platform app I built was with Xamarin and it was a nightmare. I had to use two computers, a PC to do the development, and a Mac to build the iOS app. The build and local development setup was slow and riddled with complications.

I thought that this was the nature of all cross platform development. Ionic, seemed like it was going to be similar.

Fast forward to end of 2019, and I’m developing an Ionic app with Angular and using their new platform called Capacitor for building the iOS and Android app. Capacitor replaces Ionic Cordova.

What I liked

I love how Ionic has a lot of built in components that give the app a native feel. Similar to how React Native has components in the React Native library.

Using Capacitor, the app is split into three parts, web, android, iOS. You do most of your development work in Web just like a regular Angular app but you have folders containing the iOS and Android app, where you can write native code if you wanted to. For example, I was able to write a swift function in the iOS project to update the app icon badge. Then I imported that function into the Angular app and invoked it.

I can develop most of the app in the browser as a progressive web app (PWA) with hot reloading, and then compile it in iOS and Android when I needed to. I felt like this decreased development time by a lot.

Building the iOS and Android apps are simple. Capacitor has built in command line tools that will automatically copy the code from the Angular app into the iOS and Android apps.

What I didn’t like

There’s a lack of options for configuring different environments. As of this writing I can only have one capacitor.config file. So I had to manually replace it using the cp command for each build. Something like the Angular environments files would be nice to have.

{% c-line %}cp capacitor-config/capacitor.config.local.json capacitor.config.json{% c-line-end %}

In the above snippet you can see I put all my config files in a folder called `capacitor-config` and I copy it over the config file in the root, which then gets copied into the iOS and Android projects. This script is inside a NPM build script inside my package.json file.

For a newbie, setting up different environments (e.g. dev, staging, production) in iOS and Android was fairly confusing to work with. I got an initial configuration working but the way I did it ended up being wrong for Android and it had to be fixed later. This probably doesn’t have anything to do with Ionic since it's iOS and Android specific, but it was one of the most confusing parts of the project in my opinion.

This has nothing to do with Ionic again, but backend was a little trouble too. We were building out our own backend infrastructure, deploying to our own hosted server. The app was a legacy one, and it came with it’s own authentication system. It was a hassle to manage it and deployments would break sometimes and the server required separate configuration. If I was building the app from scratch I would definitely choose backend as a service services like AWS Amplify or Firebase. We ended up switching authentication to Firebase. But I’d go full serverless next time.

Overall building an app with Ionic was pretty exciting. Exciting enough that I’m considering specializing more into Ionic development, and I would like to continue building a skillset around this area.