Overview: Ionic framework for hybrid, multi-platform applications

Have you ever wondered how do some companies manage to keep consistency across multiple application, on multiple platforms (web and mobile)? How do they achieve that?

If they use a framework like Ionic, everything is much simpler than you imagined, because one can:

  • develop mobile applications with web functionalities,
  • deliver consistent user experience across multiple platforms,
  • use a single technology for both web and mobile apps,
  • avoid duplicate coding / implementation,
  • reduce delivery time,
  • reduce development costs.

At Berg Software, we think this is a great option for complex companies or products, regardless the industry. Although B2C usages might benefit the most, we have seen B2B usage cases to successfully deploy it, too.

Ionic uses web technologies (HTML, CSS and JavaScript), with integrations for popular technologies such as Angular and React. Since we build with Angular, it is great to have one single codebase that’s fully supported by Ionic, for great results on mobile and web, mobile and desktop.

To walk our talk, let’s have a look at the app development process using Ionic (i.e. rather than look at any specific app development).

How does Ionic framework work?

Step 0: Required tools

In order to proceed, you probably (already) have the toolbox ready:

  • Node.js and its package manager (npm), for interacting with Ionic ecosystem.
  • A code editor with support for Javascript / TypeScript (e.g. Visual Studio Code)
  • A command line interface / terminal (e.g. Visual Studio Code for the command line terminal).

Step 1: Install the Ionic tooling

The Ionic CLI can build, copy, and deploy Ionic apps to Android simulators and devices with a single command. In order to install the Ionic CLI, just run the following in the command line terminal:
npm install -g @ionic/cli

Step 2: Creating Ionic app

2.1. Enter the command:

ionic start <name>
This command creates a working Ionic app. It installs dependencies for you and sets up your project. The first argument is your app’s name.

2.2. Pick a framework

As can be seen in the figure below, after entering the “ionic start” command in a terminal, the desired framework Angular or React must be selected. In our case, we selected Angular. @ionic/angular combines the core Ionic experience with the tooling and APIs that are tailored to Angular Developers.
Berg Software - ionic framework - pick a framework 1200px

2.2. Pick a template

Berg Software - ionic framework - pick a template 1200px

Step 3: (Default) Ionic components & start the development

The Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic is stocked with a number of components, including cards, lists, and tabs.

Below, you can see an example of HTML code that uses a part of Ionic Components:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Tab 1
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content [fullscreen]="true">
  <ion-list>
    <ion-item>
      <ion-label>Input</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Toggle</ion-label>
      <ion-toggle slot="end"></ion-toggle>
    </ion-item>
    <ion-item>
      <ion-label>Radio</ion-label>
      <ion-radio slot="end"></ion-radio>
    </ion-item>
    <ion-item>
      <ion-label>Checkbox</ion-label>
      <ion-checkbox slot="start"></ion-checkbox>
    </ion-item>
  </ion-list>
</ion-content>
Here’s the web page that we built from the HTML code above:
Berg Software - ionic framework - resulting webpage 1200px
Ionic components are written in HTML, CSS and JavaScript which makes the user interface as beautiful and functional as possible for many platforms and device types.

<ion-header> represents the top navigation and toolbar, with “Tab 1” as the title.
<ion-content> contains the visual aspects of application.
<ion-list> is used to display rows of information such as contact list, playlist, or menu.
<ion-item> is an element that can contain text, icons, avatars, images, inputs, and any other native or custom elements.
<ion-input> is meant for text types inputs, such as “password”, “email”.
<ion-label> is a wrapper element, that can be used in combination with <ion-item>, <ion-input>, etc.
<ion-toggle> is a button that can be switched on or off by pressing or swiping it.
<ion-checkbox> can be used to let the user know that it’s necessary to make a binary decision.

Step 4: Running your app developed with Ionic

Easily spin-up a development server which launches in your browser. It watches for changes in your source files and automatically reloads with the updated build. By default, ionic serve boots up a development server on localhost.
ionic serve [options]

Step 5: Deploying to iOS and Android

Mobile applications can be developed and then distributed through native application stores, to be installed on devices using Cordova or Capacitor.

Install Cordova:

npm install -g cordova

Quick reminders: What is Cordova? and Why use it?

Cordova wraps your HTML/JavaScript app into a native container which can access the device functions of several platforms. These functions are exposed via a unified JavaScript API, allowing you to easily write one set of code to target nearly every phone or tablet on the market today and publish to their app stores.” (Apache Cordova website)

Use Apache Cordova if you want to:

  • extend a mobile application to multiple platforms, without double-implementing its functionalities;
  • implement a web application that is packaged for distribution in various application portals;
  • mix native application components with a WebView (i.e. a hybrid application).

Native plugins

Cordova also offers JavaScript APIs. This way, the app can access a variety of device features, such as the contacts database, or the device’s camera, or location.

For one of our projects that needed access to the current location of the device, we used the Geolocation plugin. Accessing the location (or other features) of the device depends on its platform. The Platform service can be used to get information about your current device. When the device platform is set, call a function to access the location.

Berg Software - ionic framework - geolocation A 1000px
Berg Software - ionic framework - geolocation B 1000px
In the picture below, you can see the content of getLocation() method, in which we accessed the location of the device. The longitude and latitude can be accessed through the “coords” property of position.
Berg Software - ionic framework - geolocation C 1200px

Step 6: Building and running Ionic app on mobile devices

Building Ionic Project

Cordova can build and deploy native projects programmatically.

To boot up a live-reload server, build, and deploy the app, run the following:

ionic cordova build <platform> [options]
Examples:
ionic cordova build android
ionic cordova build ios

Running Ionic Project

cordova build is used to compile and prepare your app. Finally, the native-run utility is used to run your app on a device.

ionic cordova run [<platform>] [options]

Step 7: Debugging

Android app

Once an app is running on an Android device or emulator, it can be debugged with Chrome DevTools.

Chrome has web developer tool support for Android simulators and devices. Go to chrome://inspect in Chrome while the simulator is running, or a device is connected to the computer and Inspect the app that needs to be debugged.

iOS app

Once an app is running on an iOS device or simulator, it can be debugged in Safari.

Safari has Web Inspector support for iOS simulators and devices. Open the Develop menu and select the simulator or device, then select the Ionic App to open Web Inspector.

If the Develop menu is hidden, enable it in Safari » Preferences » Advanced » Show Develop menu in menu bar.

If the app isn’t listed, the Web Inspector may need to be enabled on the device in Settings » Safari » Advanced » Web Inspector.

Ionic’s disadvantages

The browser does not always provide the correct information about the phone’s environment, which complicates the testing. There are as many different devices as there are platforms, and for the most accurate testing, as many of them as possible need to be covered.

Also, native functionalities are difficult to combine. There can be plugin compatibility issues, i.e. errors that can be difficult to troubleshoot and resolve.

Finally, hybrid applications tend to be slower than native ones. However, as mobile technologies improve, this is not a persistent issue.

__

Ionic is not a hammer to knock all nails. However, all things considered, we see many usage cases where the benefits will overwhelm the drawbacks. Its speed and convenience will make it a natural choice for the applications that need to cover multiple platforms, with short deployment times and relatively fewer resources. At Berg Software, we highly recommend it.

__

Do *you* use Ionic? How & for each usage cases? Let us know!

29 years in business | 2700 software projects | 760 clients | 24 countries

We turn ideas into software. What is yours?

Get in touch

7 + 4 =