Ionic: what it is, framework architecture and hybrid app development

What is Ionic?

Ionic is an open-source platform for creating cross-platform applications using HTML, CSS and JavaScript. The project was launched in 2013 by Drifty Co. and has since evolved from a jQuery Mobile wrapper to a full-fledged framework with support for Angular, React and Vue.

The main idea of Ionic is to allow developers who know the web stack to create mobile applications without learning Java, Kotlin or Swift. At the same time, the application's appearance is as close to native as possible thanks to ready-made components styled with Material Design and iOS Human Interface Guidelines.

According to Statista for 2024, Ionic holds about 17% of the cross-platform framework market, trailing Flutter and React Native but ahead of Cordova and Xamarin. The framework is chosen by startups and companies that value development speed and the ability to reuse code across platforms.

Ionic architecture: WebView, Capacitor and plugins

The Ionic architecture is built on three layers: WebView for rendering the interface, Capacitor for the bridge between JavaScript and native code, and a plugin system for accessing device hardware capabilities.

The role of WebView in Ionic

WebView is a native operating system component that displays a web page inside an application. Ionic uses WKWebView on iOS and Android System WebView on Android. The framework loads a single-page application (SPA) built with Angular, React or Vue into the WebView, which constitutes the user interface.

According to the Google Chrome Team (2024), modern WebViews support all ES2023 features, CSS Grid, Flexbox and WebGL, allowing the creation of complex interfaces without performance loss in everyday scenarios.

Capacitor as an abstraction layer

Capacitor is a native runtime from the Ionic team that replaced Cordova. It provides a unified JavaScript API for calling native device functions: camera, geolocation, accelerometer, file system and biometrics.

Unlike Cordova, Capacitor does not use a custom URL protocol for the bridge — it works directly through the JavaScript Bridge built into the WebView. This provides a performance increase of up to 30% with frequent native API calls, as shown in Ionic Team tests (2024).

Plugin system

Plugins in Capacitor are native libraries in Swift and Kotlin that register at runtime and become accessible from JavaScript. The built-in set includes more than 40 plugins for camera, geolocation, notifications, storage and network.

Developers can write their own plugin if the standard functionality is insufficient. To do this, a class is created that inherits from CapacitorPlugin, with methods annotated with @PluginMethod. The plugin is automatically compiled for both platforms.

Ionic vs native frameworks

When choosing between Ionic and native tools, it is important to understand that Ionic does not compete with SwiftUI or Jetpack Compose in animation performance and complex graphics, but it wins in development speed and the amount of reusable code.

For applications with intensive graphics, custom animations or AR features, native tools are preferable. For CRUD applications, e-commerce stores and corporate portals, Ionic provides sufficient performance at significantly lower development costs.

Backlinko (2025) notes that hybrid applications on Ionic load on average 15–20% slower than native ones at startup, but in everyday usage scenarios the difference becomes unnoticeable to the user.

Code examples on Ionic with Angular

Let's look at the basic structure of an Ionic application in Angular. The code below demonstrates creating a page with a list and navigation.

import { Component } from '@angular/core';
import { IonContent, IonList, IonItem } from '@ionic/angular/standalone';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [IonContent, IonList, IonItem],
  template: `
    <ion-content>
      <ion-list>
        <ion-item *ngFor="let item of items">
          {{ item.name }}
        </ion-item>
      </ion-list>
    </ion-content>
  `
})
export class HomePage {
  items = [{ name: 'First element' }, { name: 'Second element' }];
}

In this example, the component uses Angular 17+ standalone API, which simplifies the build and reduces bundle size. The *ngFor directive renders a list of items, and IonItem automatically styles each item for the platform.

To access the camera via Capacitor, the following pattern with native plugin import and permission handling is used:

import { Camera, CameraResultType } from '@capacitor/camera';

async takePhoto() {
  const image = await Camera.getPhoto({
    resultType: CameraResultType.DataUrl,
    quality: 90
  });
  this.photo = image.dataUrl;
}

The getPhoto method automatically requests camera access permission — no separate code for permissions is required. Capacitor handles user consent at the platform level and returns the photo in base64 or file URL format.

UI components and theming in Ionic

Ionic provides over 50 ready-made UI components that adapt to the user's platform. The same IonButton looks like an Apple system button on iOS and a Material Design button on Android, without changing the code.

Adaptive styles and theming

Each Ionic component responds to CSS variables defined in the global theme. Developers can override colors, border radii, padding and fonts through variables like --ion-color-primary, --ion-border-radius and others.

According to the Ionic Framework Docs (2025), full theme customization requires changing only 6 CSS variables corresponding to the main brand colors. The remaining components inherit values automatically.

:root {
  --ion-color-primary: #3880ff;
  --ion-color-secondary: #3dc2ff;
  --ion-border-radius: 12px;
  --ion-font-family: 'Inter', sans-serif;
}

Navigation and routing

Ionic uses its own IonRouter with stack-based navigation that mimics the behavior of native UINavigationController and FragmentManager. Page transition animations are fixed in CSS and do not require JavaScript code.

Routing is built through Angular Router with additional IonNavLink for animated transitions. Support for Tabs and side menu (Menu) is built into the framework and configured declaratively.

Building and publishing an Ionic application

The build process of an Ionic application includes three stages: compiling web resources, generating a native shell via Capacitor, and building into APK/IPA using Xcode or Android Studio. Ionic CLI automates all steps with a single command: ionic build && npx cap sync.

Capacitor creates separate projects for iOS and Android in the ios/ and android/ folders. Developers can open them in Xcode or Android Studio for final build, adding custom plugins or configuring App Store-specific parameters.

For publishing on Google Play and the App Store, standard platform tools are used. Ionic does not impose restrictions on application size or API usage — the final build is a full mobile application with a native wrapper. Each build goes through standard Xcode and Android Studio pipelines, ensuring compatibility with app store policies.

The release process includes signing the binary file with developer certificates and configuring metadata in the store. Fastlane is a popular tool for automating Ionic application deployment, supporting all stages from testing to publishing.

• Live Reload — code changes are instantly reflected on the device via ionic serve --lab
• Ionic Appflow — a cloud service for CI/CD with automatic build and deployment
• Capacitor Sync — synchronizes web resources with native projects without manual copying