Over the last few months, we've been working with the Women's Brain Health Initiative (WBHI) to develop a new mobile app. The Toronto-based charitable organization is dedicated to protecting women's brain health by supporting research to combat brain-aging disorders that disproportionately affect women, including dementia and Alzheimer's.
WBHI wanted a mobile app that could use science-backed tactics to help improve women's brain health and promote its mission.
One of the app's design goals was to look, feel, and flow the same across iOS, Android, and the web. We've built cross-platform apps before, but this project presented a new challenge. Our client wanted the apps to use Apple's UIKit look-and-feel across all three platforms. It was an exciting opportunity to push our skills even further to deliver a cross-platform app with near-native speed that looked the same no matter what smartphone the user had.
One code base to rule them all
We've built mobile apps for almost every type of business—from insurance to healthcare to education. In today's mobile-first world, customers expect to interact with your service from the comfort of wherever they happen to be with their smartphone.
Building a mobile app is a complex process that includes design, development, testing, and app store management. It's not just one app, either. Since there are two competing mobile platforms, this work has to be done for iOS and Android devices.
For app developers like ourselves, the dream has always been to have one code base for all platforms. Over the years, various development tools have claimed to deliver this—but for most high-performance use cases, native application development has been the way to go.
That was until the release of Ionic Capacitor, an open-source framework for building cross-platform iOS, Android, and Progressive Web Apps using JavaScript, HTML, and CSS. Capacitor was the right choice for the client's requirements, and our team started the development work. But this is where it gets interesting.
Cross-platform with iOS look-and-feel
The requirement that components and functionality look iOS native is an interesting one. Many components don't have equivalent functionality on the web or Android.
We were able to provide a consistent look and feel across Android and iOS.For example, iOS UiKit provides a parallax animation when a modal dialogue appears on the screen. We needed a way to provide iOS UiKit emulation without affecting performance and make it compatible so it can run everywhere.
Our approach was to create iOS native-like components in pure React Javascript that could be deployed across all three platforms in the Capacitor-built app.
Creating a new library
The development team started by looking at the iOS UiKit components we needed and figuring out how to implement those components in React. They needed to be as close to iOS native as possible while being built with JavaScript at their core.
Before we started creating our library, we looked at a few open-source libraries offering similar functionality. While many were well made, we needed to find one to deliver the required speed and experience.
We decided to create our own React JavaScript components to ensure that we delivered the right look with the expected performance.
UiKit like animations built with React JavascriptDelivering content natively
Another critical component of the app is educational content researchers supported by the Women’s Brain Health Initiative. Instead of serving embedded web pages of the content, we worked with the Contentful team to use their APIs and SDK to deliver the content natively in the app.
Contentful allowed us to easily manage and integrate the editorial content and podcasts within the BrainFit app. The best part is that Contentful provides an interface for the Women’s Brain Health Initiative’s content team to easily add new information to keep the app new and engaging for its users.
What did we learn?
New technologies and frameworks like Capacitor are rapidly narrowing the gap between cross-platform applications and their native counterparts. With some creative thinking and research, our team was able to develop a strong cross-platform mobile experience with a single codebase.
We're excited about the finished app on iOS and Android. Building a high-performance, cross-platform app with a native iOS feel was a challenge—but we knew we had the team depth to bring it to life.
BrainFit - Free Habit Tracker is available today on the Apple App Store and the Google Play store.
