Intro

<!-- ===== The values ===== -->
<!-- - Components look native (iOS / Material) via web components -->
<!-- - Capacitor: access native APIs from JS -->
<!-- - Use Angular, React, Vue, or vanilla JS -->
<!-- - PWA support out of the box -->

<!-- ===== Hello, page (Angular flavour) ===== -->
<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>Hello</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content class="ion-padding">
    <ion-card>
      <ion-card-header>
        <ion-card-title>Welcome</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        Click to count: {{ count }}
      </ion-card-content>
    </ion-card>
    <ion-button (click)="count = count + 1">+1</ion-button>
  </ion-content>
</ion-app>

<!-- ===== Native API via Capacitor ===== -->
<!--
  npm install @capacitor/camera
  import { Camera, CameraResultType } from '@capacitor/camera';
  const photo = await Camera.getPhoto({ resultType: CameraResultType.Uri });
-->

<!-- ===== Build + run ===== -->
<!-- ionic build -->
<!-- npx cap sync ios && npx cap open ios -->
<!-- npx cap sync android && npx cap open android -->

<!-- ===== When Ionic wins ===== -->
<!-- - Web teams wanting to ship mobile without learning native -->
<!-- - Apps with a strong web counterpart that should share UI -->
<!-- - MVPs and internal tools where 'good enough' is enough -->
<!-- - PWAs that also need app store presence -->

<!-- ===== When Ionic hurts ===== -->
<!-- - Heavy-graphics games -->
<!-- - Apps that need bleeding-edge native APIs immediately -->
<!-- - Strict animations and 120Hz interactions -->

<!-- ===== Patterns to internalise ===== -->
<!-- - Use Ionic components; resist the urge to roll plain divs -->
<!-- - Capacitor plugins for native; native code only when needed -->
<!-- - Test on real devices, not just browser preview -->
<!-- - PWA + app store + web from one codebase -->

<!-- ===== Pitfalls ===== -->
<!-- - Mixing Bootstrap / Tailwind with Ionic's CSS variables -> visual drift -->
<!-- - Long lists without ion-virtual-scroll on low-end Android -->
<!-- - Forgetting to update Capacitor plugin native code after install -->
<!-- - Trusting the browser preview for layout (test on device) -->

// Ionic: cross-platform mobile / web apps from one codebase.
// Pick your stack: Angular, React, or Vue. Wrap in Capacitor for native.