# Ionic — Cross-Platform Mobile App Framework with Web Standards

> Build native iOS, Android, and Progressive Web Apps using one codebase with standard HTML, CSS, and JavaScript or TypeScript. Ionic provides a rich library of mobile-optimized UI components and integrates with Angular, React, or Vue.

## Install

Save as a script file and run:

# Ionic — Cross-Platform Mobile App Framework with Web Standards

## Quick Use
```bash
npm install -g @ionic/cli
ionic start myApp tabs --type=react
cd myApp && ionic serve
```

## Introduction
Ionic is an open-source UI toolkit for building high-quality mobile and desktop apps using web technologies. It allows developers to write once and deploy to iOS, Android, and the web from a single codebase, using familiar web standards and popular frameworks like Angular, React, or Vue.

## What Ionic Does
- Provides 100+ mobile-optimized UI components (modals, action sheets, navigation, forms)
- Compiles to native iOS and Android apps via Capacitor or Cordova
- Supports Progressive Web App output with service workers and responsive layouts
- Integrates with Angular, React, and Vue through dedicated packages
- Offers native device API access (camera, geolocation, filesystem) through Capacitor plugins

## Architecture Overview
Ionic's architecture separates the UI layer from the native runtime. The framework provides a library of web components built with Stencil that render consistently across platforms. Capacitor acts as the native bridge, wrapping the web app in a native WebView and exposing device APIs through a JavaScript-to-native communication layer. This design means UI code is shared across platforms while native functionality is accessed through a unified plugin API.

## Self-Hosting & Configuration
- Install the CLI globally with npm and scaffold projects using starter templates
- Configure platform targets in `capacitor.config.ts` (app ID, server URL, plugins)
- Add native platforms with `ionic capacitor add ios` and `ionic capacitor add android`
- Customize theming via CSS variables in `src/theme/variables.css`
- Build for production with `ionic build --prod` then sync native projects with `ionic capacitor sync`

## Key Features
- Framework-agnostic UI components that work with Angular, React, and Vue
- Adaptive styling automatically adjusts component appearance per platform (iOS vs Material)
- Capacitor provides a modern native runtime with first-class TypeScript support
- Live reload during development works on both browser and physical devices
- Strong backwards compatibility and long-term support for enterprise users

## Comparison with Similar Tools
- **React Native** — renders native views directly; Ionic uses a WebView with native bridge, offering wider web compatibility
- **Flutter** — uses Dart and a custom rendering engine; Ionic leverages existing web skills and standard CSS
- **Capacitor (standalone)** — the native runtime layer; Ionic adds the UI component library and CLI tooling on top
- **NativeScript** — provides direct native API access from JavaScript; Ionic prioritizes web-standard code sharing
- **Expo (React Native)** — managed native workflow; Ionic offers similar convenience but for web-first development

## FAQ
**Q: Does Ionic produce truly native apps or just web views?**
A: Ionic apps run in a native WebView powered by Capacitor, with access to native device APIs. The UI is rendered using web technologies but the app is packaged and distributed as a native binary.

**Q: Can I use Ionic without Angular?**
A: Yes. Ionic supports React, Vue, and even vanilla JavaScript. The framework-specific packages provide integration helpers but the core components are framework-agnostic web components.

**Q: How does performance compare to fully native apps?**
A: For most business and productivity apps, performance is indistinguishable from native. Graphics-intensive games or apps requiring heavy GPU computation may benefit from fully native approaches.

**Q: Is Cordova still supported?**
A: Ionic recommends Capacitor as the default native runtime. Cordova is still supported but Capacitor offers better TypeScript support, simpler configuration, and more active maintenance.

## Sources
- https://github.com/ionic-team/ionic-framework
- https://ionicframework.com/docs

---
Source: https://tokrepo.com/en/workflows/asset-e95eb22c
Author: Script Depot