Building TopVault: Reflections on using Ionic
Teddy ReedTL;DR, the Ionic UI Framework was a good choice! If I had to choose again, I’d pick Ionic again.
Intro and context
The context is that TopVault is a mobile-first experience that should also be available in-browser. This makes sharing content with others simple and gives users a lot of flexibility. TopVault is an app for collectors, like Pokémon Card collectors, to gamify their collecting and record details about their progress on collecting goals. To make this work well, TopVault needs a large database of reference content, similar to an encyclopedia of collectibles. I am a single developer building the end-to-end solution, so from a technical perspective, TopVault should be write-once-deploy-everywhere. In this case, “everywhere” means iOS, Android, and browsers.
Extracting a few of the requirements relative to selecting a UI framework like Ionic
Should be suitable for building reference-type applications.
Should be mobile first, while not necessarily being mobile native.
Need for write-once-deploy-everywhere
Additional requirements based on my personal situation. I lack experience with native mobile development but have prior experience with React and web technologies.
Quick note on Ionic
One of Ionic’s strengths is that it just works. That is a great accomplishment and surely required a lot of work and care from the framework developers. A large part of this is due to good documentation for all of the UI components, the high quality guides, and developer discussion forums. Ionic has also been around for a while, and various JavaScript projects have built specific integrations for Ionic to make usage simpler.
Ionic can be used with React, Angular, Vue, or no specific framework. And for all of React’s quirkiness, it ends up working well with Ionic. I choose to implement interactions with TopVault’s backend API using react-query. And encapsulated the complexity of query and mutation definitions within React contexts.
Unfortunately, for all of Ionic’s great documentation, including great documentation on React, the community has fewer React developers so extended examples are lacking.
Remaining limitations
When dealing with the many challenges expected when developing a complete mobile app, there were solutions to all but a handful.
Limitations with SPA and OpenGraph tags
For the web deployment: The nature of a single-page-app (SPA) means it needs JavaScript to know what page should be rendered. This makes it challenging to have SEO metadata or share metadata like OpenGraph tags. Google search does the right thing, but longer term the lack of general compatibility may need a different approach. I have no solution for this yet but there is plenty to explore like this example using cloud functions.
Inability to shrink Mobile Safari URL bar
Again for the web deployment: Scrolling on Mobile Safari has unexpected behavior where the bottom URL bar does not shrink on scroll. This results in smaller interaction area for the app since the URL bar takes a non-trivial part of the screen.
In the image above, you can see how much screen is taken for the address bar.
It does not shrink as expected because the Ionic ion-page scroll container is an element within <body>, and not <html> or <body> itself. And workarounds that worked a few years ago, to send scroll events to <body>, or change the offset to 1, no longer work. There is good reason why the URL bar should not be manipulated by JavaScript/etc. For example, unscrupulous websites could use this to hide their origin and trick users.
In a follow-up post I will go over a workaround using an UI experience that shrinks the Ionic ion-header and ion-tab-bar. The large URL bar remains, but more space is given to the scroll content area.
Text-only support for ion-select-option
The general option-select UI interaction is very common, either choosing a single selection or multiple selections. Ionic does a great job of making this mobile-native and providing multiple “interfaces” for the selection. In each of these interfaces the only content displayed per-option is simple text.
In the image above, on the left shows a rich selection; on the right shows the text-only selection option.
This means that additional information like flavor-text, icons, or other details for a selection option cannot be shown. This creates a divergent behavior in TopVault for selecting the type of collectibles, like Magic the Gathering, or Pokémon Cards. The first interaction uses an ion-popover with ion-items to show each selection, its support status and a recognizable icon. Then subsequent interactions to change the collection type only show the title of the type.
Subscribe to my newsletter
Read articles from Teddy Reed directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by