Ionic in an open-sourced framework which allows development of cross-platform hybrid apps, using HTML, CSS and Javascript.

It allows developers to build a single application and then easily deploy to multiple platforms, all from a single code case, and all maintaining the same look and feel across different platforms.

Until recently, Ionic was strongly tied to Angular. Whilst Angular is an excellent framework, Ionic’s reliance on the framework proved a hinderance to adoption of the platform.

In addition, over the past few years, browsers have converged on a standardised component model, known as Web Components. Web components are based on existing web standards, and allow developers to create custom components and widgets that can be used with any JavaScript library or framework that works with HTML.

These factors prompted the Ionic team to distribute the Ionic Framework as a set of customised Web Components that use standard web APIs. This means developers can now easily embed Ionic’s custom HTML tags in their apps on mobile, desktop and progressive web apps, safe in the knowledge that the components are fully supported by users’ browsers and will remain stable over time.

Bringing the user-interface controls under the Web Component API has also allowed Ionic to support a “bring your own framework” model, whereby all tooling for building, bundling, and routing within the application can be performed by the framework of your choice.

Ionic can thus now work seamlessly with all major frontend frameworks (Angular, React, Vue, etc.)

How does Ionic work under the hood?

Ionic-based Smartphone apps are essentially native apps. They’re downloaded from a platform’s app store, and access the same native features and hardware as any app built with a native SDK.

Ionic apps, however, run in a full-screen browser, called a web-view, that is invisible to the user.

Through customisable native plugins, Ionic applications can also access the native features of specific mobile without the core code being tied to that device.

When built for Android, this Ionic app contains a single Activity containing a single WebView. All the Ionic application’s UI and logic runs from within this single WebView.

What are the benefits and drawbacks of Ionic?

The main benefits of Ionic (and other similar Hybrid platforms) can be summarised as:

Supporting rapid application development. Allowing easy deployment to multiple platforms (iOS, Android, desktop, progressive web apps). Allowing the ability to reuse familiar technologies of HTML, CSS and Javascript. Offering a rich suite of components and native plugins, which allow access to smartphone device hardware such as camera, file system, GPS, touchID).

Ionic has a comprehensive library of great-looking UI components

Like any software platform, Ionic is not ideal in every scenario. There may still be instances where it makes more sense to develop a smartphone application natively. Factors that may detract from the choice of Ionic for app development include:

Performance: The use of the web-view may introduce a degree of overhead compared to native. For most applications, the difference in performance is negligible, but for 3D games and other performance-intensive applications, hybrid may not be the best choice. Third-party plugins: reliance on plugins to access native features on a device can add complexity to development. However, with the convergence to Capacitor for native plugins (discussed later), this seems to be less of an issue than in previous years. Framework dependencies: whilst Ionic is open source, you’re essentially placing trust in the framework and its contributors to keep up with the latest native features and design patterns of each mobile platform.

Ionic and Typescript

An important feature of Ionic is that it works best with TypeScript, and the Ionic Foundation recommend using Typescript for all Ionic projects.

Typescript is a superset of Javascript, and compiles to normal Javascript. The main benefit of Typescript is that it allows for static type checking (which normal Javascript does not), thereby allowing the Typescript pre-compiler to catch bugs before build time, and allowing complex codebases to scale.

We will be using TypeScript in the code example.

React, what is it and why is it so popular?

If you’ve come this far in the article, you probably know what React is, but in case not, React is an open-source JavaScript library for building user interfaces, developed and maintained by Facebook.

It has proved extremely popular with the development community, due to its elegantly simple component-based architecture, which allows the building of encapsulated components that manage their own state.