Ionic

Lazy Loading in Ionic 4

No comments

Lazy Loading sounds like a complicated process, but actually is very straight forward. It refers to the process of loading chunks of code (such as a component, directive or pipe) when it’s requested not when the app is loading. This is a very framework agnostic take on things, and the finer details here come in the form of NgModules for Ionic apps. NgModules are the way we can organize our app’s pages, and separate them out into different chunks.

We will take a look at how lazy loading can be used to help speed up the load times of your Ionic Angular apps. Also, it doesn’t matter if your app is packaged and downloaded from the store, or a progressive web app (PWA) running off a server, lazy loading can help increase your startup times in both situations.

Lazy Loading in Ionic Angular:

The idea behind Lazy Loading is that we only download the HTML, CSS, and JavaScript that our application needs to render its first route, and then load additional pieces of our application as needed. The great news is that a new Ionic Angular 4.0 app has lazy loading configured by default. Lazy loading is expressed through how the Angular routes are setup:

const routes: Routes = [
  {
    path: '',
    loadChildren: './tabs/tabs.module#TabsPageModule'
  }
];

This is the initial route that is created for you when starting a new Ionic app using the tabs starter template. By specifying a loadChildren string (instead of passing a page class to component), the Angular router will load this file dynamically when the user navigates to the route. This JavaScript also gets split off from the rest of the app into its own bundle.
Now below we have the router setup for the Tab router module:

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab1/tab1.module').then(m => m.Tab1PageModule)
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab2/tab2.module').then(m => m.Tab2PageModule)
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

Each tab in this configuration loads its children lazily as well, means all files of Tab2 page are not loaded when the user navigates to the tab2 page.

How to optimize Lazy Loading:

Lazy Loading can help your app load fast, however, if a user navigates to a new page, the assets will still need to be downloaded before the user views the page.

When importing the Router module in the main app module, you can specify a pre-loading strategy to use. There are many options we use :

1. No Pre-Loading: Does not perform any pre-loading of lazily loaded modules. This is the default behavior if no strategy is specified.

2. Pre-load All Modules: After your app loads the initial module, this strategy will preload all the rest of the modules when the network becomes idle. In the Ionic starter templates, we set this option for you automatically.
Now pre-loading Strategy parameter on the options object when setting up the router in app-routing.module.ts :

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
 {
   path: '',
   loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
 }
 //...
];

@NgModule({
imports: [
  RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}

The preloadAllModules strategy essentially loads the rest of the app in memory after the first route loads. Navigating between pages will now be quick, as all the routes and modules are loaded and ready to go.

3. Simple Pre-Loading:

We will start off by creating a simple strategy that we can use to specify which routes we want to pre-load up front. Using this strategy, we can ensure the most important parts of our app are primed and ready to be navigated to after the first screen loads.

In this Pre-Loading only routes that are lazy (have the loadChildren property) are passed into this strategies for processing.

{
    path: '',
    loadChildren: '../tab2/tab2.module#Tab2PageModule',
    data: {
      preload: true
    },
}

Now create the simple loading class to pre-load all lazy routes.

import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';

export class SimpleLoadingStrategy implements PreloadingStrategy {
  preload(route: Route, load: Function): Observable<any> {
    if (route.data && route.data.preload) {
      return load();
    }
    return of(null);
  }
}

Now, go into app-routing.module.ts and pass  SimpleLoadingStrategy in the options. Also, since the custom strategy is a service, pass it into the providers collection as well:

@NgModule({
    providers: [SimpleLoadingStrategy],
    imports: [
      RouterModule.forRoot(routes, { preloadingStrategy: SimpleLoadingStrategy })
    ],
    exports: [RouterModule]
})

Now, any routes with preload set to true will be pre-loaded and ready to use after the app initially loads.

SatishLazy Loading in Ionic 4
read more

What’s New Features Introduced In Ionic 4

No comments

Ionic is one of the best frameworks in the market, It’s open source SDK for developing the Hybrid Mobile Application. There are basically three components such as:

1. A Sass-based UI structure that is specially optimized for mobile UIs.
2. An Angular platform that is helpful in quick scalable app creation.
3. A compiler (Cordova or PhoneGap) or wrapper that is utilized for developing native apps using CSS, JavaScript, and HTML.

New Components Introduced In Ionic 4

Components for the Web:

Web Component are a set of web platform APIs allowing you to create custom, reusable, encapsulated HTML tags to use in web pages.

It is the most significant change as they moved to a web component for each component. Web components are nothing but a set of web platform APIs that can let the developer create reusable, new, or custom encapsulated HTML tags that can use in web application and pages.

Web Components are based on the following specifications:
  • Custom Elements: defines the bases and the fundamentals to design and use new types of DOM elements.
  • Shadow DOM: defines how to use encapsulated styles and markup within a web component.
  • HTML imports: defines how to include and reuse the HTML document in another HTML document.
  • HTML Template: defines how to declare code fragments that will not be used while the page is loading, but could be later instantiated at runtime.

Capacitor:

Capacitor is a cross-platform API and code execution layer that makes it easy to call Native SDKs from web code and to write custom Native plugins required by the app.It also consists of PWA support to enable the developer to write one app and then launch it to the app store.

Stencil:

This new creation of the Ionic team is a web component compiler that is useful for building standards-compliant with web servers. This also uses additional APIs such as TypeScript, JSX, async, and Virtual DOM, which works best for progressive web apps (PWA).

Ion-backdrop:

They are full-screen components which overlay other components.These are placed on top of the other contents, as this way it is able to dismiss another component.

ion-picker:

A Picker displays a row of buttons and columns on top of the app’s content, and at the bottom of the viewport.
> Picker-column
> Picker controller

ion-Ripple Effect:

The ripple effect component adds the Material Design ink ripple interaction effect. It is designed to be efficient, noninvasive, and usable without adding any extra DOM to your elements. It works without javascript degrades to easier CSS-Only implementation.

ion-Route:

It will pick up a component and will render it browser URL gets matched with URL property.

ion-Searchbar:

This includes a text field which is useful for searching from a huge collection. Here, the team of Ionic has added nine bar styles, and out of them all, v4 appears to be the best.

ion-skeleton-text:

Skeleton Text is for rendering placeholder content. It will render a gray block at the specified width.

 

ion-select Popover:

This mainly is a dialogue appearing on top of the current page, and it is used for the overflow actions that do not fit well in the navigation bar.

Ionicons 4.0:

Premium designed icons for use in web, iOS, Android, and desktop apps. Support for SVG and web font now available and distributed as web components with drastically reduced sizes, and brand new icon forms reflecting the latest iOS and Material Design styles.

Tappable Items:

To list items, we were used <button> in v3 but in v4 has the tappable attribute for an <ion-item>.

<ion-item tappable (click)="writeSomething()">

Your Button Item

</ion-item>

CSS Variables:

This is the exclusive feature of Ionic that is going to modernise the whole look of your application making some slight changes in a few variables without even using the build tools.

Color Changes:

The Ionic team has changed the earlier default color and it now has a new default color.

ion-reorder:

Reorder allows items to be dragged to change its order horizontally. It can be used within an ion-reorder-group to provide a visual drag and drop interface.

Lazy Loading:

It is basically a design pattern in the ionic framework which is used to distinguish initialization of the components until it is required. This will help to improve the performance of the app and decrease the load time of the app by dividing it into various bundles and loading the app when asked for.

Ion-show-when:

It shows child content when a query evaluates to true. It can watch for platform changes, mode changes, CSS media queries, and device orientation.

Ionic Native 5:

Ionic Native 5 brings the app development project to the fully framework agnostic status. where our components work with either framework or without a framework. Ionic native 5 requires Angular 5 for those choosing to use injectables/providers.

Changelogs in Native 5:

Changelogs is basically shipped with three bundles, i.e.
>  Angular (5.x+) providers
>  ES6 modules
>  AngularJS support
The bundle releases and ES6 will feature static classes for plugins. Ionic developers who use Angular choose between using the injectables, or can import & use ES6 plugins statically.

SatishWhat’s New Features Introduced In Ionic 4
read more