कोणीय {{AOT बनाम JIT}} बनाम प्रतिक्रिया संकलक: भाग - I

हमें इंटरप्रेटर और कंपाइलर की तुलना करके शुरू करते हैं

X से Y का एक कंपाइलर एक प्रोग्राम है जो किसी भी प्रोग्राम P को किसी भाषा X से शब्दार्थिक समकक्ष प्रोग्राम p program में कुछ भाषा Y में इस तरह से ट्रांसलेट करता है कि प्रोग्राम के शब्दार्थ संरक्षित रहे, यानी कि इंटरप्रेटर के साथ p ′ की व्याख्या करना Y के लिए समान परिणाम प्राप्त होंगे और X के लिए दुभाषिया के साथ p की व्याख्या करने के समान प्रभाव होंगे।

संकलक === अनुवादक

संकलक बनाम दुभाषिया

भाषा ए के लिए दुभाषिया एक ऐसा प्रोग्राम है जो भाषा एक्स में लिखे गए किसी भी प्रोग्राम पी को निष्पादित करता है जैसे कि यह प्रभाव करता है और एक्स के विनिर्देश द्वारा निर्धारित परिणामों का मूल्यांकन करता है।

अवरोधक === निष्पादनकर्ता

कोणीय 1 में संकलक

एक सामान्य संकलक

AngularJS 1.x संकलक जो कि प्रकृति में काफी सामान्य है जो गतिशील संगणनाओं के समूह का प्रदर्शन करके किसी भी टेम्पलेट के लिए काम करता है। इस प्रकृति के कारण जावास्क्रिप्ट वर्चुअल मशीन निचले स्तर पर गणना के अनुकूलन के साथ संघर्ष करती है। इसके पीछे मुख्य कारण है:

`VM उन वस्तुओं की आकृतियों को नहीं जानता है जो गंदे-जाँच तर्क के लिए संदर्भ प्रदान करती हैं (यानी तथाकथित गुंजाइश), यह इनलाइन कैश को बहुत अधिक छूट मिलती है जो निष्पादन को धीमा कर देती है`

कोणीय 2 ++ में संकलक

JIT

कोणीय 2 अनुप्रयोग के शुरुआती चरण में जब ब्राउज़र में बूटस्ट्रैप किया जाता है, तो जेआईटी कंपाइलर बहुत काम करता है (हर बार उपयोगकर्ता वेब पेज खोलने पर घटक टेम्पलेटों को पार्स करता है, एक भाग जो HTML टेम्प्लेट को रन करने योग्य कोड में बदलता है, घटकों का विश्लेषण करने के लिए) रनटाइम में आवेदन में और स्मृति में कोड उत्पन्न करते हैं। जब पृष्ठ रीफ्रेश किया जाता है, तो जो भी काम किया गया है, वह सब फेंक दिया जाता है, और जेआईटी कंपाइलर फिर से काम करता है। यह एओटी के लिए एक बड़ा झटका था

जस्ट-इन-टाइम संकलन के साथ घटनाओं का प्रवाह

  • टाइपस्क्रिप्ट के साथ कोणीय अनुप्रयोग का विकास और Tsc के साथ अनुप्रयोग का संकलन।
  • बंडलिंग → न्यूनतमकरण → तैनाती
  • क्लाइंट पर → सभी जावास्क्रिप्ट एसेट डाउनलोड करें → कोणीय बूटस्ट्रैप → एंगुलर जीईटी संकलन प्रक्रिया से गुजरता है → एप्लीकेशन रेंडर हो जाता है
JIT बंडल अवलोकन

AOT

कंपाइलर TS कोड को JS कोड में बदल देता है (यह JS पहले से ही कोणीय के लिए भी संकलित किया जा चुका है)। अब, यह संकलित जेएस कोड को फिर से ब्राउज़र द्वारा संकलित किया जाता है ताकि HTML को रेंडर किया जा सके। इस प्रकार कोणीय की विशेषताओं को पहले से ही एओटी संकलक द्वारा ध्यान रखा गया है और इसलिए ब्राउज़र को परिवर्तन का पता लगाने, घटक निर्माण और निर्भरता इंजेक्शन के बारे में ज्यादा चिंता करने की आवश्यकता नहीं है।

एओटी संकलन

इस प्रकार हम रन टाइम (ब्राउज़र) से संकलन को स्रोत कोड पीढ़ी में स्थानांतरित करते हैं। इस तरह से संकलन केवल एक बार बिल्ड टाइम पर होता है और हमें अब कोणीय कंपाइलर और HTML टेम्प्लेट को बंडल में शिप करने की आवश्यकता नहीं है।

कोणीय 5+ में, आप जीटीटी की उपेक्षा करने और पूर्ण एओटी जाने में सक्षम होंगे, यहां तक ​​कि विकास के निर्माण के लिए भी !!!

समय-समय पर संकलन के साथ घटनाओं का प्रवाह

  • टाइपस्क्रिप्ट के साथ कोणीय अनुप्रयोग का विकास → एनजीसी के साथ आवेदन का संकलन → कोणीय कंपाइलर के साथ टेम्पलेट्स का संकलन करता है और (आमतौर पर) टाइपस्क्रिप्ट बनाता है
  • जावास्क्रिप्ट के लिए टाइपस्क्रिप्ट कोड का संकलन → बंडलिंग → न्यूनतमकरण → तैनाती
  • क्लाइंट → सभी संपत्ति डाउनलोड करें → कोणीय बूटस्ट्रैप और एप्लिकेशन रेंडर
एओटी बंडल अवलोकन

एओटी सुविधाएँ

तेजी से प्रतिपादन, कम अतुल्यकालिक अनुरोध, छोटे कोणीय रूपरेखा डाउनलोड आकार और पहले टेम्पलेट त्रुटियों का पता लगाएं

रिएक्टर में संकलक

JSX बहुत शुरुआत से ही बैबेल और टाइपस्क्रिप्ट दोनों का समर्थन करता है, जिसने जावास्क्रिप्ट के साथ एकीकरण को आसान बनाया है और प्रतिक्रिया में बाबेल और टाइपस्क्रिप्ट दोनों द्वारा उपयोग किए जा रहे संस्करण के बारे में परवाह नहीं है जो कम चिंता का विषय है।

पहले रिएक्टर कंपाइलर रिएक्ट घटक पेड़ों का मूल्यांकन करता है और आपके रिएक्ट घटकों के लिए एक बुद्धिमान अनुकूलन करता है। रिएक्ट कंपाइलर को एप्लिकेशन बंडल के मूल घटक को जानना चाहिए और एक बार यह दिए जाने पर कि इससे घटकों के पूरे घटक वृक्ष को स्वचालित रूप से पता लगाना चाहिए।

प्रतिक्रिया संकलक यह बताने के लिए कि आपके आवेदन के लिए मूल घटक क्या है, आपको __optimizeReactComponentTree (MyRootReactComponent) नामक एक प्रीपैक वैश्विक फ़ंक्शन का उपयोग करना होगा। उदाहरण के लिए आपके सॉरेकोड में (इसे बंडल करने और इसे प्रीपैक करने से पहले) आप कर सकते हैं:

// MyComponent.js
'प्रतिक्रिया' से आयात प्रतिक्रिया;
वर्ग MyComponent का विस्तार React.Component {
  प्रस्तुत करना() {
    वापसी <स्पैन> हैलो वर्ल्ड! ;
  }
}
// __optimizeReactComponentTree केवल Prepack के लिए जाना जाता है
// तो हम इसे एक सशर्त में लपेटते हैं ताकि कोड अभी भी काम करे
// प्रपेक के बिना स्थानीय विकास परीक्षण के लिए
अगर (वैश्विक।
  __optimizeReactComponentTree (MyComponent);
}
मॉड्यूल.एक्सपोर्ट्स = MyComponent;

React जावास्क्रिप्ट कोड को संकलित करता है जो आभासी DOM को हेरफेर करता है जबकि Angular JavaScript कोड को संकलित करता है जो DOM को सीधे जोड़तोड़ करता है। कोणीय दोनों की गहरी समझ नहीं है और कोड स्तर पर प्रतिक्रिया करता है। मेरे अगले ब्लॉग पर अधिक जानकारी दें। :)