Summary

# ===== Core mental model =====
# Ionic is a hybrid mobile framework: web tech (HTML/CSS/JS) wrapped in a native
# shell via Capacitor. Reuse web skills; ship to iOS and Android (and PWA).

# ===== Daily reflexes =====
# - ion-* web components for native-feel UI
# - Capacitor plugins for native APIs
# - CSS variables for theming + dark mode
# - One framework flavour (Angular, React, Vue) per app
# - npx cap sync after every plugin install
# - Real device testing early

# ===== Production patterns =====
# - State management library (NgRx / Pinia / Redux Toolkit)
# - Lazy-loaded routes per page
# - ion-virtual-scroll / CDK virtual scroll for long lists
# - Capacitor Filesystem + Preferences for local data
# - Background tasks via @capacitor-community/background-runner
# - Deep linking via Capacitor App + URL handlers

# ===== Ecosystem =====
# - Ionic Framework + Capacitor (modern; Cordova legacy)
# - @ionic/storage for richer key-value
# - Capacitor Community plugins (geolocation, push notifications)
# - Appflow for cloud builds + OTA updates
# - Ionic React + Ionic Vue + Ionic Angular flavours

# ===== When Ionic wins =====
# - Web teams shipping mobile without learning native
# - Apps with strong web counterpart sharing UI
# - MVPs and internal tools
# - PWAs that ALSO need app store presence

# ===== When Ionic hurts =====
# - Heavy-graphics games (use Unity / native)
# - Bleeding-edge native APIs (lag behind native SDK)
# - 120Hz interactions + animations that fight WebView
# - Strict performance budgets on low-end Android

# ===== Comparison =====
# vs React Native: RN runs JS but uses native UI; Ionic uses webview + CSS
# vs Flutter: Flutter draws its own UI on Skia; Ionic uses native webview
# Ionic typically loses on perf vs RN/Flutter but wins on web-skill reuse

# ===== What to learn next =====
# - Custom Capacitor plugins when no community plugin fits
# - Performance: Lighthouse + WebView profiling
# - PWA installability + service workers
# - Build pipelines: GitHub Actions + EAS-equivalent for Capacitor
# - Deep linking + App Links + Universal Links

# ===== Books + resources =====
# - ionicframework.com docs
# - capacitorjs.com docs
# - Ionic Academy by Simon Grimm (paid)
# - Awesome Ionic + Awesome Capacitor (GitHub)

# ===== Patterns to internalise =====
# - Components, plugins, themes — three pillars
# - npx cap sync after every install
# - Service classes wrapping Capacitor plugins
# - Test on real devices early
# - PWA + app store + web from one codebase

# ===== Closing thought =====
# Ionic is the pragmatic bridge from web to mobile. The trade-off (webview
# performance vs native) is real but often acceptable. For the right product
# (CRUD-heavy, content-driven, MVP), it ships faster than any other path and
# gives you a PWA + iOS + Android app from one team. Pair with Capacitor and
# the native side stays in reach when you need it.

// Next: Capacitor 7 plugins, Ionic 8 features, Stencil custom components.