Cross-Platform Mobile App Development with Ionic
Ionic — framework for creating mobile applications on standard web technologies: HTML, CSS, TypeScript. Runs on top of Angular, React, or Vue. Native device access — via Capacitor (recommended) or deprecated Cordova. Suitable for teams with web background who need to release to App Store and Google Play without hiring separate iOS and Android developers.
When Ionic is a reasonable choice
Application focused on content and forms, not heavy graphics. Logic already written in TypeScript working in browser. Team knows Angular/React better than Swift or Kotlin. Application for b2b segment where custom animation isn't critical.
Ionic — not best choice for: games, apps with real-time video processing, apps requiring precise native UX (complex gestures, custom transitions like Instagram).
Project architecture
ionic start myApp tabs --type=angular
cd myApp
ionic capacitor add android
ionic capacitor add ios
Structure: standard Angular/React application with Ionic components. When building ionic build generates static web assets, Capacitor copies them to native WebView project.
Key Ionic UI components: IonTabs, IonModal, IonActionSheet, IonInfiniteScroll. Components automatically adapt to platform — IonButton looks different on iOS (borderless) and Android (Material), but this behavior can be controlled via mode="md" or mode="ios".
Native capabilities via Capacitor
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
import { Geolocation } from '@capacitor/geolocation';
import { PushNotifications } from '@capacitor/push-notifications';
// Photos
const photo = await Camera.getPhoto({
quality: 90,
allowEditing: false,
resultType: CameraResultType.Uri,
source: CameraSource.Camera
});
// Geolocation
const position = await Geolocation.getCurrentPosition({
enableHighAccuracy: true,
timeout: 10000
});
// Push notifications
await PushNotifications.requestPermissions();
await PushNotifications.register();
PushNotifications.addListener('registration', (token) => {
sendTokenToServer(token.value);
});
Official Capacitor plugins cover 90% of typical needs: Camera, Filesystem, Preferences, Network, StatusBar, Haptics, Browser, Clipboard. The rest — third-party npm plugins or custom native plugin in Kotlin/Swift.
Performance: reality
Ionic application runs in WKWebView (iOS) and WebView (Android). JavaScript code executes in browser engine. On modern devices (iPhone 12+, Pixel 6+) difference with native app is hard to notice. On budget Android (2 GB RAM, Android 10) — IonList with 500 items and complex markup starts lagging. ion-virtual-scroll (virtual scrolling) solves the problem for long lists.
For acceleration: ChangeDetectionStrategy.OnPush in Angular, memoization in React, lazy module loading via loadChildren or React.lazy.
Typical problems
Keyboard covers input on Android. Ionic uses its own scroll container inside WebView. IonContent scrollEvents + ionInput focus require proper keyboard-attach behavior. Solution via @capacitor/keyboard plugin and KeyboardResize.Body.
Slow cold start. WebView initializes on first run. On Android in production bundle adds ~300-500 ms to startup time compared to native app. Reduced via android:largeHeap="true" and Pre-warming WebView (available with Android 10).
App Store review. Apple doesn't mind Ionic apps but rejects by 4.2 Minimum Functionality if app is just a wrapper over mobile website. App must use at least one native feature (camera, push, geolocation) and provide value as an app.
Ionic app development: MVP with 5-8 screens — 4-8 weeks. Full b2b app with offline mode and push — 3-6 months. Cost calculated individually after requirements analysis.