Blog

Ionic Framework to Develop a Mobile Application

First of all, why a Mobile Application?

A mobile application can offer a company several benefits. A new communication channel makes it possible to reach customers in a more interactive way. An alert system informs its users and promotes its products and services, increasing customer loyalty.

However, a mobile application is not right for every business. Your mobile app must add value. No need for a miniaturized version of your website – it is already responsive, right?

JFL42 Mobile Application

As part of Toronto’s comedy festival JFL42, we have developed a mobile app that optimizes the visitor experience. Available on Android and iOS, the mobile application allows you to discover artists and shows, to locate on site, plan and book a performance, and even unlock discounts through a reward system. In short, gamification is a big part of the added value of the mobile app.

Platform and Language of Development

To develop a mobile application, there are 2 main possibilities: native or hybrid. Each option requires very different knowledge and expertise.

To get rid of the much more complex native development that Android and iOS require, we opted for the hybrid option.

Considering different options, we then landed with the Ionic platform. Not only does it offer quick and intuitive handling, but it also focuses on managing the specificities of mobile platforms. Ionic has greatly facilitated development by creating a single hybrid source code, which applies to iOS as well as Android.

Ionic Framework, what is it?

Ionic is an open-source HTML5 framework that allows you to design mobile applications using HTML, CSS, and JavaScript Web technologies. Built on Google’s AngularJS framework, it’s solid. Its usability is one of its main advantages but not the only one.

4 million applications have been developed with Ionic by nearly 5 million Ionic developers.

Ease of Use

The first advantage of Ionic is the ability to design a mobile application without having to learn a new language like Swift or Objective C for iOS, for example. By using components offered by Ionic, which then generates a hybrid code, one can develop for the desired platform: .apk for Android, . app for iOS.

Ionic is also quite easy to handle. The online documentation provides examples of all the available components such as carousels, buttons, menus, popovers (small menu system options) and many others.

Thanks to the native implementation of SaaS, adding its graphic charter using variables is easy.

Grid System

The Ionic grid system is based on the principles of Twitter Bootstrap. So, if you are familiar with Bootstrap’s 12 columns, you won’t be too lost!

Classes

Ionic adds classes to the HTML allowing the front-end to be stylized for the targeted platform. This interesting feature allows us to customize certain elements to iOS or Android although the style sheet is common to both.

A Bit of Code…

On iPhone, an “iOS” class is readable on the root element “ion—app” of the HTML structure. Ditto for Android, the visible class will be “md”. This provides the desired visual for each platform through the classes specified in the style sheet.

Here are the classes generated by Ionic:

Platform Mode Details
iOS iOS Viewing on an iphone, ipad, or ipod will use the iOS styles.
Android md Viewing on any android device will use the Material Design styles.
Windows WP Viewing on any windows device inside cordova or electron uses the Windows styles.

Kitchen Sink

Thanks to the integrated Cordova plug-ins, Ionic provides the user with the ability to take advantage of the native features of a mobile device such as the camera and contact directory, while offering a lot of customization.

Progressive Web Apps (PWA), The Mobile Application of the Future?

We can’t talk about mobile application development without thinking about new projects and what the future of technology holds.

PWA or Progressive Web Apps are the next trend in mobile development. Designed by Google, the PWA is halfway between a mobile website and a mobile app.

Imagine a full-screen mobile website accessible from a URL or a shortcut on the home screen of your mobile phone or tablet. With the appearance of an application, this platform will offer notifications, won’t require any download, and will even be available offline! Access to the camera or geolocation will be possible, while ensuring faster loading thanks to cached content.

Think about all this without the disadvantages of today’s mobile apps:

  • No download by the user
  • No submission to the App Store or the Google Play Store
  • Less heavy than a real application
  • Faster
  • Seamless updates for the user
  • Background synchronization

The only downside is that Safari does not support PWA yet, but it won’t be long. Opting for a PWA will optimize some development costs while providing a solution that will eventually become increasingly widespread.

Ionic Tutorial can be tricky so please contact us directly. We will be happy to show you how it is done.

PWA or standard mobile app, think of the added value for your business and let us know so we can plan this project together.

RECENT POSTS

Ten reasons to join the team at GTI
GTI Canada announces official opening of Support Centre
May the best team win!