Chapter 1 of 12 ~15 min read

Introduction & Why Migrate

From Apache Cordova to Ionic with Capacitor — what changed, what got better, and what you already know.

Is Cordova dead?

Apache Cordova isn't officially dead, but active development has significantly slowed. Ionic itself officially switched from Cordova to Capacitor as their recommended runtime. The ecosystem has moved on — major plugins are no longer maintained for Cordova. Capacitor is the clear future.

The Architecture Difference

Cordova Architecture

┌─────────────────────────────┐
│       WebView (HTML/JS)     │
├─────────────────────────────┤
│   Cordova JS Bridge         │
│   (exec() over string msgs) │
├─────────────────────────────┤
│ Plugin System (config.xml)  │
│ – Heavy plugin.xml overhead │
│ – No direct IDE access      │
│ – hooks/scripts for builds  │
├─────────────────────────────┤
│ Android APK / iOS IPA       │
└─────────────────────────────┘

Capacitor Architecture

┌─────────────────────────────┐
│       WebView (HTML/JS)     │
├─────────────────────────────┤
│   Capacitor JS Bridge       │
│   (Binary bridge, faster)   │
├─────────────────────────────┤
│ Plugin System (npm install) │
│ – First-class native IDEs   │
│ – Direct Gradle/Xcode edit  │
│ – npx cap sync workflow     │
├─────────────────────────────┤
│ Android / iOS Project       │
│ (you own the native code!)  │
└─────────────────────────────┘

Cordova vs Capacitor — Key Differences

Aspect	Cordova	Capacitor
Configuration	`config.xml`	`capacitor.config.ts`
Plugin install	`cordova plugin add cordova-plugin-*`	`npm install @capacitor/camera`
Build trigger	`cordova build android`	`npx cap sync` + open in Android Studio
Native project	Generated, overwritten on rebuild	Permanent — you own and commit it
Native IDE	Optional / discouraged	First-class: Android Studio, Xcode
Plugin ecosystem	Cordova plugins (slowing)	`@capacitor/*` official + community
Live reload	`ionic cordova run`	`ionic cap run android -l`
JS API	`cordova.exec()` callbacks	Promise/async-await native
Hooks	Cordova hooks (fragile scripts)	Capacitor hooks via `capacitor.config.ts`
Permissions	Declared in `config.xml`	Declared in native manifests (you edit directly)

What Stays the Same

Your existing knowledge transfers directly

HTML/CSS/JavaScript — the entire web layer is unchanged
Ionic UI components — <ion-button>, <ion-list>, etc. all still work
Angular/React/Vue — same framework integration
ionic serve — browser-based dev still works the same way
App Store deployment — same process from Android Studio / Xcode

The Migration Mindset

🔌

Replace plugins

Every Cordova plugin has a Capacitor equivalent. This course maps them all.

📁

Own native folders

Commit android/ and ios/ to git. Edit them directly in IDEs.

⚡

Use Promises

All Capacitor APIs are Promise-based. No more callback-style cordova.exec().