Belajar Capacitorjs - Pengenalan Capacitor & Arsitekturnya

#Pendahuluan

Setelah di episode 0 kita memastikan environment — Node.js ≥20, Xcode, dan Android Studio siap — pada episode ini kita menarik napas sejenak dari setup dan memahami apa itu Capacitor dan bagaimana arsitekturnya. Memahami arsitektur sebelum menulis kode adalah kunci: kalian akan tahu apa yang terjadi di balik layar saat aplikasi web berjalan di dalam perangkat mobile.

Mengapa arsitektur penting? Karena Capacitor bukan sekadar "web view yang di-wrap". Ia punya bridge layer, plugin system, dan filosofi "project native sebagai source code" yang membedakannya dari tool serupa. Memahami ini akan membantu kalian mengambil keputusan desain yang tepat sepanjang series.

#Apa Itu Capacitor?

Capacitor adalah native runtime dari Ionic yang memungkinkan kalian menjalankan aplikasi web (React, Vue, Angular, atau vanilla JS) di dalam shell native iOS dan Android. Dari perspektif pengguna, aplikasi ini adalah aplikasi native: punya icon di home screen, bisa mengakses hardware (kamera, GPS, notifikasi), dan didistribusikan lewat App Store/Play Store.

Dari perspektif developer, kode yang kalian tulis tetap HTML/CSS/JavaScript. Capacitor tidak mengubah cara kalian menulis web app — ia hanya menambahkan lapisan native di sekelilingnya.

Aspek	Detail
Dibuat oleh	Ionic Team
Lisensi	MIT
Versi terkini	8.5 (Juli 2026)
Platform	iOS, Android, Web (PWA)
Web Engine	WKWebView (iOS), Android WebView (Android)

#Arsitektur: WebView + Bridge + Plugin

Arsitektur Capacitor terdiri dari tiga lapisan utama:

100%

#WebView Engine

Setiap platform menggunakan web engine bawaan:

iOS: WKWebView (WebKit) — engine yang sama dengan Safari.
Android: Android WebView (Chromium-based) — engine yang sama dengan Chrome.

Kode web kalian dijalankan di dalam WebView ini. Artinya, fitur CSS, JavaScript API, dan behavior browser yang kalian pakai di web akan berperilaku sama di mobile — dengan pengecualian beberapa API yang tidak tersedia di WebView (yang diisi oleh plugin native).

#Bridge JS ↔ Native

Bridge adalah komponen kritis yang menghubungkan JavaScript di WebView dengan kode native di iOS/Android. Ketika kode JavaScript kalian memanggil Camera.getPhoto(), bridge menerjemahkan panggilan itu menjadi kode Swift/Kotlin yang sesuai, menjalankannya di thread native, dan mengembalikan hasilnya ke JavaScript.

Bridge ini menggunakan mekanisme RPC (Remote Procedure Call) berbasis pesan. Performanya sangat baik untuk kebanyakan use case, tetapi menjadi bottleneck jika kalian mengirim data dalam volume sangat besar antara web dan native — topik yang akan kita bahas di episode 16.

#Plugin Layer

Plugin adalah jembatan fungsional antara JavaScript API dan implementasi native. Setiap plugin terdiri dari:

JavaScript API — interface yang dipanggil dari kode web.
Kode native — implementasi Swift (iOS) dan Kotlin (Android).
Deklarasi — metadata plugin di capacitor.config.ts.

Capacitor menyediakan core plugins resmi (Camera, Filesystem, Geolocation, dll), dan komunitas menyediakan ratusan plugin tambahan. Kalian juga bisa menulis plugin sendiri — topik mendalam di episode 12.

#Filosofi: Native Project sebagai Source Code

Berbeda dari Cordova yang memperlakukan project native sebagai build artifact (di-generate ulang setiap kali), Capacitor memperlakukan folder ios/ dan android/ sebagai source code yang di-commit ke git.

Implikasinya:

Kalian bisa mengedit file native langsung (Info.plist, AndroidManifest.xml, Gradle config).
Perubahan native tidak hilang saat rebuild.
Tim native bisa berkontribusi ke project yang sama.

Filosofi ini menjadikan Capacitor lebih ramah untuk tim campuran (web + native developer).

#Capacitor vs React Native vs Flutter vs PWA

Kriteria	Capacitor	React Native	Flutter	PWA
Bahasa	HTML/CSS/JS	JavaScript/TS	Dart	HTML/CSS/JS
WebView	Ya (WKWebView)	Tidak	Tidak	Ya (browser)
Akses Native	Via plugin	Langsung (bridge)	Langsung (FFI)	Terbatas
Performa UI	Seperti web	Mendekati native	Native-like	Bergantung browser
Learning curve	Rendah (untuk web dev)	Menengah	Menengah-tinggi	Rendah
App Store	Ya	Ya	Ya	Ya (TWA/standalone)
Live update OTA	Ya (Capgo/Appflow)	Ya (CodePush)	Tidak (official)	Ya (service worker)
Ukuran bundle	Kecil-menengah	Menengah	Besar	Sangat kecil

Kapan pakai Capacitor? Ketika kalian sudah punya web app dan ingin "mengangkat" ke mobile tanpa menulis ulang. Cocok untuk MVP, business app, dan tim yang dominan web developer.

Kapan pakai React Native/Flutter? Ketika performa UI kritis (animasi kompleks, game, atau UX yang harus 100% native-like).

Kapan pakai PWA? Ketika distribusi harus cepat tanpa store review, dan fitur native yang dibutuhkan terbatas.

Note

Capacitor bukan "solusi untuk semua". Ia paling bersinar untuk team yang sudah punya web app dan ingin hadir di mobile tanpa investasi besar di native development.

#Bedah Hasil Build

Untuk melihat lapisan web vs lapisan native, buka folder project setelah npx cap add ios:

plaintext

my-app/
├── android/          ← project native Android (source code)
├── ios/              ← project native iOS (source code)
├── src/              ← kode web kalian
├── capacitor.config.ts
└── package.json

Folder ios/ berisi Xcode project dengan AppDelegate.swift, Info.plist, dan Assets.xcassets. Folder android/ berisi Gradle project dengan AndroidManifest.xml dan MainActivity.java. Di sinilah "shell native" yang membungkus aplikasi web kalian.

#Penutup

Pada episode 1 ini, kalian telah memahami arsitektur Capacitor secara menyeluruh:

Capacitor membungkus aplikasi web dalam WebView (WKWebView/Android WebView).
Bridge menghubungkan JavaScript ↔ native via RPC.
Plugin layer menyediakan akses ke hardware dan API native.
Filosofi Capacitor: native project adalah source code, bukan artifact.
Perbandingan vs React Native vs Flutter vs PWA membantu memilih alat yang tepat.

Di episode 2 selanjutnya, kita akan membuat project pertama: mengubah web app menjadi mobile app — dari npm i @capacitor/core hingga menjalankan aplikasi pertama di simulator iOS dan emulator Android. Sampai jumpa!