Book Image

Learning Ionic, Second Edition - Second Edition

By : Ravulavaru
Book Image

Learning Ionic, Second Edition - Second Edition

By: Ravulavaru

Overview of this book

Ionic makes it incredibly easy to build beautiful and interactive mobile apps using HTML5, SCSS, and Angular. Ionic also makes app development easier, faster, and more fun. This hands-on guide will help you understand the Ionic framework and how you can leverage it to create amazing real-time applications. We begin by covering the essential features of Angular 2, and then dive straight into how Ionic fits in today’s world of hybrid app development and give you a better understanding of the mobile hybrid architecture along the way. Further on, you will learn how to work with Ionic decorators, services, and components, which will allow you to build complex apps using the Ionic framework. We will take a look at theming Ionic apps using the built-in SCSS setup. After that, we will explore Ionic Native, and you will learn how to integrate device-specific features, such as notifications, with the Ionic app. To complete our learning, we will be building a Rider app, using Ionic and Uber API, to book a ride. Next, you will learn how to unit test, end-to-end test, monkey test, and execute device testing on AWS Device farm. Then, we will take a look at migrating the existing Ionic 1 apps to Ionic 2 and deploy them to the App Store. The final chapter on Ionic 3 wraps up this book by explaining the new features of Ionic 3 at the time of writing this book. By the end of this book, you will be able to develop, deploy, and manage hybrid mobile applications built with Cordova, Ionic, and Angular. All the examples in this book are valid for both Ionic 2 and Ionic 3.
Table of Contents (13 chapters)

TypeScript primer

Angular uses TypeScript extensively for app development. Hence as part of the Angular primer, we will refresh the necessary TypeScript concepts as well.

If you are new to TypeScript, TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript provides static typing, classes, and interfaces and supports almost all features of ES6 and ES7 before they land in the browser.

A TypeScript file is saved with a .ts extension.

The main advantage of adding typings to an untyped language (JavaScript) is to make IDEs understand what we are trying to do and better assist us while coding; in other words, Intellisense.

Having said that, here is what we can do with TypeScript.

Variable typing

In vanilla JavaScript, we would do something like this:

x = 20; 
// after a few meaningful minutes
x = 'nah! It's not a number any more';

But in TypeScript, we cannot do as shown in the preceding code snippet, the TypeScript compiler would complain as we are modifying the variable type at runtime.

Defining types

When we declare variables, we can optionally declare the types of variables. For instance:

name: string = 'Arvind'; 
age: number = 99;
isAlive: boolean = true;
hobbies: string[];
anyType: any;
noType = 50;
noType = 'Random String';

This increases the predictability of what we are trying to do.

Classes

I am a guy who believes that JavaScript is an object-based programming language and not an object-oriented programming language, and I know quite a lot of people who disagree with me.

In vanilla JavaScript, we have functions, which act like a class and exhibit prototype-based inheritance. In TypeScript/ES6, we have the class construct:

class Person { 
name: string;

constructor(personName: string) {
this.name = personName;
}

getName {
return "The Name: " + this.greeting;
}
}
// somewhere else
arvind:Person = new Person('Arvind');

In the preceding example, we have defined a class named Person and we are defining the class constructor, which accepts the name on initialization of the class.

To initialize the class, we will invoke the class with a new keyword and pass in the name to the constructor. The variable that stores the instance of the class -- the object, arvind in the preceding example, can also be typed to the class. This helps in better understanding the possibilities of the arvind object.

Note: The classes in ES6 still follow Prototypal-based Inheritance and not the classical Inheritance model.

Interface

As we start building complex apps, there will be a common need for a certain type of structure to be repeated throughout the app, which follows certain rules. This is where an interface comes into the picture. Interfaces provide structural subtyping or duck typing to check the type and shape of entities.

For instance, if we are working with an app that deals with cars, every car will have a certain common structure that needs to be adhered to when used within the app. Hence we create an interface named ICar. Any class working with cars will implement this interface as follows:

Interface ICar { 
engine : String;
color: String;
price : Number;
}

class CarInfo implements ICar{
engine : String;
color: String;
price : Number;

constructor(){ /* ... */}
}

Modules and imports

In vanilla JavaScript, you must have observed code blocks like this:

(function(){ 
var x = 20;
var y = x * 30;
})(); //IIFE
// x & y are both undefined here.

Modules are achieved in ES6/TS using the imports and exports syntax:

logic.ts
export function process(){
x = 20;
y = x * 30;
}

exec.ts
import { process } from './logic';
process();

These are the bare essentials that we would need to get started with TypeScript. We will look at more such concepts where needed.

With this we wrap up the key concepts needed to get started with TypeScript. Let us get started with Angular.

For more information on TypeScript, check out: https://www.TypeScriptlang.org/docs/tutorial.html. Also check out the TypeScript introduction video: https://channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript.