Building complex applications with unique features and complex UIs requires lots of effort and native app developers. However, you can create simple apps and mockups quickly and easily thanks to advanced frameworks for cross-platform mobile development.
In this article, we focus on the Ionic framework. We describe how to use it for creating an app and share our experience working with it. This information will be helpful for developers who want to build cross-platform solutions for web and mobile platforms and are looking for a suitable framework.
Ionic is a framework for developing hybrid applications that supports mobile and web platforms. Thanks to adaptive styling, Ionic apps look the same across all platforms, but specific elements like menus can be adapted to each individual platform.
In a nutshell, developers work with the Ionic framework in the following way:
- Launch the application on Android and iOS and in any browser.
Ionic emulates native UI guidelines and uses native SDKs, combining powerful device functionality and a rich set of technologies.
Ionic is built on three main principles:
- Cross-platform — Write code once and launch the same application on different platforms.
- Comply with web standards — Use basic web technologies like HTML and CSS for markup.
In this way, Ionic gives developers the opportunity to create cross-platform apps integrated with Angular, React, or Vue out of the box.
To sum up, the key benefits of the Ionic framework are:
- Well-known tools — Ionic supports popular Angular and React frameworks.
- Quick start — Ionic has lots of templates that help developers quickly build mockups and provides a UI components library.
- Reduced development costs — The framework speeds up development at the early stages and allows for building simple apps and mockups without hiring native developers.
- Convenient maintenance — Ionic offers built-in browser instruments and debugging tools.
- Numerous plugins — You can use various plugins from Ionic, Cordova, and Capacitor to easily add native device functionality to any Ionic app.
However, this framework also has a few drawbacks:
- Using a built-in browser leads to longer app loading times compared to native apps and higher processor loads to simulate platform components in the browser environment.
- Since an Ionic app runs in a browser environment, complex graphical effects like animations can consume more resources than they would in native apps.
- When working with heavy applications, Ionic can show poor performance.
- Ionic doesn’t provide hot reloading and uses live reloading instead.
Ionic supports several popular frontend frameworks. In this article, we highlight key capabilities that Ionic offers in combination with Angular.
Using Ionic with Angular
Angular is a powerful framework for developing single-page applications (SPAs) in TypeScript. It uses a component approach to page development, a strict architecture, powerful data binding, and routing.
Ionic allows you to leverage the full capabilities of Angular’s key features: components, services, and directives.
Now let’s move to the actual development and explore the process of creating an application with Ionic and Angular step by step. In the next section, we’ll demonstrate a common structure for an Ionic app and outline how it differs from the structure of a regular Angular app.
Ionic has its own command-line interface (CLI) similar to the Angular CLI. If you don’t have it on your computer yet, you can install the CLI using the Node Package Manager (NPM):
Then you can start developing an Ionic app. To do that, use the start command:
There’s no need in specifying the addition of Angular to the project, since the latest Ionic versions include Angular by default.
Pay attention to the last parameter of the command. In this example, we use the blank template type to create an app with a plain page. This is the template developers usually use to build real-life applications from scratch.
However, Ionic offers other template types that you can use to build cross-platform web applications with basic components. Most of these templates, though, are most suitable for getting familiar with the framework or for some simple mockups that must be created fast.
Ionic also offers various components for deploying apps and customizing them for the Android and iOS platforms.
The newly created app will have the following structure:
As you can see, this is the structure of an ordinary Angular application. However, there are some differences like the page folder. While Angular applications are built from a basic component that includes child elements, Ionic’s basic unit is a page that provides a screenshot of the app.
From Angular’s point of view, pages and components are the same, but in Ionic, they have different roles. In Ionic, a page is a component that acts like an entire view and may have nested components.
A page has several advantages over a component in Ionic:
- Routing — You can specify a URL address right on the page without the need to configure a path for each component in a separate file as in Angular.
- Lazy loading — Significantly boost application performance by making a module (which includes a page) load right before a user interacts with it.
Adapting app components
Ionic has a huge set of components like buttons, checkboxes, and fields for entering text. Their advantage over usual HTML elements is adaptivity. Ionic elements adjust to the platform on which the app runs.
For example, let’s take a look at the Action Sheet — a dialog that shows a list of options. It’s located at the top of the screen in the program’s menu and needs to be manually closed by a user before they can start interacting with an app.
With this component, there’s no need to use any platform-specific settings. You can just write code and Ionic will adapt it to the platform.
Using Ionic Native for additional settings
Ionic Native is a set of TypeScript wrappers for open-source Cordova and PhoneGap plugins that allow you to use native functions in an Ionic app.
You can use it to work with Bluetooth, receive GPS coordinates, and check for internet connection and battery charge.
Let’s take a look at the code below to explore the process of receiving GPS coordinates in Ionic:
Now let’s take a look at the debugging process.
In this section, we briefly describe specifics of the debugging process for web, Android, and iOS versions of our sample application.
Web version debugging
Remote debugging on Android
Apart from debugging an app right in the browser, Chrome DevTools can be used for remote debugging of an Android app right on the device or in an emulator. To do that, you need to install Android Debug Bridge on your computer and connect a device using USB or use an emulator.
Also, Visual Studio Code has a plugin that allows developers to debug Cordova apps, including those built with Ionic. This plugin creates a bridge between a debugger and a device and allows you to add breakpoints straight to the IDE.
Remote debugging on iOS
Debugging an iOS application is a bit more complicated.
You’ll need a physical device running macOS or a built-in emulator. No other applications are required apart from Apple Development Tools. The Safari browser is enough to redirect an app to a device.
The next step after debugging is deployment. Let’s explore how it's done for all application versions.
In this section, we briefly describe the specifics of deploying an app’s web, Android, and iOS versions. It’s pretty straightforward for all platforms.
For web version deployment, you can use a single command:
After that, just copy the output files to the server where your app is hosted. As you can see, this process isn’t different from an Angular build using the CLI.
To form an Android application package (APK) file, execute this command:
An APK file will be created, and you can send it to other devices. However, you’ll need to sign it if you plan to upload the app to the Google Play Store.
For iOS deployment, you’ll need a real iOS device or an emulator running on macOS with the Xcode IDE installed. Once you have the environment ready, execute the following command to build an iOS app:
Then run Xcode and deploy the app to your device. Sign your app for further commercial use.
Developing a hybrid app with Ionic often may be faster and more affordable than developing several native apps.
Choosing Ionic over several native apps could be a good decision if:
- Your requirements don’t involve working with low-level modules of operating systems or creating a rich graphical interface
- A customer wants to show an MVP to investors as soon as possible, which makes time a critical factor
Based on our experience, we’d like to highlight several recommendations worth paying attention to when starting cross-platform web application development on Ionic.
1. Local data storage
Ionic doesn’t insist on using specific URLs for routing because navigation can work without it. On mobile devices, a site will be shown in the web view component, and users won’t be able to change a URL or add it directly to a browser. However, you should clearly configure routing. It’s required for the web version so a page can be opened right from a URL.
The Ionic framework can have some performance issues, especially when working with heavy applications. Therefore, you should take care of performance testing as soon as possible so poor performance won’t be a surprise for end users.
Ionic can be a useful framework for building cross-platform mobile apps, since it significantly accelerates development for multiple platforms. Also, it supports popular Angular and React frameworks and has lots of templates, which simplifies developers’ work.
This framework for cross-platform mobile application development also brings cost efficiency, as it allows developers to write code that works for both Android and iOS and develop adaptable page markup.
At Apriorit, we have dedicated teams of professionals in web and mobile app development who will be happy to assist you with building a robust product from scratch or improve an existing product. Contact us to start discussing your dream project!