Ionic is an open-source UI toolkit for building cross-platform mobile, web, and desktop applications using web technologies such as HTML, CSS, and JavaScript/TypeScript. It provides a set of pre-designed UI components and tools for building high-quality, interactive applications. Ionic was originally built as a complete
open-source
Open source is source code that is made freely available for possible modification and redistribution. Products include permission to use and view the source code, design documents, or content of the product. The open source model is a decentrali ...
SDK for hybrid mobile app development created by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. in 2013. The original version was released in 2013 and built on top of
AngularJS
AngularJS (also known as Angular 1) is a discontinued free and open-source JavaScript-based web framework for developing single-page applications. It was maintained mainly by Google and a community of individuals and corporations. It aimed to si ...
and
Apache Cordova
Apache Cordova (formerly PhoneGap) is a mobile application development framework created by Nitobi. Adobe Systems purchased Nitobi in 2011, rebranded it as PhoneGap, and later released an open-source version of the software called Apache Cordova. ...
. However, the latest release was re-built as a set of
Web Components
Web Components are a set of features that provide a standard component model for the web allowing for encapsulation and interoperability of individual HTML elements. Web Components are a popular approach when building microfrontends.
Primary t ...
using StencilJS, allowing the user to choose any user interface framework, such as
Angular,
React or
Vue.js. It also allows the use of Ionic components with no user interface framework at all. Ionic provides tools and services for developing hybrid mobile, desktop, and
progressive web apps based on modern web development technologies and practices, using Web technologies like
CSS,
HTML5
HTML5 (Hypertext Markup Language 5) is a markup language used for structuring and presenting hypertext documents on the World Wide Web. It was the fifth and final major HTML version that is now a retired World Wide Web Consortium (W3C) recommend ...
, and
Sass. In particular, mobile apps can be built with these Web technologies and then distributed through native
app store
An app store, also called an app marketplace or app catalog, is a type of digital distribution platform for computer software called applications, often in a mobile context. Apps provide a specific set of functions which, by definition, do not i ...
s to be installed on devices by utilizing
Cordova or Capacitor.
History
Ionic was created by Drifty Co. in 2013. After releasing an alpha version of the framework in November 2013, a 1.0 beta was released in March 2014, a 1.0 final in May 2015, and several 2.0 releases in 2016.
Since January 2019, Ionic 4 allows developers to choose other frameworks apart from Angular like React, Vue.js, and web components. Ionic 4 was built using StencilJS. Ionic was acquired by
OutSystems in November 2022.
Services and features
Ionic uses
Cordova and, more recently, Capacitor plugins to gain access to host operating systems features such as Camera, GPS, Flashlight, etc. Users can build their apps, and they can then be customized for
Android,
iOS
Ios, Io or Nio (, ; ; locally Nios, Νιός) is a Greek island in the Cyclades group in the Aegean Sea. Ios is a hilly island with cliffs down to the sea on most sides. It is situated halfway between Naxos and Santorini. It is about long an ...
,
Windows
Windows is a Product lining, product line of Proprietary software, proprietary graphical user interface, graphical operating systems developed and marketed by Microsoft. It is grouped into families and subfamilies that cater to particular sec ...
, Desktop (with
Electron
The electron (, or in nuclear reactions) is a subatomic particle with a negative one elementary charge, elementary electric charge. It is a fundamental particle that comprises the ordinary matter that makes up the universe, along with up qua ...
), or modern browsers. Ionic allows app building and deployment by wrapping around the build tool Cordova or Capacitor with a simplified 'ionic' command line tool.
Ionic includes mobile components, typography, interactive paradigms, and an extensible base theme.
Using Web Components, Ionic provides custom components and methods for interacting with them. One such component, virtual scroll, allows users to scroll through a list of thousands of items without any performance hits. Another component, tabs, creates a tabbed interface with support for native-style navigation and history state management.
Besides the SDK, Ionic also provides services that developers can use to enable features, such as
code deploys,
automated builds. Ionic also provides its own
IDE known as Ionic Studio, but it was discontinued in 2020.
Ionic also provides a
command-line interface (CLI) to create projects. The CLI also allows developers to add Cordova plugins and additional front-end packages, enable push notifications, generate app Icons and
Splash screens, and build native binaries.
Supported platforms
For Android, Ionic supports Android 4.4 and up. For iOS, Ionic supports iOS 10 and up. Ionic 2 supports the Universal Windows Platform for building
Windows 10
Windows 10 is a major release of Microsoft's Windows NT operating system. The successor to Windows 8.1, it was Software release cycle#Release to manufacturing (RTM), released to manufacturing on July 15, 2015, and later to retail on July 2 ...
apps. Ionic Framework, based on ''Angular.js'', supports
BlackBerry 10
BlackBerry 10 (BB10) is a proprietary mobile operating system for the BlackBerry line of smartphones, both developed by BlackBerry Limited (formerly known as Research In Motion). Released in January 2013, BlackBerry 10 is a complete rework from t ...
apps.
Performance
Ionic apps run with a mixture of native code and web code, providing full access to native functionality if necessary, with the bulk of the UI of the app built with standard web technology. Ionic utilizes native hardware acceleration features available in the browser (such as CSS animations) and optimizes rendering (avoiding expensive
DOM manipulation). Ionic leverages CSS transitions and transforms for animation as a way to leverage the
GPU and maximize available processor time.
Installation
Ionic is an
npm module and requires
Node.js.
References
External links
* {{Official website, url=https://ionicframework.com/, name=Ionic Framework
Cordova vs Capacitor: A Comparison in Building Ionic Framework Apps Ajax (programming)
Free software programmed in JavaScript
HTML5
JavaScript libraries
Software using the MIT license
Rich web application frameworks
Software frameworks