Improving performance in Angular by caching routes

Tech Talk

by Engineers of Acroquest Myanmar Technology

Improving performance in Angular by caching routes


Go to English summary >>

အားလုံးပဲ မင်္ဂလာပါ။

ကျွန်တော့် နာမည် ကတော့ ရန်နိုင်ဟိန်း ပါ။ ကျွန်တော် ကတော့ Software Engineer တစ်ယောက် အနေနဲ့ Acroquest မှာ အလုပ်လုပ်ကိုင်လျှက်ရှိပါတယ်။ ကျွန်တော် ဒီနေ့ Angular ရဲ့အသုံးဝင်တဲ့ feature တစ်ခုဖြစ်တဲ့ Route reuse strategy အကြောင်း ကို tutorial နဲ့တကွ ပြောပြမှာဖြစ်ပါတယ်။

Angular ကိုအခုမှ စလေ့လာချင်တယ်ဆိုရင် ဒီလင့်ကိုဝင်ပြီး လေ့လာလို့ရပါတယ်။

https://angular.io/docs

Angular က SPA လို့ခေါ်တဲ့ single-page application အမျိုးအစားဖြစ်တယ်။ Screen ပြောင်းသွားတိုင်း အရင်က screen မှာရှိတဲ့ components တွေကို ဖျက်စီးပြစ်လိုက်ပြီး screen အသစ်မှာရှိတဲ့ components တွေကို create ထပ် လုပ်တယ်။

အပေါ်က ပုံအတိုင်း route ကို change မယ်ဆိုရင် user/1 ကိုရောက်တဲ့အချိန်မှာ UserListComponent ဖျက်ပြစ်လိုက်ပြီး /users ကိုပြန်သွားတဲ့အချိန်ကျရင် အစကနေ UserListComponent ကို load ပြန်လုပ်တယ်။

အဲ့ဒီတော့ ပုံမှာပြထားတဲ့အတိုင်း UserListComponent မှာ HTTP request ကနေရထားတဲ့ dataတွေ ဓာတ်ပုံတွေ အများကြီးရှိနေမယ်ဆို loading လုပ်တဲ့အချိန်ကကြာသွားနိုင်တယ်။Performance အတွက်မကောင်းဘူး။ အဲ့လို ပြဿနာတွေ ကိုဖြေရှင်းဖို့ Angular က Route Reuse Strategy နဲ့ component ကို caching လုပ်လို့ရအောင် support ပေးထားတယ်။

Route Reuse Strategy မှာ default အနေနဲ့ method ၅ ခုရှိတယ်။

RouteReuseStrategy ရဲ့ documentation ကိုဖတ်ချင်တယ်ဆိုရင်အောက်မှာ Link ပေးထားပါတယ်။

https://angular.io/api/router/RouteReuseStrategy

shouldReuseRoute method

ဒီ method က route ပြောင်းတိုင်းအလုပ်လုပ်ပြီးအရင်က route နဲ့ အခု route နဲ့တူနေရင် TRUE ပြန်ပီး routing မလုပ်တော့ပဲ မတူတော့မှ FALSE ပြန်ပြီးတခြား method တွေကအလုပ်ဆက်လုပ်သွားတယ်။

shouldDetach method

shouldDetach method က ကျွန်တော်တို့လက်ရှိ route ကိုစွန့်ခွာသောအခါအလုပ်လုပ်ပြီး သူ့ရဲ့ တာဝန်က စွန့်ခွာသွားတဲ့ route ကပြန်လည်အသုံးပြုဖို့ လိုမလိုကို စစ်ဆေးပေးခြင်းဖြစ်တယ်။ method က TRUE ပြန်ရင် store method ကိုအသုံးပြုလိမ့်မယ်။

store method

store method ကတော့ component data တွေကိုသိမ်းဆည်းပေးတဲ့ method ဖြစ်တယ်။

shouldAttach method

shouldAttach method ကို ကျွန်တော်တို့သွားမဲ့ route သို့ရောက်သောအခါ ဒီ route ရဲ့ component data ကသိမ်းဆည်ထား ပြီးသားလား(cached) ဆိုတာကိုစစ်ဆေးပေးတဲ့ method ဖြစ်ပါတယ်။

retrieve method

retrieve method က shouldAttach method ကနေ TRUE ပြန်လာမယ်ဆိုရင်သိမ်းဆည်းထား တဲ့ component data တွေကိုပြန်ယူပြီး Screen ကိုပြပေးမှာဖြစ်တယ်။

ကဲ methods တွေအကြောင်းရှင်းပြလို့ပြီးသွားပြီဆိုတော့ implementation စလိုက်ကြရအောင်။ ပထမဦးဆုံး user-route-reuse-strategy.ts file ကို create လုပ်ပြီး အပေါ်က method ၅ခု ကိုထည့်လိုက်မယ်။ ပြီးတော့ ActivatedRouteSnapshot Object ကနေ route ရဲ့ string value ကိုဖတ်ဖို့ ရယ် reuse လုပ်မလုပ် ကိုဖတ်ဖို့ ရယ် method ၂ခု ရေးလိုက်မယ်။

နောက်ပြီး reuse လုပ်ချင်တဲ့ route မှာ reuse variable ကို true ထားပေးမယ်။

နောက်ဆုံးအနေနဲ့ app.module.ts ထဲမှာ custom RouteReuseStrategy ကိုပုံပါအတိုင်းထည့်ပေးလိုက်ဖို့ပဲ လိုတော့တယ်။

ယခုဆိုလျှင် Angular က လိုချင်တဲ့ component ကို cache လုပ်ပေးတော့မှာပဲ ဖြစ်ပါတယ်။

အပေါ်က method တွေရဲ့ logic ကိုလိုအပ်သလို ပြုပြင်ပြီးလဲ ရေးလို့ရပါတယ်။ ဒီအကြောင်းအရာလေးက အားလုံး အတွက် အသုံးဝင်မယ် လို့ မျှော်လင့်ပါတယ်။

[ English Summary ]

Hello everyone,
My name is Yan Naing Hein. I am working as a Software Engineer in Acroquest. I would like to share very useful feature of Angular which is Route Reuse Strategy.

As Angular is SPA(Single-page application), It destroys the previous component and creates the new one. In some cases like having a lot of http requested data and heavy component, it is not efficient.

So, Angular provides Route Reuse Strategy to cache the component without destroying after changing route.

The default Route Reuse Strategy interface have 5 methods.

We can implement custom route reuse class by modifying those methods.

★★★We are hiring the staff who are interested in latest technologies.★★★

If you are interested in our company, please see the available job descriptions in the following links.

Senior Developer: https://www.acromyanmar.com/senior-developer/
Intermediate Developer: https://www.acromyanmar.com/intermediate-developer/
Junior Developer: https://www.acromyanmar.com/junior-developer/


Check our Facebook Page!