Since publishing a book in 2018, I have explained “what Ionic Framework is” in many places. With 2024 almost over, I want to revisit that definition.
https://ionicframework.jp/docs/
Definitions from My Past Books
First, in Mobile App Development with Ionic (January 2018), I wrote:
Ionic is a framework built on Google's Angular application framework and specialized for developing HTML5 applications.
At the time, Ionic was built on Angular. It had its own CLI and did not follow every Angular best practice, so I described it as “a framework constructed with Angular as its foundation.”
In Mobile App Development with Ionic [Angular Edition] (2019), I changed the wording to:
Ionic is a framework for building mobile and desktop applications with web technologies. It uses the web standard technology called Web Components, so it can be used not only with the Angular application framework introduced in this book, but also with React and Vue.js. It provides features such as custom UI components, routing, page-transition animations, and access to native features such as the camera in mobile apps.
From Ionic 4 onward, instead of resting on Angular, Ionic built Stencil to generate Web Components (the web-standard suite for reusable custom elements) and developed a UI framework on the web platform to reproduce mobile UI. No longer tied to Angular, it can be used from Vue and React as well — hence the new description.
Strictly speaking, the line about “accessing native features such as the camera as a mobile app” is a bit inflated — Capacitor commands are embedded in the Ionic CLI, so you can reach those features through Ionic commands. 🙂
A 2024 Redefinition
How would I define it today? The official site puts it this way:
Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like Angular, React, and Vue.
I used to talk about the stack, but the simplest explanation is probably this:
- Like Bootstrap, it is just a UI framework
The differences from Bootstrap are easy to state:
- It reproduces mobile app UI
- You style with custom tags, not classes (
<ion-button>rather thanclass="ion-button") - You can still customize with CSS
Want to go deeper? Roughly this:
- On iOS it mimics UIKit; on Android, Material Design — switching automatically by platform
- It supports push navigation (navigation stacks) and tabbed, non-linear navigation
- Dark mode is on by default — because it is mobile UI
Honestly, “mobile UI framework” may be enough on its own.
Ionic was born in 2013 as a UI framework for hybrid apps, when the norm was “websites on PC, apps separately.” The wall between websites and mobile apps has thinned — PWAs, faster phones, capable mobile browsers. Ionic no longer needs to be “for mobile apps only.” You can build websites on mobile UI, ship a website as a mobile app, or ship a mobile app without Ionic at all. It sits alongside Bootstrap as a normal option for web projects.
Documentation is available in Japanese too — if you are curious, it is easy to get started.
https://ionicframework.jp/docs/
See you next time.