← Back to Frameworks

Ionic

mobile-developmentcross-platformProgressive-Web-AppsAngularReactVueCapacitor

Mobile Platform

Ionic

Overview

Ionic is a powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps (PWA) using HTML, CSS, and JavaScript. Since its release in 2013, it has democratized mobile app development, enabling developers to build high-quality mobile applications using web technologies. It integrates seamlessly with popular frameworks like Angular, React, and Vue, and provides access to native features through Capacitor.

Details

Ionic is an open-source framework that provides a mobile-first design system and UI component library. It automatically applies platform-specific styling that complies with Material Design and iOS Human Interface Guidelines, achieving a native look and feel on each platform.

Key features include over 100 high-quality UI components, a theming system, gesture support, animations, and accessibility features. Built on Web Components, Ionic offers the flexibility to be used with any framework.

Capacitor, developed by the Ionic team, is positioned as the successor to Cordova. It provides access to native APIs such as camera, GPS, and file system, while also supporting Progressive Web Application features.

The development environment includes the Ionic CLI, which streamlines the entire workflow from project creation to development server startup, building, and deployment. Ionic Studio, a visual development environment, is also available for building UIs through drag-and-drop.

For enterprise use, Ionic Appflow provides a cloud-based app delivery platform with features like CI/CD, live updates, and automated deployment to app stores.

Pros and Cons

Pros

  • Web technology development: Developable with HTML, CSS, and JavaScript knowledge, gentle learning curve
  • True cross-platform: Build iOS, Android, PWA, and desktop apps from a single codebase
  • Rich UI components: Over 100 pre-built components accelerate development
  • Framework agnostic: Usable with Angular, React, Vue, or plain JavaScript
  • Native appearance: Automatically adapts to each platform's design guidelines
  • Capacitor ecosystem: Modern native runtime and plugin ecosystem
  • Active community: Large community and extensive documentation
  • Enterprise support: Commercial support and tools available

Cons

  • Performance limitations: May lag behind native apps in complex animations and graphics processing
  • Native feature limitations: Latest native API access may require plugin development
  • App size: Tends to be larger than native apps due to WebView inclusion
  • Platform-specific adjustments: Additional customization needed for perfect native experience
  • Debugging complexity: Requires debugging both native and web layers
  • Update dependencies: Platform update support may take time
  • Advanced graphics: Not suitable for 3D games or advanced graphics processing

Reference Pages

Code Examples

Basic Project Setup

# Install Ionic CLI
npm install -g @ionic/cli

# Create new Ionic project (Angular)
ionic start myApp tabs --type=angular --capacitor

# React version
ionic start myApp tabs --type=react --capacitor

# Vue version
ionic start myApp tabs --type=vue --capacitor

# Start development server
cd myApp
ionic serve

Basic Page Structure

<!-- Angular/HTML version -->
<ion-header>
  <ion-toolbar>
    <ion-title>My App</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label>Item 1</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Item 2</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Item 3</ion-label>
    </ion-item>
  </ion-list>
  
  <ion-button expand="block" (click)="doSomething()">
    Click Me
  </ion-button>
</ion-content>

Responsive Grid Layout

<ion-grid fixed>
  <ion-row>
    <ion-col size="12" size-sm="6" size-md="4" size-lg="3">
      <ion-card>
        <ion-card-header>
          <ion-card-title>Card 1</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          Responsive card layout
        </ion-card-content>
      </ion-card>
    </ion-col>
    <ion-col size="12" size-sm="6" size-md="4" size-lg="3">
      <ion-card>
        <ion-card-header>
          <ion-card-title>Card 2</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          Layout adjusts to screen size
        </ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>

React Component Example

import React, { useState } from 'react';
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonList,
  IonItem,
  IonLabel,
  IonButton,
  IonInput,
  IonToast
} from '@ionic/react';

const HomePage: React.FC = () => {
  const [name, setName] = useState<string>('');
  const [showToast, setShowToast] = useState(false);

  const handleSubmit = () => {
    if (name) {
      setShowToast(true);
    }
  };

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Home</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonList>
          <IonItem>
            <IonLabel position="floating">Your Name</IonLabel>
            <IonInput
              value={name}
              onIonChange={e => setName(e.detail.value!)}
              clearInput
            />
          </IonItem>
        </IonList>
        
        <IonButton 
          expand="block" 
          onClick={handleSubmit}
          style={{ margin: '16px' }}
        >
          Submit
        </IonButton>
        
        <IonToast
          isOpen={showToast}
          onDidDismiss={() => setShowToast(false)}
          message={`Hello, ${name}!`}
          duration={2000}
        />
      </IonContent>
    </IonPage>
  );
};

export default HomePage;

Native Features with Capacitor

import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
import { Geolocation } from '@capacitor/geolocation';
import { Storage } from '@capacitor/storage';

// Using the camera
async function takePicture() {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri,
    source: CameraSource.Camera
  });
  
  // Get image URI
  const imageUrl = image.webPath;
  return imageUrl;
}

// Getting location
async function getCurrentPosition() {
  const coordinates = await Geolocation.getCurrentPosition();
  console.log('Current position:', coordinates.coords.latitude, coordinates.coords.longitude);
  return coordinates;
}

// Using local storage
async function saveData(key: string, value: any) {
  await Storage.set({
    key: key,
    value: JSON.stringify(value)
  });
}

async function getData(key: string) {
  const { value } = await Storage.get({ key: key });
  return value ? JSON.parse(value) : null;
}

Modals and Navigation

// Angular version
import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { DetailModalComponent } from './detail-modal.component';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html'
})
export class HomePage {
  constructor(private modalController: ModalController) {}

  async presentModal() {
    const modal = await this.modalController.create({
      component: DetailModalComponent,
      componentProps: {
        'firstName': 'John',
        'lastName': 'Doe'
      }
    });
    
    modal.onDidDismiss().then((data) => {
      console.log('Modal dismissed:', data);
    });
    
    return await modal.present();
  }
}

// Modal component
@Component({
  selector: 'app-detail-modal',
  template: `
    <ion-header>
      <ion-toolbar>
        <ion-title>Details</ion-title>
        <ion-buttons slot="end">
          <ion-button (click)="dismiss()">Close</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <p>Details for {{firstName}} {{lastName}}</p>
    </ion-content>
  `
})
export class DetailModalComponent {
  @Input() firstName: string;
  @Input() lastName: string;

  constructor(private modalController: ModalController) {}

  dismiss() {
    this.modalController.dismiss({
      'dismissed': true
    });
  }
}

Platform-Specific Code

import { Platform } from '@ionic/angular';

export class AppComponent {
  constructor(private platform: Platform) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Platform detection
      if (this.platform.is('ios')) {
        console.log('Running on iOS');
        // iOS-specific code
      } else if (this.platform.is('android')) {
        console.log('Running on Android');
        // Android-specific code
      } else if (this.platform.is('desktop')) {
        console.log('Running on Desktop');
        // Desktop-specific code
      }
      
      // Get device info
      console.log('Width:', this.platform.width());
      console.log('Height:', this.platform.height());
      console.log('Portrait:', this.platform.isPortrait());
    });
  }
}