Converting web apps into hybrid mobile apps
Problem
You are working in a (long running) project for a client, in which a PWA is created that should be especially suitable for mobile devices. For reasons that no one really knows anymore, only Angular had been used for that. But you have slowly been realizing that the existing tech stack is reaching its limits and that one or the other requirement could be fulfilled more easily with a native app. No worries, there is a way to preserve the work already done.
Solution
Ionic to the rescue! Even though Flutter is currently on the rise in cross-platform development, Ionic is the winner in this case. Unlike Flutter, Ionic relies on established web frameworks and makes them executable natively. You can therefore adopt a large part of the previous code and do not have to start all over again. In the following example, I would like to show you how Ionic enables the transition from a pure PWA to a hybrid app.
Example
# A new Angular app is created, but you take yours, of course:
ng new ionic-app --routing
cd ionic-app
# Adding Ionic dependencies to the app:
ng add @ionic/angular
# Generating an Ionic-specific setup:
npm install -g @ionic/cli
ionic init ionic-app --type=angular# Building the source project:
ng build
# Opening the app in target IDEs:
ionic capacitor run android --project=ionic-app
ionic capacitor run ios --project=ionic-app
Further Aspects
- No Angular app? No problem! Ionic also supports React and Vue!
- You want to access smartphone hardware? Capacitor plugins make it possible!
- Ionic also comes with a rich set of components styling themselves depending on the target platform.
- You think React Native is better for your project? Find it out!
---
Author: Daniel Schröpfer / Software Engineer / New Business
Download Toilet Paper #146: Converting web apps into hybrid mobile apps (PDF)
Want to write the next ToiletPaper? Apply at jambit!
