Ionic 3 - Lazy Loading

Ionic 3 – Lazy Loading (lijeno učitavanje)

Jedna od stvari koja me najviše oduševila kada je stigao Ionic 3 je Lazy Loading. Toliko sam bio oduševljen da sam samo tražio priliku gdje ću to moći ugraditi i uživati u svim prednostima koje donosi. Naravno ima u svojih nedostataka, ali s njima se može živjeti pa ćemo o tome malo kasnije.

Lazy Loading označava učitavanje pojedinih dijelova aplikacije po potrebi umjesto da se učita sve odjednom kao što je bilo slučaj do sada.

To konkretno znači sljedeće – kada ste prije kreirali nove stranice unutar aplikacije trebali ste ih sve uvesti unutar app.module.ts i također unutar svake stranice gdje ih planirate pozivati. Međutim sada to više ne morate raditi jer svaka kreirana stranica ima svoju datoteku naziv-stranice.module.ts i ne morate ju više uvoziti unutar app.module.ts niti bilo gdje drugdje unutar aplikacije nego ju možete odmah koristiti.

Prvo ću objasniti dosadašnji način kreiranja i međusobnog povezivanja stranica, a onda idemo na Lazy Loading putovanje.

Stari način

Kreiramo novu stranicu naredbom

$ ionic generate page Primjer

I dobijemo sljedeću strukturu

| - primjer/
    | - primjer.html
    | - primjer.scss
    | - primjer.ts

Stranica primjer.ts izgleda ovako

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

@Component({
  selector: 'page-primjer',
  templateUrl: 'primjer.html'
})
export class PrimjerPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    
  }

}

Našu novu stranicu ne možemo koristiti u ostatku aplikacije dok ju ne uvezemo unutar app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { PrimjerPage } from '../pages/primjer/primjer';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    PrimjerPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    PrimjerPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

I recimo da sada na HomePage želim staviti poveznicu na PrimjerPage. To mogu napraviti jedino ako prvo uvezem PrimjerPage unutar home.ts.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { PrimjerPage } from './../primjer/primjer';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public _navCtrl: NavController) {

  }
  
  idiNaStranicu(){
    this._navCtrl.push(PrimjerPage);
  }

}

I sada zamislite aplikaciju u kojoj imate 20ak stranica i koje međusobno želite povezati. Kao prvo, sve ih trebate uvesti u app.module.ts, a onda još trebate razmišljati na kojim sve stranicama trebate uvesti određenu stranicu import { PrimjerPage } from ‘./../primjer/primjer’; kako bi ju mogli pozvati unutar neke funkcije. Vrlo lako se izgubiti u svemu tome.

Novi način

Kreiramo novu stranicu naredbom

$ ionic generate page Primjer

I dobijemo sljedeću strukturu

| - primjer/
    | - primjer.html
    | - primjer.module.ts
    | - primjer.scss
    | - primjer.ts

Stranica primjer.ts izgleda ovako. Jedina razlika obične i Lazy Loading strukture je u parametru IonicPage .

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

@IonicPage()
@Component({
  selector: 'page-primjer',
  templateUrl: 'primjer.html'
})
export class PrimjerPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    
  }

}

I naravno, trebamo vidjeti od čega se sastoji primjer.module.ts. I kao što možete vidjeti izgleda jednako kao i standardna src/app/app.module.ts datoteka.

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { PrimjerPage } from './primjer';

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

I odmah smo spremni koristiti našu novu stranicu u ostatku aplikacije. Primijetit ćete da u ovom slučaju nisam morao uvesti PrimjerPage kako bi ju koristio unutar funkcije nego ju samo pozovem kao string ‘PrimjerPage’.

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

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

  constructor(public _navCtrl: NavController, public navParams: NavParams) {
  }

  idiNaStranicu(){
     this._navCtrl.push('PrimjerPage');
  }

}

Iz gore navedenog možete vidjeti koliko je Lazy Loading koristan i koliko olakšava rad s aplikacijom koja ima više stranica. Kao prvo ne morate ništa ručno uvoziti unutar app.module.ts niti morate misliti gdje ćete pozivati neku od stranica kako bi i nju uvezli, a uz to dobijete i malo bržu aplikaciju jer se neće sve učitavati odjednom.

Zaključak

Lazy Loading radi po principu – što manje to bolje. Njegovim korištenjem imate manje koda, manje uvoza i manje brige oko putanja do određenih stranica/klasa. Po mojem mišljenju, Lazy Loading je jedna od najboljih značajki Ionica 3 pa iako još uvijek nije obavezna mislim da bi ju svatko trebao koristiti. Naravno ne slažu se svi s tim.

Na kraju ostaje na vama da sami odlučite na koji ćete način složiti Ionic aplikaciju.

Prednosti:
– Poboljšava modularnost
– Ubrzava vrijeme učitavanja aplikacije
– Ubrzava korištenje aplikacije
– Omogućava deep linking

Nedostatci:
– Gubi se type checking

Objavio

Tomislav Stanković

Bloger širokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *