Capacitor
Capacitor — mobile app development framework for iOS and Android.
Stack Components
Why
Cross-platform mobile development with near-native performance and large ecosystem. React Native powers Instagram, Discord, and Shopify — apps serving 500M+ users.
Flutter is used by Google Pay and BMW, achieving 60-120fps with Skia rendering. Cross-platform cuts dev cost 40-60%.
When
Use for cross-platform iOS+Android apps sharing one codebase. Avoid for compute-heavy native-only apps.
How
Example
Common Problems
- ⚠Capacitor version mismatch between native modules — pin versions in package.json
- ⚠Bridge serialization overhead for large data — use JSI/native arrays
- ⚠Configuration drift between environments — use infrastructure-as-code (Terraform/Pulumi) to keep dev/staging/prod identical
Best Practices
- ✓Use Flipper/Reactotron for debugging network and state
- ✓Enable Hermes engine for faster startup and lower memory
- ✓Set up health checks and graceful shutdown — handle SIGTERM to drain in-flight requests before exit
FAQ
What is Capacitor and what projects is it for?
Capacitor — mobile app development framework for iOS and Android. It pairs layered technologies for end-to-end type safety and out-of-the-box deploys, fitting everything from MVPs to production SaaS.
How do I spin up a working demo with Capacitor in 10 minutes?
Two steps: (1) npx create-capacitor@latest myapp; (2) Write screens/components. Get the local dev server running, then wire one real data source to verify the end-to-end loop.
What is the most common pitfall with Capacitor and how do I avoid it?
The most common pitfall is: Capacitor version mismatch between native modules — pin versions in package.json. Avoid it by adding the matching checklist to your PR template and running type-check + lint + unit tests in CI — three gates before merge.
What are the best practices for Capacitor?
Best practices for Capacitor include: Use Flipper/Reactotron for debugging network and state; Enable Hermes engine for faster startup and lower memory; Set up health checks and graceful shutdown — handle SIGTERM to drain in-flight requests before exit. The first one — "Use Flipper/Reactotron for debugging network and state" — should be set up at project init to avoid costly rework later.
When should I NOT choose Capacitor?
Pick something else in three cases: (1) the team has zero experience with the core framework and the deadline is tight (learning-curve risk); (2) it's a pure content/marketing site (Astro is lighter); (3) you need very high throughput (>10k RPS) or strict-consistency microservices (Go/Rust). Capacitor shines for mid-to-high complexity full-stack and API work — don't over-engineer simple static pages with it.