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
|
1 |
$ ionic generate page Primjer |
I dobijemo sljedeću strukturu
|
1 2 3 4 |
| - primjer/ | - primjer.html | - primjer.scss | - primjer.ts |
Stranica primjer.ts izgleda ovako
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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
|
1 |
$ ionic generate page Primjer |
I dobijemo sljedeću strukturu
|
1 2 3 4 5 |
| - 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 .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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'.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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
