Most of the people have already switched from Ionic 1 to Ionic 2. You are maybe one of them and feel more comfortable and settled with Ionic 2. But now the latest version of Ionic i.e Ionic 3 has been released. The change from Ionic 2 to Ionic 3 is nothing as compared to that of Ionic 1 to Ionic 2.

Ionic 3 release is not the framework update. It’s just a major update in Ionic 2. It supports angular 4 and intern follows semantic versioning system of angular( The 3 dots system.).That is MAJOR.MINOR.PATCH. The major update implies that there will be some breaking changes and in case of minor/ patch level update, some API will be changed.

Ionic has come up with many features and improvements over Ionic 2. Basic 3 features I implemented in my app and it helped me a lot. My app is now working much faster. In this blog I am sharing details of these features and steps to implement them:

1. Ionic native plugin support:

The plugin support system has been changed in Ionic native 3.x. These changes are:

• A native package needs to be installed for every plugin that is added to a project
• The application root module requires that the native package for each installed plugin is imported and added to the provider’s array

Easy steps to add a new plugin to Ionic 3 project:

1. Install Cordova plugin with the help of ionic CLI command:

ionic cordova plugin add <plugin-name>

2. Install ionic native package for the installed plugin by npm:

npm install --save @ionic-native/<plugin-name>

Note that, we need to just add plugin name after @ionic-native/ path. This command will make entry of same package in package.json.

3. Import installed native package to project.

For that, we need to import it into app.module.ts Open root module of project – /src/app/app.module.ts. Add import statement like, (exmaple: camera plugin)

 import { Camera } from '@ionic-native/camera'; 

Now add entry in providers,

  @NgModule({
  ...
  providers: [
    Camera
  ]
  ...
  })

4. Now wherever you required this plugin, just import it. Fairly simple, right?

Ionic native 3 providing us a Cordova wrapper for more than 130 plugins. Instead of using plugin directly, ionic allows us to import respective plugin wrapper in root module once and use it whenever and wherever we want. This reduces app bundle size and make ionic app run faster

2. Lazy loading:

Loading something as and when required. For example, In a web page if we have 50 images, then for better loading time we would not prefer to load all images at once. As user scroll down, images should load. The Same concept is used in Ionic 3.

Instead of loading everything in a front, it will load the component when needed. This would help in starting ionic app. In big applications, when lots of things need to be loaded in the start, this feature will be helpful.

To implement lazy loading we need to follow some steps. Lets see how we can implement lazy loading in Ionic 3

1. Remove all import statement of a page

Lets take example for HomePage. We need to remove all references of HomePage from all other pages, providers, and modules. Start with src/app/app.module.ts. In this file we will have two arrays: entryComponents and declarations. All the components that we want to load in app, we specify them here. Now we want to load HomePage only when it is requested.

So, first of all remove all the reference of HomePage from app.module.ts includinng import statement.

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  ...
  entryComponents: [
    MyApp,
    HomePage
  ],
  ...
})

2. Create ngModule for HomePage

Create new file src/pages/home/home.module.ts. Add declaraion, import and export statement for HomePage.

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';

@NgModule({
declarations: [
    HomePage,
],
imports: [
    IonicPageModule.forChild(HomePage),
],
exports: [
    HomePage
]
})
export class HomePageModule {}

3. Add decorator in HomePage

Import IonicPage from ionic-angular and add @IonicPage() decorator to home.ts page.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { IonicPage } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {}
}

4. Remove all references of HomePage

Remove all the import statements to HomePage from all pages, provides, root files. Now its time to use HomePage module. We can use it by simply specifying HomePage in a string. For example, If you are using it like this:

rootPage:any = HomePage

Now, it should be replaced by,

rootPage:any = 'HomePage'

These are the simple steps to make our app run faster by implementing lazy loading. We just need to create separate ngModule for each component and decorate it with IonicPage.

3. Plugin mocking and browser development:

Till Ionic 2 we were not able to test any plugin in the browser of the ionic app. Ionic 3 provides full support for plugin mocking. This means that we can easily use and test more than 130 plugins in a browser. This makes ionic developer more comfortable to build entire app in browser without any help of device or emulator.

To use this feature we need to create mocks for our plugin to use and make them return proper data.

Native plugin mock is just a copy of actual plugin. It allows user to test the plugin functionality without using actual plugin in browser itself. Lets take exmaple of camera plugin. We will implement getPictures() method and return test data. Lets write camera plugin mock.

1. Create mock folder in root folder

mkdir src/mocks
cd mocks

2. Create camera-mock.ts and overwrite getPictures() method like following:

export class CameraMock {
  getPicture(params) {
    return new Promise((resolve, reject) => {
      resolve("BASE_64_IMAGE_DATA");
    });
  }
}

3. Import camera-mock.ts in app.module.ts and add it to providers array too

import { CameraMock } from "../mocks/camera-mock";

@NgModule({
...
providers: [
...
CameraMock
]
...
})

4. Now plugin mock is ready to use in any component. Just import it and use it.

I recommend you to use Ionic 3 native plugin support as well as load the components as and when required i.e. lazy loading, Surely you will get performance refinement. Also, there is proper documentation available for steps to migrate from Ionic 2 to Ionic 3. You can refer this.