डेमो: वेब आईडीई के लिए वृद्धिशील पार्सर

प्रिय साथियों,



मैंने एक डेमो वेब एप्लिकेशन बनाया जो स्पष्ट रूप से दिखाता है कि एक वृद्धिशील पार्सर क्या है और यह कैसे काम करता है। उसे देखो, कृपया। आपकी प्रतिक्रिया और आलोचना सुनकर मुझे खुशी होगी।



और कटौती के तहत, मैं इस बारे में बात करूंगा कि आधुनिक आईडीई कैसे काम करता है। और जिस प्रोजेक्ट पर मैं अभी काम कर रहा हूं, वह वेब एडिटर्स डेवलपमेंट इंडस्ट्री को अगले स्तर तक ले जाने में मदद कर सकता है।

वेब आईडीई

हाल ही में, पूरी तरह से वेब प्रौद्योगिकियों पर आधारित IDE और कोड संपादक अधिक से अधिक लोकप्रियता प्राप्त कर रहे हैं। निश्चित रूप से आपने Cloud9, Koding, या हाल ही में जारी एटम GitHub जैसे उत्पादों के बारे में सुना है। या हो सकता है उनके साथ काम भी करें।



ये संपादक सुविधाजनक हैं कि वे एक दूरस्थ विकास सर्वर प्रदान करते हैं और स्थापना के लिए विशेष चरणों की आवश्यकता नहीं होती है: आप बस ब्राउज़र टैब खोलते हैं और प्रोग्रामर के लिए तैयार-से-उपयोग का वातावरण प्राप्त करते हैं। जावास्क्रिप्ट, पीएचपी, रूबी, पायथन जैसी गतिशील भाषाओं के साथ काम करने वाले वेब डेवलपर के लिए एक अच्छा सामान्य समाधान।



हालांकि, स्थिर टाइपिंग वाली भाषाओं के लिए, उदाहरण के लिए, जावा, सी #, ऑब्जेक्टिव-सी के लिए, इंटेलीज आइडिया और एक्लिप्स जैसे बाजार के दिग्गजों की तुलना में वेब संपादकों की प्रतिस्पर्धा के बारे में बात करने की कोई जरूरत नहीं है। उत्तरार्द्ध की एक प्रमुख विशेषता स्रोत कोड के वाक्यविन्यास और शब्दार्थ की गहरी समझ है, जिससे हमें कोड पूरा होने, कूदने से परिभाषा, रीफ़ैक्टरिंग, और त्रुटि हाइलाइटिंग जैसे उपकरण मिलते हैं। यह काफी महत्वपूर्ण है, खासकर अगर हम एक बड़े कोड बेस के साथ काम करते हैं।



इन IDE का काम पूरे प्रोजेक्ट के सोर्स कोड्स को इंडेक्स करने पर आधारित होता है: एडिटर लगातार काम करने के लिए "इंक्रीमेंटल पार्सर / कंपाइलर" नामक विशेष पर्सर्स का उपयोग करता है, ताकि वे फंक्शन्स, वेरिएबल्स, उन जगहों की परिभाषाओं को खोज सकें, जहाँ वे कोड में उपयोग किए जाते हैं।



एक वृद्धिशील संकलक कई गुणों में एक नियमित संकलक से भिन्न होता है:

1. परिवर्तनों का निरंतर अनुक्रमण । नियमित संकलक पूरे कोड के माध्यम से जाता है, और अपने काम के साथ समाप्त होता है। यदि हमने कोड में कुछ बदला है, तो हम फिर से कंपाइलर शुरू करते हैं। आईडीई के लिए, यह दृष्टिकोण अस्वीकार्य है, क्योंकि उपयोगकर्ता द्वारा दर्ज किए गए प्रत्येक वर्ण के बाद स्रोत कोड का एक पूर्ण पुन: उपयोग सेकंड, या यहां तक ​​कि मिनट के लिए देरी पैदा करेगा।
2. सिंटैक्स त्रुटियों के लिए सहिष्णुता । प्रोग्राम टाइप करने की प्रक्रिया में, स्रोत कोड अक्सर एक वाक्यविन्यास रूप से गलत स्थिति में होता है। हालाँकि, IDE को कोड के बाकी हिस्सों को समझना चाहिए, उदाहरण के लिए, ताकि कोड पूरा होने का कार्य किसी भी समय उपलब्ध हो।
3. पार्स ट्री की संरचना और कार्यक्रम पाठ के बीच संबंध । पार्स ट्री के सभी नोड्स को कोड के टुकड़ों की सीमाओं को संग्रहीत करना होगा, जहां से उन्हें प्राप्त किया गया था। उदाहरण के लिए, ताकि जब आप कोड में फ़ंक्शन नाम पर क्लिक करें, तो IDE इस फ़ंक्शन की परिभाषा पर कर्सर को फेंक देगा।

इस तरह के एक कंपाइलर का विकास पारंपरिक संकलक विकसित करने की तकनीक से काफी अलग है। दुर्भाग्य से, आज हमारे उद्योग में वृद्धिशील पार्सर और संकलक बनाने के लिए व्यावहारिक रूप से कोई उपकरण नहीं हैं। अधिकांश मौजूदा लोगों को बहुत अधिक श्रम और समय की लागत पर मैन्युअल रूप से लिखा जाता है।



इस कारण से, मैंने वृद्धिशील पार्सर के निर्माण के लिए एक पुस्तकालय - पापा कार्लो - विकसित किया। इस लाइब्रेरी का उपयोग करके, आप उपरोक्त सभी गुणों के साथ एक वृद्धिशील पार्सर बना सकते हैं। इसके अलावा, लाइब्रेरी एपीआई साधारण पार्सर-कॉम्बिनेटरों के एपीआई की तरह दिखता है, जिसका उपयोग अधिकांश कंपाइलर डेवलपर्स के साथ काम करने के लिए किया जाता है: आप बस पीईजी नोटेशन में भाषा के व्याकरण का वर्णन करते हैं।



ऊपर डेमो पूरी तरह से पापा कार्लो लाइब्रेरी का उपयोग करके लिखा गया है, और ब्राउज़र में क्लाइंट साइड पर पूरी तरह से काम करता है। इस दृष्टिकोण का उपयोग स्थिर टाइपिंग वाली भाषाओं के लिए प्लगइन्स विकसित करने के लिए किया जा सकता है, उदाहरण के लिए, मौजूदा वेब आईडीई के लिए। या यहां तक ​​कि कोड संपादकों जैसे उदात्त पाठ के लिए, उन्हें पूर्ण आईडीई में बदल देना।

इस डेमो के हुड के तहत इसके बारे में थोड़ा सा

पापा कार्लो लाइब्रेरी को ही स्काला में लिखा गया है, और स्कैलेज संकलक का उपयोग करके जावास्क्रिप्ट में संकलित किया गया है। इस प्रकार, सभी गणना पूरी तरह से क्लाइंट साइड पर, आपके ब्राउज़र में की जाती हैं। केवल स्थिर सामग्री सर्वर से वितरित की जाती है: जेएस और एचटीएमएल फाइलें।



पार्सर एक वेब कार्यकर्ता (यदि ब्राउज़र द्वारा समर्थित) में चलता है। यह आपको उपयोगकर्ता इंटरफ़ेस से लोड को हटाने की अनुमति देता है, साथ ही साथ समानांतर गणना भी करता है।



सभी ग्राफिक्स SVG और d3.js लाइब्रेरी का उपयोग करके बनाए गए हैं। CodeMirror का उपयोग कोड संपादक विजेट के रूप में किया जाता है।

---

दोस्तों, अगर आपको यह डेमो पसंद आया, तो कृपया प्रोजेक्ट का समर्थन करें, इसे GitHub पर डालें: https://github.com/Eliah-Lakhin/papa-carlo ।