Thet Khine WRITTEN BY 701 Followers · About Upgrade Following Thet Khine Following 17 How does JavaScript runtime work Thet Khine Mar 3 · 4 min read JavaScript က ေနရာတိင်းမာ သံးလာတယ် အသံးဝင်လာတယ်။ Backend မာ Node.js , front end ဘက်မာ Angular, React, Mobile ဘက်မာ React Native, Ionic ေနာက် desktop ဘက်မာ electron အစ ိတာေတွဟာ JS Framework ေတွ ချည်းပဲ။ Node.js ဆိရင်သက Google ရဲ. Chrome browser မာ သံးတဲ့ v8 ဆိတဲ့ JavaScript Engine ကိသံးထားတာ။ ဒီေနရာမာ Developer ေတွ က Web Browser ဆိတာရယ် Rendering Engine ဆိတာရယ် JavaScript Engine ဆိတာရယ်ကိ ကွဲ တယ်လ.မထင် ိ ဘး။ Browser ေတွဘယ်လအလပ် ိ လပ်သလဲဆတာ ိ ဒီမာေရးထားဖး တယ်။ https://www.facebook.com/notes/thet-khine/how-web-browserswork/10207199611668159/?fref=mentions Developer ေတွမျက်စန ိ .ဲ ြမင်ေနရတာက Browser တခတည်း ဒါေ ကာငခ ့် နက Browser Engine, Rendering Engine နဲ. JavaScript Engine သံးခကိ မသဲကတ ွဲ ာ။ တကယ်ေတာ့ Browser တခလိ. ဆိလိက်ရင် ခနက သံးခေပါင်းမ တခြဖစ်တာ။ ဒီ ေနရာမာ တချိ .က browser engine နဲ. rendering engine ကိတွသ ဲ းံ ကေသးတယ်။ သတိ.ရဲ. အဓိက အလပ်က HTML , CSS makup ေတွကိ layout ချမယ် screen ေပ မာေပ လာေအာင် rendering လပ်မယ်။ Rendering engnine ကိ layout engine လိ.လဲေခ ေသးတယ်။ Rendering engine ေတွကိ သက်သက် ယသံးလိ.ရတယ်။ ဥပမာ Apple Safari မာ WebKit ကိသံးတယ် ေနာက် PhantomJS မာလဲသးတယ် ံ ။ IE မာေတာ့ Trident ဆိတဲ့ rendering engine ကိသံးတယ်။ ခနက rendering engine ရဲ.အလပ်သည် UI element ေတွကိ web element ေတွကိ display ြပတာပဲ လပ်တာ။ အဲေ ့ တာ့ JavaScript code ေတွ run ဖိ.ဘယ်သကလပ်ရသလဲဆရင် ိ JavaScript Engine ကလပ်ရတယ်။ ဥပမာ Chrome မာ Blink rendering engine ကိသံးတယ်သ.က WebKit ရဲ. WebCore Component ကိ fork လပ်ထားတာ။ Chrome မာ JavaScript Engine အေနနဲ.ကျေတာ့ V8 ဆိတာကိသံးတယ်။ ေနာက် Node.js မာလဲ v8 ကိသံးတယ်။ Apple Safari မာဆိရင် Nitro ဆိတဲ့ JavaScript Engine ဆိတာကိသံးတယ်။ အဲေ ့ တာ့ Developer ေတွန.ဲ JavaScript ေရးတဲအ ့ ခါ code optimization လပ်တအ ဲ့ ခါအေတာ်လက်ဝင်တယ်။ ဥပမာ Chrome မာ Optimized code က Safari မာ opimized ြဖစ်ချင်မြဖစ်မယ်။ ဒါကိဆိချင်တာ။ JavaScript က dynamic language , သ.ကိ interpret လပ်တယ်လ.လဲ ိ သိ ကတယ်။ Interpret လပ်တယ်လ.ဆိ ိ ရင် browser အားလံးမာ မမန်ဘး ။ ဘာလိ.လဲဆေတာ ိ ့ Chrome v8 ေရာ Nitro ေရာမာ JIT compilation ေတွ JavaScript code ကေန native machine code ေြပာင်းတာေတွလပ်ထား ကတာ ကာ ပီ။ ေြပာရရင် modern JavaScript runtime ေတာ်ေတာ်များများသည် JavaScript to native machine code compilation ကိလပ် ကရတယ်။ Language အေနနဲ. ကည့ရ ် င်ေတာ့ interpret လပ်သာွ းတယ် ဆိတာဟတ်တယ်။ line by line execute လပ်တယ်။ လိအပ်ေတာမ ့ parse လပ် ပီး execute လပ်တယ်။ တခါတေလ ခနခန ြပန် parse မလပ်ပဲ cache လပ်ထားတာလဲ ိတယ်။ ေနာက် implementation ဘက်မာကျေတာ့ JavaScript code ေတွကိ interpreter မသံးပဲ အထဲမာ JavaScript ကေန intermeidate form ကိေြပာင်းမယ် အဲက ့ ေန native code ကိေြပာင်း ပီး compile လပ်မယ်. အဲလ ့ လပ် ိ က တယ်။ ဒါေ ကာငမ ့် ျားေသာအားြဖင ့် implementation အရဆိ interpret လပ်တယ် လိ.ဆိလိ.မရြပန်ဘး။ Hybrid apporach ေတွလဲ ိတယ်။ JIT(Just in time compilation ) ဥပမာ code တခကိ run ေတာမ ိ သ.ကိ native machine ့ ယ်ဆမ code ေြပာင်းပစ်တာမျိ း။ ေနာက် AOT (Ahead of time compilation) သက code ကိမ run ခင်ကတည်းက ကိ ပီး native code ေြပာင်းထားတာမျိး။ ဘယ်လိ code ေတွကိ AOT လပ်သလဲဆရင် ိ ခနခန run တဲ့ hot method ေတွကိ AOTသံး ပီး native machine code ေြပာင်းေလ့ ိတယ်။ Native machine code နဲ.အထဲမာ run ရတဲ့ အတွက် speed သည်တက်လာတယ်။ ဒါေပမဲ့ C/C++ လိ speed ေတာမ ့ ရေသးဘး ဘာလိ.လဲဆေတာ ိ ့ runtime မာ JavaScript ကေန Machine code ကိြပန်ေြပာင်းေန ရတဲ့ compilation process ိေနလိ.။ ေနာက် dynamic langauge ြဖစ်တအ ဲ့ တွက် Object ေတွမာ attribute ေတွထမ ဲ့ ယ် ေြပာင်းမယ် မတ်မယ်ဒါမျိ းကိ compiler ေတွ အေနာက်မာ machine code ထတ်တအ ဲ့ ခါ deferencing သံးရတယ်။ ဥပမာ ဆိ ကပါ ဆိ. a+b ဆိပါစိ. a နဲ. b သည် အားလံးြဖစ် င် ိ တယ်။ အဲေ ့ တာ့ Java, C မာလိ integer အေပါင်း string concatenation တခါတည်းတန်းမသိဘး။ Runtime ေရာက်ေတာမ ့ a ရယ် b ရယ်အေပ မတည် ပီး native machine code ထတ်ရတယ်။ ဒါေတွေ ကာင ့် လဲ ေလးတယ်။ ေနာက်တခက DOM access code, browser ကေပးထားတဲ့ Global object ေတွန.ဲ JavaScript engine ကေပးထားတဲဟ ့ ာေတွမတဘး။ ဥပမာ document.getElementById ဒါမျိ းဆိရင် DOM ကိ access လပ်ရတာ အဲဒ ့ ီ API သည် JavaScript Engine မာ မပါဘး။ Browser ကေနေပးထားရတာ ။ အဲဒ ့ ေ ီ တာ့ JavaScript engine ကေန Browser DOM API ကိ လမ်းေခ ရတယ်။ ေနာက် Dom ေြပာင်းသွားရင် rendering engine သည် layout ကိေြပာင်းပစ်ရမယ်။ ဒါမျိ းကိ page reflow လိ.ေခ တယ်။ Web page တခမာ ိတဲ့ css attribute ေလးတခေြပာင်းလိက် ံ နဲ. web page layout ကိြပန်တက ွ ရ ် တယ် အဲဒ ့ အ ီ တွက် cost ကန်တယ်။ ဒါေ ကာင ့် DOM code ေတွသည် ေ းတယ်ဆတာြဖစ် ိ ကန်တာ။ JavaScript Runtime လိ.ေြပာလိက်ရင် သ.မာ Memory area ေတွပါမယ်။ ဥပမာ Stack , Heap ေတွ ေနာက် Heap ကိ manage လပ်ဖိ. GC Garabage Collection algorithm ေတွပါမယ်။ GC ေတွကလဲ JavaScript engine တခနဲ.တခမတ ကဘး။ ေနာက် JavaScript ကိ compilation လပ်ဖိ. JIT, AOT compiler ေတွပါမယ်။ ေနာက် Global variable ေတွ အစ ိတာေတွမတ်ဖိ. execution context ဆိတာပါမယ်။ Execution context က တခထက်မက ိ င် ိ တယ်။ GC ကေတာ့ execution context You highlighted အားလံးက အတတသံး ကရတယ်။ ဥပမာ browser တခမာ Iframe ေတွပါလာ ပီဆိ ရင် multiple execution context ြဖစ် င် ိ တယ်။ ဒါေပသိသတိ.အားလံးက GC ေတွ JIT, AOT ေတွကအကန် ိ အတတ share လပ် ပီးသံး ကရတယ်။ JavaScript က တြခား language ေတွန.ဲ မတတဲအ ့ ချက်က single threaded language ြဖစ်တယ်။ အဲေ ့ တာ့ JavaScript runtime တခမာ thread တခပဲ ိတယ်။ Java, C# မာဆိရင် multiple execution thread ေတွ ိတယ်။ Thread တခချင်းဆီ မာ သတိ.နဲသက်ဆင် ိ ရာ method call stack ေတွ ိမယ်။ Method call stack ဆိတာ method တခ function တခေခ ပီဆရင် ိ function အတွကလ ် အပ် ိ တဲ့ variable ေတွ runtime data structure ေတွ ပါတဲ့ stack frame တခကိ ခနက method call stack ေပ ကိတင်ရတယ်။ Function ပီးသွားရင် ခနက method call stack ေပ ကေန stack frame ကိြပန် ပီး pop လပ်ရတယ်။ ဒီနည်းနဲ. ဘယ် method ပီးရင် ဘယ် method ကိ return ြပန်ရမယ်ဆတာကိ ိ runtime ကသိတာ။ Single thread နဲ. run ေနတဲအ ့ တွက် function တခကေန computational time ကိ အ ကာ ကီးယထားမိရင် ဥပမာ loop ကိ အများ ကီးပတ်လက် ိ တယ်ဆပါစိ ိ .ဒါဆိအချိန ် ကာသွားမယ်။ အဲဒ ့ က ီ ျရင် browser မာ unrepsonive JS error တက်လာလိမမ ့် ယ်။ ဒါဆိရင် long compuation တွကခ ် ျင်ရင် ဘာလပ်ရမလဲဆရင် ိ အပိင်းအပိင်းေလးေတွ ခွဲ ပီး တခချင်းြပန် run ရတယ်။ SetInterval တိ. setTimeout တိ.ကိဘယ်လိ schedule လပ်သာွ းသလဲဆတာကိ ိ နားလည်ဖိ.ကျေတာ့ JavaScript ရဲ. Concurrency model နဲ. event loop ဆိတာကိ နားလည်ရမယ်။ JavaScript memory ကိ ခွလ ဲ က် ိ ရင် သံးမျိ းရမယ်။ Stack (ဒါက method calling လပ်တအ ဲ့ ခါ method တခြခင်းရဲ. stack frame ေတွကသိ ိ မ်းထားတာ ) , Heap (သ ကေတာ့ JavaScript object ေတွကိ သိမ်းတဲေ ့ နရာ. user define လဲြဖစ်ချင်ြဖစ်မယ်။ system define လဲြဖစ်ချင်ြဖစ်မယ်။) ဥပမာ var a = new Date(); ဒါကိ run မယ်ဆရင် ိ memory ေပ မာ Date constructor ကိ run ဖိ. stack frame ေပ frame တခတင်ရမယ်။ ေနာက် date object အတွက် ကျေတာ့ heap ေပ မာ လိအပ်တဲ့ memory ပမာဏကိယရမယ်။ ေ◌နာက◌ ံ းတခက Queue, Queue ကကျေတာ့ အခ CPU ေပ မာ run ေနတဲ့ method ေတွမ ိေတာဘ ့ း နည်းသွား ပီဆရင် ိ queue ထဲမာေစာငေ ့် နတဲ့ task ေတွကိ run ဖိ.လပ်ထားတာ ။ ဥပမာ setInterval နဲ.ေခ ထားတဲ့ method ေတွဆရင် ိ queue ထဲဝင်သာွ းမယ်။ အချိနရ ် ရင် scheduler ကေန queue ထဲကေကာင်ေတွကိ run တယ်။ ဒီနည်းနဲ. single thread မာ setInterval, setTimeout , event ေတွကိ process လပ်သာွ းတာ။ Event Loop ဆ◌ိတာ JavaScript queue ရဲ. အလပ ပဲပံ့ ◌ကိၿပတာ while (queue.waitForMessage()) { queue.processNextMessage(); } ဒီလလပ် ိ သာွ းတာ။ queue ထဲမာလပ်စရာ ိရင် လပ်တယ်။ မ ိရင် ေစာငေ ့် နတယ်။ တြခားအလပ်ေတွလပ်တယ်ေပါ။့ Chrome ရဲ. V8 လိ JIT AOT အဆငဆ ့် ငပ ့် ါတဲေ ့ ကာင်ေတွမာ JavaScript code ကေန တန်း ပီး interpret မလပ်ဘး။ Native code ေြပာင်း ပီးမလပ်တယ်။ ေနာက် တြခား JS engine specific optimization ေတွ ိေသးတယ်။ ဥပမာ V8 မာဆိရင် JavaScript Object တခကိ rutime မာ hidden class တခအေနနဲ.သိမ်းထားတယ်။ ေနာက်တချိန ် အဲဒ ့ ီ Object ကိ attribute ေတွထပ်မထဲရ ့ င် v8 က ခနက Object ရဲ. field ေတွ method ေတွ access လပ်တေ ဲ့ ကာင်မျိ းကိ optimized လပ် င် ိ တယ်။ အဲလ ့ မျိ ိ းေရး တာကိ monomorphism လိ.ေခ တယ်။ Dynamic language ေရးေပမဲ့ Polymorphic data structure သံးတာ များရင် engine အေပ မတည် ပီး optimization ေကာင်းေကာင်းမရ င် ိ ဘး။ 17 JavaScript More from Thet Khine Following Mar 3 How does Assembler work Program ေတွရဲ.ဟိးေအာက်ဆးံ အဆငသ ့် ည် machine language ပဲ။ ဆိချင်တာက ေန.စ သံးေနရတဲ့ program ေတွအားလံးသည် တနည်းနည်းအားြဖင ့် machine language ြဖစ်တဲ့ CPU နားလည်တဲ့ instruction ေတွဆေ ီ ြပာင်းသွားရတယ်။ အဲဒ ့ ီ machine instruction ေတွကိ OS အကအညီန.ဲ CPU ေပ တင် run ကတာပါပဲ။ ေကျာင်းသားဘဝ Master Thesis လပ်ေတာ့ paper ေတွ အများ ကီးယထားတဲ့ ဆရာမ ကီးကေမးတယ်(ခေတာေ ့ ကျာင်းအပ် ကီးေတာင် ြဖစ်ေန ပီ) မင်း Compiler ကိဘာနဲ.ေရးလဲတ။ဲ့ Java နဲ.ေရးတယ်ဆေတာ ိ ေ ့ တွ.လားတဲ့ သက Java ယသံးတာတဲ။့ သဆိချင်တာက Java ကိယသံးလိက်လ.ိ အကန် ဟက်ချေလာင်းြဖစ်သာွ းတယ် ေြပာ ချင်တာ။ တကယ်တမ်းက Java လိပဲ custom bytecode ထတ် ပီး ေနာက်မ C++ နဲ.ေရးထားတဲ့ Virtual Machine နဲ. ြပန် interpret လပ်ရတာ။ ဆိချင်တာက program ေတွ high level language ေတွဆတာ ိ abstraction ေပ abstraction ဆငထ ့် ားတာ။ ဥပမာ Java ဒါမမဟတ် တြခား High level language ဆိ ပါစိ. သ.ကိ run မယ်ဆရင် ိ VM ကိ သံးတယ်။ VM သည် C/C++ ကိသံးမယ်။ C/C++ သည် native machine code ဒါမမဟတ် specific platform မာ run င် ိ တဲ ့ code ထတ်ဖိ. assmebler ကိ internally သံးမယ်။ ဒီလိ အဆငဆ ့် င ့် abstraction ေတွ ငံ ပီး အလပ်လပ် ကတာ။ JVM လိေကာင်မျိ းဆိ JIT (Just In Time ) compilation ပါေတာ့ native code (machine code) ကိ runtime မာထတ်တယ်။ ဒါသည် တနည်း အားြဖင ့် assembler ရဲ.အလပ်ကိ … Read more · 2 min read 1 Mar 3 How does Java Work How does Java work (UCSY IT Camp မာေြပာသွားတာေတွဖိ.ြပန်ေရးေပးထားတာပါ) Programming language ေတွ implement လပ်တအ ဲ့ ခါ compiler,interpreter, transpiler ေတွသးံ ပီး လပ်ရတယ်။ Compiler က source code ကိယတယ် ပီးရင် output ကျေတာ့ native code , executable code ထတ်တယ်။ ေကာင်းတာက သက ြမန်တယ်။ မေကာင်းတာက native platform တခအတွက် ပဲ run လိ.ရမယ် ဥပမာ Window C Compiler က ထွကတ ် ဲ့ native exe သည် linux မာသွား run လိ.မရဘး။ ေနာက်တခက compiler ေတွသည် runtime မာေြပာင်းလဲရတာ အရမ်းများတဲ့ dynamic language feature ေတွကိ implement လပ်ရတာ အဆင်မေြပဘး။ ဒါက သက်သက်ေရးထားတာ ိတယ် ာဖတ် ကည့ေ ် စချင်တယ်။ ဒါေ ကာင ့် များေသာအားြဖင ့် dynamic programming langauge ေတွကိ interpreter သံး ပီး implement လပ်တယ်။ Transpiler ကကျေတာ့ high level source Program တခ ယ ပီး output အေနနဲ. သ.ထက် … Read more · 3 min read 10 Mar 3 Practical Functional Programming Series(Part 2) How Functional Paradigm Differ with Imperative(State vs Immutable Data Structure) Functional Programming paradigm က imperative programing paradigm နဲ. အဓိက ဘယ်လိ thinking ေတွ problem solving ေတွ ဘယ်လကွ ိ ာသလဲဆတာ ိ ဒီ အပိင်းမာ င်းမာပါ။ State vs Immutable Data Structure. Imperative Paradigm ရဲ. အဓိက concept သည် state change အေပ မာမတည် တယ် variable ေတွရဲ. တန်ဖိးကိ assignment statement သံး ပီးေတာ့ ေြပာင်းလဲ သွားြခင်းနဲ. အလပ်လပ်တယ်။ Functional Programming ကျေတာ့ pure function ေတွကသံ ိ း ပီးေတာ့ side effect မပါေအာင် ထိနး် ပီးအလပ်လပ်တယ်။ Immutable Data Structure ေတွကသံ ိ းတယ်။ State ဆိတာ impeative paradigm မာသံးတဲ့ variable ေတွလ.ဆိ ိ လိရမယ်။ Mutable data structure ေပါ ့အချိနေ ် ပ မတည် ပီး တန်ဖိးေြပာင်းလဲလ.ရတဲ ိ ေ ့ ကာင်ေတွေပါ။့ Impeative paradigm မာသံးတဲ့ variable ေတွသည် value ကိ time အေပ မတည် ပီးေတာေ ့ ြပာင်းလိ.ရတယ် ဥပမာ int num = 1; num += 4; ပထမ line မာ num သည် 1 ြဖစ်မယ် ဒါေပမဲ့ ဒတိယ line ကျေတာ့ num သည် 5 ြဖစ် မယ်။ ဆိချင်တာက num ဆိတဲ့ varaible သည် အချိနေ ် ပ မတည် ပီးေတာ့ တန်ဖိး အမျိ းမျိ းေြပာင်းေနမယ်။ FP မာကျေတာအ ဲ့ မဟတ် ိ ဘး တကယ့် real functional ့ လ programming langauge ေတွ pure functional programming language ေတွမာ ဆိရင် variable သည် contant ပဲြဖစ်တယ်(ဥပမာ Haskell) ။ သ.ရဲ. constant ဆိတဲ့ သေဘာကလဲ impeative က constant နဲ.မတဘး … Read more · 2 min read 6 Mar 3 Practical Functional Programming Series(Part 1) Functional Programming က mainstream programming language ေတွ ေနာက် frontend ဘက်ေတွ မာလဲသးလာေတာ ံ ိ တာ။ ့ သ.အေ ကာင်းေရးဖိ.လပ်လက် ဟိးအရင်က Gentle introduction ေရးဖးတယ် ဒီမာ https://web.facebook.com/thet.khine.587/posts/10206463929836573 Functional programming က ဘယ်ကစလဲလ.ေြပာရင် ိ Fortan ပီးေပ တဲ့ language LISP က စတယ်လ.ေြပာရမယ် ိ ။ Fortan လိ language မျိ းကိ imperative paradigm အ ယ ွ ဝ ် င်လ.ေြပာရမယ် ိ ဘာကိဆိလိတာလဲဆေတာ ိ ့ Programming သည် လက် ိ von neumann architecture နဲ.နီးစပ်တယ် အဲအ ့ တိင်းေရးတာကိ Imperative programming လိ.ေခ တာ။ ြမင်သာေအာင်ေြပာရရင် Computer memory ထဲကေန variable ေတွကယ ိ +,-,*,/လပ်တယ် conditional statement, loop ေတွသးတယ် ံ အဲလ ့ ိ programming style မျိ းကိ imperative လိ.သံးတာ။ လက် ိသးေနတဲ ံ ့ hardware နဲ.နီးစပ်တယ်။ Conditional စစ်တာ loop ဆိတာမျိ းက assembly, machine code မာ တိက် ိက် support ေပးထားတာ။ Functional programming paradigm ကိ ခနက စ းစားတဲ့ von neumann architecture ကေန ခွထ ဲ က ွ စ ် းစား ပီး computation လပ်လ.မရဘးလားဆိ ိ တဲ့ ယဆချက်ေတွကေန ေပ လာတာ။ Imperative paradigm ေတွက Turing machine model ေပ အေြခခံထားတာ။ Turing machine ဆိတာ infinite tape တခ ိမယ် အဲ့ tape ေပ မာ လိချင်တာေတွ ိက်လ.ရမယ် ိ … Read more · 3 min read Mar 3 Gentle introduction to lambda calculus (λ calculus) Part 3 (Arithmetic, Boolean ) အရင်အပိင်းတန်းက Successor အေ ကာင်း င်းသွားတယ် Successor ဆိတာ church numeral n ေပးလိက်ရင် n+1 ြပန်ေပးတဲေ ့ ကာင်ေပါ။့ Addition Successor ကိသံး ပီးေတာ့ church number ၂ခကိေပါင်းလိ.ရတယ်။ ဉပမာ m+n ဆိ ပါစိ. တကယ်က m ကိ +1 ေပါင်း n ကိမတ ် းတာလိ ိ .ယဆတာ။ ဉပမာ 3+2 ဆိပါစိ. ဒါဆိ ဒီလိ စ းစားတာ 3+1+1 ေပါ ့(+1) နဂိ 3 ကိ +1 ေပါင်း 2 ကိမလ ် ပ်လက် ိ ရင် 3+2 ရမယ်ေပါ။့ lamdbda calculus နဲ.ဆ◌ိဒလ ီ ရမယ် ိ PLUS = λmn.λfx.(m f) ((n f) x)) M ေ◌ရာ n ေရာက church number ေတွ reduction step ေတွကေတာ ိ ့ ေရး ့ ထဲမ ေတာဘ ့ း ပိ ပ်သာွ းမာစိးလိ. ((n f) x) ဆိတာက church numeral n ကိေခ သံးတာ။ အဲေ ့ ကာင်ကိ ေ .က f ((n f)x) ဆိတာက successor function အဲတ ့ ာကိ m function ထဲ ထဲလ ့ က် ိ ေတာ့ m ကိ +1 n ခါတိးတာပဲ အဲေ ့ တာ့ m+n ရတယ်ေပါ ့ let ONE = f => x =>… Read more · 3 min read 23 About Help Legal