user
Side Effects in software engineering
Angular, React နဲ့ Vue တို့လို Declarative framework တစ်ခုခုသုံးဖူးတယ်ဆိုရင် side effect ဆိုတဲ့ စကားလုံးနဲ့ ရင်းနှီးပါလိမ့်မယ်။ အဲဒီ side effect တွေက ဘာကိုဆိုလိုတာလဲ။  side effect တွေကို ဘာကြောင့် သေချာကိုင်တွယ်ဖို့ လိုအပ်တာလဲ။


assistant
( Harry Yan ရဲ့ Aug, 2023 မှာ ရေးထားတဲ့ content တခုမှ ကောက်နှုတ် ဖော်ပြထားလိုက်ပါတယ်။)

Side Effects in software engineering

Application UI တည်ဆောက်တဲ့အခါ အသုံးပြုကြတဲ့ declarative နဲ့ imperative ဆိုတဲ့ ချဥ်းကပ်နည်း ၂ ခုအကြောင်း ရှေ့မှာ ရှင်းပြခဲ့ဖူးပါတယ်။ အဲနှစ်ခုက Facebook (Meta) engineer တွေ ဥပမာပေးသလိုပဲ တက္ကဆီစီးတာနဲ့ တူပါတယ်။ ကိုယ်က ဒရိုင်ဘာကို ရှေ့နားကျ ဘယ်ဖက်ချိုးမယ်၊ ပွိုင့်ရောက်ရင် ညာဖက်ကွေ့မယ် စသဖြင့် တစ်လမ်းလုံး ညွှန်ကြားချက်တွေ တလှေကြီး ပေးပြီး တက္ကဆီစီးတဲ့နည်းက သတိတစ်ချက် လွတ်သွားတာနဲ့ သွားဖို့မရည်ရွယ်ထားတဲ့ နေရာတွေဆီ ရောက်သွားနိုင်ပါတယ်။
declarative နည်းကတော့ ဒရိုင်ဘာကို ကိုယ်သွားချင်တဲ့နေရာ ပြောလိုက်တာနဲ့ တူတယ်။ သူ့ဟာသူ ဘယ်လမ်းကမောင်းမောင်း အဓိကက လိုရာရောက်ဖို့ပဲမလား။ မြန်မြန်ရောက်တဲ့ ဖြတ်လမ်းတွေ ကိုယ့်ထက်တောင် သိရင်သိဦးလိမ့်မယ်ပေါ့။
ဒါကြောင့် declarative မှာ အခြေခံကျတဲ့ အချက်က state ပါပဲ။ imperative စတိုင်မှာ data flow နဲ့အတူ UI flow ကိုကိုယ်တိုင် ထိန်းချုပ်ခဲ့ပေမယ့် declarative ပုံစံမှာ developer အနေနဲ့ data flow ကိုသာ အာရုံစိုက်စရာရှိပြီး UI flow ကတော့ data flow (state) အတိုင်း လိုက်ပြောင်းလဲနေအောင် reactive mechanism တွေ ထည့်ထားတဲ့အတွက် state သာ အဓိက ကျလာတယ်။
declarative စတိုင်ကို ကျင့်သုံးတဲ့အခါ UI flow ရဲ့ အသေးစိတ် ထိန်းချုပ်ခွင့်ကို framework တွေဆီ လွဲပေးလိုက်ရတဲ့အတွက် screen ပေါ် ဘယ်အချိန် ဘယ်လို ဘယ်နှစ်ခါ ရေးခြယ် (graphic rendering) လုပ်မယ်ဆိုတာမျိုးကို အတိအကျ မခန့်မှန်းနိုင်တော့ပါဘူး။
ဒီအတွက် အားနည်းချက်အနေနဲ့ data flow လော့ဂျစ်တွေ၊ နောက်ပြီး UI flow အပေါ် မူတည်တဲ့ လော့ဂျစ်တွေကို UI နဲ့ ရောထားလိုက်ရင် ကမောက်ကမ ဖြစ်လာနိုင်တာမို့ သပ်သပ်စီ ခွဲထားရပါတယ်။ ဒီနေရာမှာ declarative ရဲ့အားသာချက်ကိုက UI နဲ့ state မရောနှောခြင်းလို့ ပြောလို့ရတဲ့အတွက် data flow လော့ဂျစ်တွေကို UI နဲ့ခွဲရေးရတာ အဆန်းမဟုတ်ပါဘူး။ ဒါပေမယ့် UI flow အပေါ် မူတည်ပြီး တုံ့ပြန်ရမယ့် လော့ဂျစ်တွေကတော့ ဖြေရှင်းစရာတခု ဖြစ်လာခဲ့တယ်။
Application UI အကြောင်း ပြောကြပြီဆိုရင် ဒီလော့ဂျစ်တွေက side effect တွေပါပဲ။ တက္ကဆီ ဥပမာကို ပြန်တွေးကြည့်ပါ။ လမ်းမှာ ဘဏ်တွေ အများကြီးရှိတာ သိတယ်။ ကိုယ်က ATM မှာ ပိုက်ဆံဝင်ထုတ်ချင်တယ်။ ဒါက side effect ပါပဲ။ ဒါပေမယ့် ဘယ်ရောက်နေပြီလဲဆိုတာကိုလည်း ခေါင်းတပြူပြူနဲ့ တချိန်လုံး ချောင်းကြည့်မနေချင်ဘူး ဆိုပါစို့။ အရိုးရှင်းဆုံး အဖြေက ​ဒရိုင်ဘာကို အဲဒီဘဏ်ရှေ့က ဖြတ်ဖြစ်ရင် ပြောပါဦး။ ကျွန်တော် ပိုက်ဆံထုတ်ဦးမလို့ပါလို့ အသိပေးထားခိုင်းလိုက်တာပါပဲ။ ဒါက side effect ကို ကိုင်တွယ်ပုံထဲက အရိုးရှင်းဆုံးနည်းဖြစ်တယ်။
ဒီဖက်​ခေတ် Declarative framework ၃ ခုဖြစ်တဲ့ Jetpack Compose, React နဲ့ SwiftUI တို့မှာ side effect တွေကို ဘယ်လိုကိုင်တွယ်ကြလဲ ကြည့်ကြရအောင်။
Launched Effect ဆိုတာ Android App တွေမှာ မဖြစ်မနေ အသုံးပြုကြတဲ့ side effect တခုပါ။ key အပြောင်းအလဲ ရှိတဲ့အခါတိုင်း အလုပ်တစ်ခုခု လုပ်စေချင်တဲ့အခါ Launched effect ကိုသုံးနိုင်တယ်။ ဥပမာ Social App ရဲ့ Newsfeed ပေါ်မှာ လက်ရှိရှိတဲ့ ပို့စ်တွေထက် ကျော်ပြီး scroll လိုက်ရင် server ဆီက နောက်ထပ် data အသစ်တွေ ထပ်တောင်းဖို့ဆိုတာမျိုးပေါ့။ ဒီ mechanism ကိုသုံးပြီး pagination library တွေတည်ဆောက်နိုင်တယ်။
React ရဲ့ use Effect ကလည်း Launched Effect နဲ့ဆင်တူပါတယ်။ Component ကိုဘယ်နှစ်ကြိမ် ပြန်ခြယ်သသ သတ်မှတ်ထားတဲ့ key (dependency) အပြောင်းအလဲ မရှိသရွေ့ side effect တွေကို ထပ်ခေါ်တော့မှာ မဟုတ်ပါဘူး။ ဒီအချက်က ပထမဆုံး component တည်ဆောက်တဲ့ တစ်ခေါက်မှာပဲ api ခေါ်ပြီး backend ဆီက data တောင်းတာ၊ App ရဲ့တစ်နေရာရာမှာ data အပြောင်းအလဲ ဖြစ်သွားတာကို component ထဲက တုံ့ပြန်တာ စသဖြင့် လုပ်လို့ရစေတယ်။
Side Effect ကလည်း နောက်ထပ်အသုံးဝင်တဲ့ side effect တခုပါပဲ။ Side Effect ကိုတော့ Android မှာ UI ရေးခြယ်ပြီးတိုင်း လုပ်ချင်စေတာ တစ်ခုခုရှိတဲ့အခါ အသုံးပြုနိုင်တယ်။ မြင်နေရတဲ့ screen ပေါ်က content အပေါ် မူတည်ပြီး notification bar ရဲ့အရောင်ကို ပြောင်းပြချင်ရင် Side Effect နဲ့ လုပ်နိုင်ပါတယ်။
iOS App တွေမှာ on Appear နဲ့ on Disappear လို့ခေါ်တဲ့ side effect တွေကို မြင်ရပါမယ်။ အရင် UI Kit ကတည်းက ပါခဲ့ကြတဲ့ view Did Appear နဲ့ view Did Disappear ရဲ့ declarative ဝမ်းကွဲတွေပါပဲ။
Disposable Effect ကိုတော့ component တခုကို တည်ဆောက်တဲ့အခါနဲ့ ဖျက်ဆီးလိုက်ပြီးတဲ့အခါတွေမှာ လုပ်ချင်တဲ့ task တွေအတွက် အသုံးပြုနိုင်တယ်။ ဥပမာ Native Youtube ကြီးကို ကိုယ့် app ထဲထည့်ထားမယ်ဆိုရင် Video ကို screen မြင်ကွင်းက ဖျောက်တော့မယ်ဆိုတဲ့အခါ View တွေကို စနစ်တကျ စွန့်ပစ်ဖို့ ညွှန်ကြားနိုင်ပါတယ်။ ဒါကြောင့်လည်း Disposable Effect လို့ခေါ်တာပါ။
Declarative UI တည်ဆောက်တဲ့အခါ Side effect တွေကို ကောင်းကောင်းကိုင်တွယ်ဖို့ လိုအပ်ပါတယ်။