अच्छा इलेक्ट्रॉन अनुप्रयोगों को विकसित करने का मुख्य रहस्य

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

सामग्री के लेखक, जिसका अनुवाद हम आज प्रकाशित करते हैं, का कहना है कि वह इलेक्ट्रॉन के रक्षक की भूमिका नहीं निभाएगा, हालांकि सब कुछ इस मंच की सफलता की बात करता है। सच है, कोई भी इलेक्ट्रॉन अनुप्रयोगों में निहित ज्यादतियों को छूट देने वाला नहीं है। क्या इस तरह के अनुप्रयोगों को विकसित करते हुए, एक शॉट में एक पत्थर से दो पक्षियों को मारने के लिए संभव है?


इलेक्ट्रॉन की कुछ समस्याएं (बड़े फ़ाइल आकार, धीमी गति से लोडिंग) उन प्रौद्योगिकियों की विरासत हैं जिन पर यह प्लेटफ़ॉर्म आधारित है। उन्हें निम्न स्तर पर संबोधित करने की आवश्यकता है। अधिक गंभीर समस्याओं (मेमोरी की खपत, इंटरफेस की सुस्ती) को उस स्तर पर हल किया जा सकता है जिस पर इलेक्ट्रॉन-अनुप्रयोग विकसित होते हैं। हालाँकि, इन समस्याओं को हल करना आसान नहीं है। क्या होगा अगर कोई रहस्य है, जिसे जानकर आप स्वचालित मोड में इन कमियों को कम कर सकते हैं?

यदि आप प्रोग्राम कोड पढ़ना पसंद करते हैं, तो आप तुरंत इस रिपॉजिटरी में देख सकते हैं। इस परियोजना को इस सामग्री में माना जाएगा।

रहस्य का सार

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

• त्वरित डेटा लोड हो रहा है। एप्लिकेशन उपयोगकर्ताओं को नेटवर्क पर डाउनलोड करने के लिए डेटा का इंतजार नहीं करना होगा। डेटा को स्थानीय भंडारण से डाउनलोड किया जाता है। यह तुरंत एप्लिकेशन को एक ठोस प्रदर्शन को बढ़ावा देता है।
• कम कैशिंग आवश्यकताओं। क्लाइंट एप्लिकेशन को विशेष रूप से कैशिंग के बारे में चिंता करने की आवश्यकता नहीं है। ऐसा इसलिए है क्योंकि उसके लिए आवश्यक सभी डेटा स्थानीय रूप से उपलब्ध है। प्रदर्शन के एक सभ्य स्तर तक पहुंचने के लिए एक वेब एप्लिकेशन के लिए, इसे आमतौर पर अपने स्थानीय राज्य में प्रभावशाली मात्रा में डेटा लोड करने की आवश्यकता होती है। यह इलेक्ट्रॉन अनुप्रयोगों की बहुत अधिक मेमोरी खपत के कारणों में से एक है।

यहां मैं स्थानीय डेटा भंडारण के अन्य लाभों के बारे में बात नहीं कर रहा हूं, उदाहरण के लिए, नेटवर्क से कनेक्ट किए बिना काम करने की संभावना के बारे में।

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


वास्तविक स्मृति खपत

एक ऐसा अनुप्रयोग जो कोई सक्रिय क्रिया नहीं करता है, कुल 239.1 MB की मेमोरी लेता है। यह संकेतक अधिक हो सकता है, यह इस बात पर निर्भर करता है कि आवेदन में वास्तव में क्या हो रहा है, लेकिन आधार के रूप में निर्दिष्ट संख्या को लेना संभव है। यह सही नहीं है, लेकिन इतना बुरा नहीं है। कम से कम - 1371 एमबी मेमोरी से बेहतर है जो मेरे स्लैक कंप्यूटर पर आवश्यक है। मुझे कहना होगा कि स्लैक एक इलेक्ट्रॉन अनुप्रयोग का एक विशिष्ट उदाहरण है, जिसमें विशिष्ट समस्याएं हैं। स्लैक के कारण इलेक्ट्रॉन के आसपास कुछ सनसनी थी। अन्य अनुप्रयोग, जैसे कि धारणा या एयरटेबल, लगभग 400-600 एमबी मेमोरी का उपभोग करते हैं। और इसका मतलब यह है कि मेरा आवेदन इस संबंध में अच्छी तरह से जीतता है और उनके पास है।

मुझे कहना होगा कि 239.1 एमबी का आंकड़ा मेरे द्वारा किसी भी अनुकूलन से पहले प्राप्त किया गया था। मैं रूस्त में आवेदन के कुछ अत्यंत महत्वपूर्ण और स्मृति गहन भागों को फिर से लिखने की योजना बना रहा हूं। यह एप्लिकेशन की मेमोरी आवश्यकताओं को महत्वपूर्ण रूप से कम करना चाहिए।

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

यह पता चला कि इलेक्ट्रॉन एप्लिकेशन में पृष्ठभूमि सर्वर का उपयोग करने से डेवलपर को दिलचस्प अवसर मिलते हैं। अगले भाग में हम उन सभी अविश्वसनीय चीजों के बारे में बात करेंगे जो इसके उपयोग के साथ की जा सकती हैं।

यहां तक ​​कि अगर आपका एप्लिकेशन क्लाउड डेटा से गंभीरता से जुड़ा हुआ है, तो आपको Node.js API के साथ काम करने का इरादा रखने के लिए पृष्ठभूमि प्रक्रिया की आवश्यकता हो सकती है। इन एपीआई के साथ बातचीत केवल पृष्ठभूमि प्रक्रियाओं से संभव है। तथ्य की बात के रूप में, जो भी आपका इलेक्ट्रॉन आवेदन हो सकता है, मुझे विश्वास है कि उस परियोजना को जानने के लिए जिसे हम अब जांचने जा रहे हैं, आपको कुछ उपयोगी विचार दे सकता है।

इलेक्ट्रॉन-साथ-सर्वर-उदाहरण अनुप्रयोग

मैंने इलेक्ट्रॉन-से-सर्वर-उदाहरण एप्लिकेशन को सब कुछ दिखाने के लिए बनाया था जिसे अपने उदाहरण का उपयोग करके वास्तव में स्थानीय इलेक्ट्रॉन अनुप्रयोगों को विकसित करने के लिए कॉन्फ़िगर करने की आवश्यकता है। मैंने इसी तरह की परियोजनाएं बनाकर प्रोग्रामरों को लुभाने के प्रयास में ऐसा किया। मैं एक ऐसे ही प्रोजेक्ट को उस समय पूरा करना चाहूंगा जब मैं सिर्फ इलेक्ट्रॉन के साथ काम करना शुरू कर रहा था।

आवेदन के बारे में तकनीकी जानकारी README में पाई जा सकती है। यहाँ परियोजना का एक सामान्य अवलोकन दिया गया है:

• यह सामान्य Node.js प्रक्रिया बनाता है, जिसका उपयोग पृष्ठभूमि में सर्वर कोड को निष्पादित करने के लिए किया जाता है।
• इसमें, नोड-आईपीसी का उपयोग करते हुए, एक आईपीसी चैनल बनाया जाता है, जो कि बैकएंड और एप्लिकेशन के उपयोगकर्ता इंटरफ़ेस के बीच सीधी बातचीत को व्यवस्थित करने के लिए डिज़ाइन किया गया है।
• यदि प्रोजेक्ट डेवलपमेंट मोड में लॉन्च किया गया है, तो सर्वर बैकग्राउंड प्रोसेस के रूप में शुरू नहीं होता है। आप एक अलग ब्राउज़र विंडो के माध्यम से इसके साथ बातचीत कर सकते हैं। यह डिबगिंग उद्देश्यों के लिए है।

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


क्लाइंट और सर्वर भागों के अनुप्रयोग

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

अब हम उन सभी दिलचस्प चीजों को देखते हैं जो हम उपरोक्त एप्लिकेशन लॉन्च योजना के आवेदन के लिए धन्यवाद कर सकते हैं।

कंसोल का उपयोग करना

मैंने server-ipc.js फ़ाइल में अनुरोधों और प्रतिक्रियाओं को लॉग करने के लिए कमांड जोड़े। मैं ब्राउज़र कंसोल का उपयोग करके उनका पता लगा सकता हूं।


ब्राउज़र कंसोल में Node.js अनुप्रयोगों को डीबग करना

चरण-दर-चरण कोड निष्पादन

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


चरण-दर-चरण कोड निष्पादन

रूपरेखा

शायद यह मेरा पसंदीदा उपकरण है। यह कोड प्रदर्शन पर शोध के लिए एक शानदार मानक उपकरण है, जो आपको एप्लिकेशन के सर्वर पक्ष को प्रोफाइल करने की अनुमति देता है।


सर्वर कोड प्रदर्शन अनुसंधान

ब्राउज़र डेवलपर के टूल का उपयोग करके, आप यह भी पता लगा सकते हैं कि जब पृष्ठभूमि प्रक्रिया शुरू होती है तो क्या होता है (यह एप्लिकेशन शुरू करने का सबसे कठिन हिस्सा है)।

ऐसा करने के लिए, बस संकेतक रिकॉर्ड करने की प्रक्रिया शुरू करें और खिड़की को फिर से लोड करें। रिबूट करने से सर्वर पुनः चालू हो जाएगा। यह हमें अगले कदम की ओर ले जाता है।

कुंजी संयोजन Cmd + R या Ctrl + R का उपयोग करके सर्वर को रिबूट करना

किसी ब्राउज़र में सर्वर कोड डीबगिंग के लिए विकल्पों में से एक यह है कि चूंकि सर्वर डिबगिंग ब्राउज़र विंडो में किया जाता है, बस विंडो की सामग्री को पुनः लोड करने के कारण सर्वर को पुनरारंभ होता है! यह कुंजी संयोजन Cmd+R (या, विंडोज, Ctrl+R ) के लिए उपयोग करने के लिए पर्याप्त है, और आपके निपटान में सर्वर कोड में किए गए नवीनतम परिवर्तन हैं। इस स्थिति में, फ्रंट-एंड डेटा सहेजा जाता है। इसका मतलब है कि आप एप्लिकेशन के क्लाइंट भाग के साथ काम करना जारी रख सकते हैं, लेकिन, सर्वर को पुनरारंभ करने के बाद, क्लाइंट भाग पहले से ही सर्वर कोड के नए संस्करण के साथ काम करेगा। यह एक रनिंग सर्वर पर "हॉट" कोड स्वैप जैसी किसी चीज़ की याद दिलाता है।

निम्नलिखित आंकड़ा दिखाता है कि कैसे, सर्वर कोड को बदलते हुए, मैंने Cmd+R दबाकर पृष्ठ को फिर से लोड किया Cmd+R उसके बाद, मैंने क्लाइंट के साथ काम करना जारी रखा, जो अब सर्वर के नए संस्करण के साथ बातचीत कर रहा है।


सर्वर रिबूट

एप्लिकेशन और हॉट-स्वैपिंग कोड के रनिंग सर्वर साइड पर शोध करना

आमतौर पर, सर्वर को डीबग करते समय, मैं कोड में सही स्थानों पर console.log() कमांड जोड़ता हूं और इसे पुनरारंभ करता हूं। लेकिन कभी-कभी, विशेष रूप से कठिन मामलों में, ऐसा होता है कि यह एक रिबूट सर्वर में देखने के लिए बेहद उपयोगी होगा, बजाय इसके रिबूट करने के। यह संभव है कि सर्वर के अंदर न केवल "देखो", बल्कि यह देखने के लिए भी कुछ बदल जाए कि यह समस्या को कैसे प्रभावित करेगा।

कंसोल में, आप Node.js कमांड की require उपयोग कर सकते हैं। इसका मतलब है कि इसकी मदद से आप किसी भी सर्वर मॉड्यूल को कनेक्ट कर सकते हैं और कंसोल में उनके साथ काम कर सकते हैं।

मान लीजिए हमें server-handler.js साथ काम करने की आवश्यकता है। ऐसा करने के लिए, कंसोल में बस कमांड let handlers = require('./server-handlers') चलाएं।

चलो सर्वर स्थिति को स्टोर करने के लिए एक सिस्टम बनाते हैं। हमारे मामले में, यह make-factorial फ़ंक्शन (वास्तविक एप्लिकेशन का सर्वर स्थिति बहुत अधिक जटिल हो जाएगा) के लिए दिए गए सभी डेटा की एक सूची होगी:

 handlers._history = [] handlers['make-factorial'] = async ({ num }) => {  handlers._history.push(num) } 

आप उचित मॉड्यूल को कनेक्ट करके और handlers._history को देखते हुए कंसोल से सर्वर handlers._history स्थिति की handlers._history कर सकते हैं। यदि वांछित है, तो कार्यक्रम निष्पादन के दौरान, हम पूरी तरह से make-factorial कार्यान्वयन को भी बदल सकते हैं!


सर्वर स्थिति अनुसंधान

परिणाम

परियोजना कार्यान्वयन के विवरण के बारे में पढ़ने के लिए इलेक्ट्रॉन-के-सर्वर-उदाहरण के भंडार पर एक नज़र डालें और इलेक्ट्रॉन अनुप्रयोग के सर्वर पक्ष का कोड देखें।

यदि आप Visual Studio कोड का उपयोग करते हैं, तो आपको Node.js सर्वर के साथ डेवलपर टूल के उच्च-गुणवत्ता एकीकरण के लिए उपयोग किया जा सकता है। इस दृष्टिकोण के साथ, आप इलेक्ट्रॉन एप्लिकेशन से अलग से सर्वर को स्वयं शुरू कर सकते हैं। उसके बाद, आप इलेक्ट्रॉन को बता सकते हैं कि आपको वीएस कोड के स्वामित्व वाली प्रक्रिया से कनेक्ट करने की आवश्यकता है। हालांकि, मैं मौजूदा इलेक्ट्रॉन विकास उपकरण का उपयोग करना पसंद करता हूं।

इसका मतलब यह है कि प्रोग्रामर के पास किसी भी तृतीय-पक्ष कोड संपादन टूल का उपयोग करने का अवसर है और एक ही समय में सभी ब्राउज़र डेवलपर टूल तक पूर्ण पहुंच है।

पिछले कुछ वर्षों में, मैं वास्तविक एप्लिकेशन विकसित कर रहा हूं और लगातार उपयोग कर रहा हूं कि मैंने अभी क्या बात की है। और मैं कहना चाहता हूं कि मुझे यह सब पसंद है। शायद इस एप्लिकेशन के Node.js भाग पर काम अब तक के सबसे सुखद प्रोग्रामिंग अनुभव का स्रोत बन गया है।

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

प्रिय पाठकों! आप इलेक्ट्रॉन आधारित ऐप्स के बारे में कैसा महसूस करते हैं?