How we developed Safe For Work with Ionic+React

During the early stages of the pandemic, as we were learning more about COVID-19, we spent time considering the impact on both our own working environments and how others might be affected.

Over the past couple of years, we have been gravitating to remote working with Filter employees now working out of Edinburgh and Amsterdam, but still retained our office space at WeWork in Soho.

We knew that we want to spin up a POC quickly, and that we also wanted to use it as an opportunity to extend our own knowledge, so we quickly settled on using the Ionic Framework with React.

Typically, we use React Native for app development and used both React and Vue in our website builds. The move from Ionic to add front-end libraries such as React to their core framework, as well as their recent upgrades to CapacitorJS, meant that we could now try it out (we’ve avoided using Angular, so until React came along we hadn’t made the jump).

Of course, we’re old enough and experienced enough to know that you never really know a framework until you have developed with it for long enough to uncover what frustrates you about it.

However, despite the challenges we’ve faced over the past 6 months since we first picked it up, I’m happy to report that the overall we’ve had a positive experience.

Although this post isn’t designed to be a comparison or deep dive into the what is good or bad about Ionic, I do at least want to give high-level pros and cons and mention a couple of the gotchas that we noticed along the way.

• Ionic is more prescriptive out of the box than React Native, but the benefit is the initial speed to delivery, especially for POCs
• Prebuilt components are decent, and easily extendable/themeable
• If you already know React (or Vue), then building your own components and adding them into Ionic is a breeze
• Using Capacitor in place of Cordova is a major leap forward
• Appflow is a great alternative to MS Appcenter and a timesaver in terms of automated builds that are deployed directly to Test Flight / Play Console

• Pace of development on the framework is fast (this is a pro as well), but not all new features seem fully tested; a recent router replacement in 5.3 caused us problems on upgrade
• Not all libraries support Capacitor yet, which limits using existing packages (we needed to use an unofficial Sign in with Apple library for instance)
• AppFlow build failures were difficult to diagnose, but support was available
• The live updates process feels a little flaky in real world usage

• Lack of community support for Ionic + React – there are a wide range of Ionic + Angular articles and tutorials, but far less for React; this is probably due to it being recently released and Ionic tying themselves to Angular previously
• Deeplinks and invites into the app were key to allowing users to connect with an existing company, but we faced problems with the PWA when service workers were turned on

Overall, the last 6 months of using Ionic + React, and Capacitor, have been a great experience. Our Safe For Work app is now live in both the App Store / Play Store and is already being piloted by care homes and businesses that want to check on the health of their employees before they come into work.

We’ve fully integrated Firebase Authentication, Cloud Store and Notifications, and are currently working on new features related to geolocation and QR codes. In addition to that, we’ve automated our CI/CD process to the stores via AppFlow and reduced our time to release to the point where we can comfortably push a new update out daily.

To return to the quote I started with “Out of adversity comes opportunity”, I think we’ve proved that it’s true – despite the lockdown, and the pandemic, we’ve grown in experience and knowledge and found a new platform that we will be using much more in the future.