News

How we developed Safe For Work with Ionic+React

“Out of adversity comes opportunity” as the quote goes, and the COVID-19 lockdown in the UK was a great example for us here at Filter to put this into practice.

Desk

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 realised that in order for us to get back into London, we’d want to be confident that our staff weren’t ill when they turned up for work, and so we created a prototype app called Safe For Work, where we could ask everyone to complete a short form each day to confirm they had no symptoms.
 
As a greenfield project, and with ourselves as clients, we had the freedom to make our own decisions about the platform we chose to develop it on, which is a luxury we don’t always have.

Office Worker
Office

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.

Code

Pros


  • 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


Cons


  • 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


Challenges


  • 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


Office Workers

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.

Safe For Work For You


Safe For Work, is free to download and has been designed to compliment safeguarding measures already in place within businesses, offering employers and employees extra peace of mind.

If you are interested to learn more
 
VISIT OUR DEDICATED SAFE FOR WORK WEBSITE

See-who-is-safe

Built by our Filter Labs function, we work on several custom products to stretch our knowledge and to provide answers to our naturally inquisitive side.

Safe For Work For You


Safe For Work, is free to download and has been designed to compliment safeguarding measures already in place within businesses, offering employers and employees extra peace of mind.

If you are interested to learn more
 
VISIT OUR DEDICATED SAFE FOR WORK WEBSITE

More News