Overview

It is predicted that there will be 4.69 billion mobile users at the end of 2019. There were 197 billion app downloads in 2017 and 149 billion in 2016. Mobility is at the centre of the digital strategy of large and small enterprises alike.

Mobile apps are the primary medium used to deliver content via mobile phones. Everyone who owns a mobile phone installs apps to achieve specific goals based on their needs.

This was made possible when Apple announced the iPhone in 2006, Android entered the market in 2008 and Windows phones became popular in 2010.

Each of the 3 platforms had their own Software Development Kits for building apps. As a large corporation, if you wished to give your customers a mobile experience, you had to build three separate teams working on three different technologies. You would essentially be building 3 apps, doing exactly the same thing. These apps are called NATIVE apps.

Creating Native Apps

While building apps in Native is powerful, they require the team to be skilled in multiple technologies. iPhone developers - Objective C / Swift, Android developers - Java, and Windows Developers - .NET.

Before mobile, web apps dominated the market and they were built using HTML, CSS & Java Script. But the web developers. at this point, could not use their skills to build mobile apps. They had to learn Java, Objective C and / or .NET to be able to build even the most simple mobile app.

Apache Cordova - Building mobile apps using HTML, CSS & JS

Apache Cordova enables a web application to be packaged as a native application and access device features like the camera. The apps built using Cordova are known as hybrid applications. PhoneGap was originally created by Nitobi which was acquired in 2011 by Adobe. This was later open sourced as Apache Cordova.

A hybrid application is a web application that lives within the container of a native mobile application.

The only difference between a web application and a hybrid application is that a hybrid application can access the internal hardware of the mobile device.

Cordova launches a web application on the phone’s web view. The app appears and behaves like a normal mobile application. Further, it has complete mobile device access.

This enables teams to have only one code base that can be used in multiple platforms. This was and still is the key differentiator for Cordova. The amount of time and effort saved is considerable.

The limitation with Apache Cordova was that apps built using Cordova did not “look” and “feel” native.

Apple works on Apple design, and Android uses material design, which make apps look and feel a certain way. A lot of effort has been put by Google and Apple to offer a superior user experience This is achieved by high quality lists, headers, animations and gestures which functioned similarly in any app.

The Cordova developer had to build each of these from scratch and as one can expect, did not match Apple, Google or Microsoft. There then rises the obvious need for a centrally maintained framework of all such features which will offer consistency across apps. One of those frameworks is the IONIC FRAMEWORK.

Ionic - Building Native - Like Mobile apps in HTML/ CSS / JS

Ionic is a framework used to build mobile apps using HTML, CSS & JavaScript. In addition, it comes with high-quality native-like components. The features that are provided by native apps - gestures, popups, etc. are provided by ionic. They can be customized for any app with ease.

Ionic works side by side with Cordova to access native features of the phone like the camera. Further, all these components are loosely coupled, giving you the ability to mix and match with ease.

Ionic provides native-like components & features like popups, swipe gestures, etc. It works along-side Cordova to access native mobile features like the camera.

Java Script in Ionic - Angular

Coding in plain JavaScript is one thing, but coding in Angular is totally something else. Angular is the most widely-used JavaScript framework out there. It has a wide user community and several large corporations use Angular to build their web applications.

Angular is used to build “Single Page Apps”. A single page app can be seen as a web app that behaves like a desktop app - without lags. Parts of the page can dynamically change in response to user input - without refreshing the whole page.

Angular divides a complex page like the one below into components.

It then gives powerful features that allow interaction between these components and enables sharing data and navigating across the application. Most Angular apps use Twitter Bootstrap to style their components.

Angular provides a mechanism to bind data to the html, “directives” to display data by looping through an array, conditionally displaying data, etc.

Angular uses TypeScript rather than JavaScript.

Angular comes with the “http” module which can be used to make “API Calls” and fetch data from/ make updates to remote applications.

1. Ionic offers CSS-based components that morph into material design when built for Android, and Apple Design when built for iOS.
2. Ionic uses Angular to keep its components loosely coupled, routing other features that Angular offers like directives, property & event binding, http etc.
3. It uses Cordova to access native features of the phone like the camera.

Ionic Features Examples

Below are a few features that Ionic offers.

Ion Card

Buttons

Fab Buttons

This is a brief sampling of the features that Ionic has to offer. It also has plugins that are JavaScript based, like Popups, Modal Windows, Tabs, Menus, etc.

Navigation

Ionic uses Angular routes for navigation. It can be combined with “Lazy Loading” to load only the parts of the app that are currently being used

Ionic & Cordova plugins

Invoking native functionality is simple. Here is an example. This will launch the camera and after the picture is taken you will be able to access the image and process it as per your need.

export class PhotoService { 
  constructor(private camera: Camera) { }

  takePicture() { 
    const options: CameraOptions = { 
      quality: 100, 
      destinationType: this.camera.DestinationType.DATA_URL, 
      encodingType: this.camera.EncodingType.JPEG, 
      mediaType: this.camera.MediaType.PICTURE 
    }

    this.camera.getPicture(options).then((imageData) => { 
      // Do something with the new photo

    }, (err) => { 
     // Handle error 
     console.log("Camera issue: " + err); 
    }); 
  } 
} 

HTTP Requests

The modern approach to fetch data into your mobile app is using HTTP request. HTTP requests are made to GET (fetch) data, POST (create data/ invoke server functionality), PUT (update data) and DELETE data. Ionic uses the Angular HTTPClient module to achieve this.

HTTP requests depend on the network and if not done “asynchronously”, they can make the app freeze. Angular has the feature of “observables”. The HTTP request returns an observable object. The Angular compiler proceeds to the next statement after the request, while a “subscriber” waits for the data to be received. Once the data is received it is processed.

Persisting data

While Ionic / Angular allows you to use local storage/ cookies, data is normally persisted in a remote database. Firebase is often the choice to persist data for the app. Cloud Firestore is a NoSQL document database that lets you easily store, sync, and query data for your app.

Advantages of Ionic

1. It is completely free to use
2. It provides a single source for all supported platforms
3. It uses standard HTML, CSS & Java Script
4. It comes with optimized & High Quality components for Buttons, Cards, etc.
5. It has an active developer community
6. Cordova plugins offer access to native features of the mobile device
7. Angular is a well-established JavaScript framework
8. Testing - Simulators can be used to test mobile apps. Angular comes along with Jasmine/ Mocha for automated testing
9. The app can be live previewed on the web as you develop.
10. Ionic view allows you to look at the app in iOS/Android or Windows format simultaneously
11. The security offered by Ionic is equivalent to that of native apps.

Disadvantages of Ionic

1. Performance is marginally inferior to native apps
2. Ionic is not suited for game programming
3. Android is fragmented, compatibility with older versions of Android can be an issue

Course Structure

In this course we have learnt:

1. Usage of Ionic components and plugins
2. Intro to typescript / Angular
3. Using Advanced JS based components & Navigation
4. Using Cordova & Native plugins
5. Making HTTP requests
6. Persisting data in Firebase
7. Building & Publishing your app