lifelong learner — urip iku urup, currently working on accenture.

Ionic – life cycle events

2
Degananda.com -

Ionic memiliki lifecycle pada komponen atau pagenya. Ibarat sebuah kecebong yang akan berubah menjadi katak dan pada ahirnya pun mati. Bagaimanakah lifecycle event yang terjadi pada ionic ? silahkan simak pada ulasan ini

Lifecycle event

lifecycle yang akan kita bahas adalah lifecycle dari view yang berupa “page” / “komponen” pada ionic. Lifecycle ini tertanam pada modul NavController yang berasal dari package ionic-angular. Hal ini berbeda dengan angular yang berasal dari @angular/core namun secara “fungsi” sama hanya berbeda cara kerjannya.

Jika anda telah familiar dengan angular dan telah mengerti mengenai lifecycle hooks pada angular maka perhatikanlah tabel dibawah ini untuk memudahkan kita menyamakan definisi lifecycle pada angular dan ionic. Lifecycle ini sangat penting karena dapat berpengaruh pada performa aplikasi. Dapat dibayangkan jika kita salah menempatkan suatu kode parah lifecycle event tertentu bisa jadi program menjadi lambat ataupun kode gagal di eksekusi. Contohnya saat kita hendak membuat form dengan FormBuilder, kode tersebut seharusnya diletakan pada NgOnInit (jika pada angular) ataupun jika pada ionic maka ionViewDidOnload() tetapi malah kita letakan pada lifeCycle ionViewDidEnter() yang terjadi adalah error karena view / html telah diload namun formbuilder belum disetup pada class.

Angular Ionic
NgOnInit() IonViewDidLoad()

ya, hanya terdapat satubuah “lifecycle” yang identik. Sisannya memiliki cara kerja yang berbeda. Berikut ini adalah daftar lifecycle event pada ionic view.

Lifecycle event Deskripsi
ionViewDidLoad() : void  dijalankan saat suatu halaman telah diload. Event ini hanya berjalan satu kali. Jika halaman tersebut di”cache” atau “cached” maka IonViewDidLoad() ini tidak akan berjalan lagi. Lifecycle ini sangat cocok untuk mensetup fungsi – fungsi tertentu. Misalnya membuat form, mendapatkan data dari services / api dan lain sebagainnya.
ionViewWillEnter() : void dijalankan saat halaman tersebut mulai ditampilkan ke user atau halaman tersebut menjadi aktif.
ionViewDidEnter() : void dijalankan saat halaman tersebut telah ditampilkan ke user atau halaman tersebut menjadi aktif.
ionViewWillLeave() : void dijalankan saat halaman tersebut mulai ditinggalkan dan tidak lagi menjadi aktif atau ditampilkan ke user
ionViewDidLeave() : void dijalankan saat halaman tersebut telah ditinggalkan dan tidak lagi menjadi aktif atau ditampilkan ke user
ionViewWillUnload() : void dijalankan saat halaman tersebut mulai dihandurkan atau sesaat sebelum halaman tersebut dihancurkan. Sangat cocok untuk meletakan kode unsubscribe() jika pada view tersebut kita menggunakan subcribe().
ionViewCanEnter() : boolean / Promise<void> dijalankan sebelum user masuk pada suatu view a.k.a sebelum view tersebut diload dan menjadi aktif. Cocok sebagai AuthGuard yakni proteksi user yang tidak memiliki izin / privilages pada halaman-halaman tertentu.
ionViewCanLeave() : boolean / Promise<void> dijalankan sebelum user meninggalkan  suatu view a.k.a sebelum view tersebut diload dan menjadi aktif. Cocok sebagai AuthGuard yakni proteksi user yang tidak memiliki izin / privilages pada halaman-halaman tertentu.

itulah daftar LifeCyle pada ionic yang harus kita ketahui karena sangat bermanfaat saat membuat aplikasi. Kesalahan meletakan kode di lifecycle yang salah akan membuat fungsi aplikasi tidak berjalan serta dapat membuat performa aplikasi menjadi buruk. Contohnya kesalahan meletakan unsubscribe() pada observable.

Best practice

Inilah sedikit ringkasan yang mungkin dapat berguna bagi kita (best practice, berdasarkan pengalaman pribadi dan referensi di internet).

  • Setup form -> ionViewDidLoad()
  • Mendapatkan data dari services / provider -> ionViewDidLoad()
  • Subscribe suatu observable -> ionViewDidLoad()
  • Memanggil promise -> ionViewDidLoad()
  • Unsubscribe pada suatu observable  -> Kondisional tergantung kasusnya. Namun biasannya pada ionViewWillUnload(). Hal ini ditujukan untuk membersihkan object “observable” sehingga observer berhenti untuk mengobservasi / watch terhadap observable (menjaga performa dari aplikasi).
  • AuthGuard -> ionViewCanEnter() / ionViewCanLeave(), namun sebenarnya authguard ini lebih dicocok dijika diletakan pada Router. Angular mensupport authguard pada router.

terdapat suatu pola yakni kebanyakan proses saat mensetup kode logical diletakan di ionViewDidLoad() mengapa ? karena tentu kita akan membiarkan user untuk masuk ke pada suatu halaman / UI telah ditampilkan ke user meskipun data belum selesai untuk diload dan hanya menampilkan loading. Hal ini untuk meningkatkan performa aplikasi serta mencegah user untuk menutup aplikasi. Jika suatu halaman memakan lebih dari tiga detik untuk ditampilkan ke user 90% user tersebut akan meninggalkan / menutup aplikasi (menurut google).

  • Imam Jinani

    Sangat bermanfaat sekali nih, makasih gan jd lebih tau, lain kali bikin sample nya gan hehehe, binyar makin tau.

    • degananda ferdian

      sama-sama gan. terimakasih sudah berkunjung. iya mas nanti kalau ada waktu akan coba dikasih contohnya