वेब एप्लिकेशन कैसे काम करते हैं

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

1. वेब एप्लिकेशन साइटों से कैसे भिन्न होते हैं

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

साइटों में विभिन्न स्टैटिक्स होते हैं, जो एक HTML फ़ाइल की तरह मक्खी पर उत्पन्न नहीं होते हैं। अक्सर ये चित्र, सीएसएस-फाइलें, जेएस-स्क्रिप्ट होते हैं, लेकिन कोई अन्य फाइलें हो सकती हैं: एमपी 3, मूव, सीएसवी, पीडीएफ।

ब्लॉग, एक संपर्क फ़ॉर्म के साथ व्यापार कार्ड, प्रभावों के एक समूह के साथ लैंडिंग पृष्ठ, मैं सरलता के लिए साइटों का भी उल्लेख करता हूं। हालांकि, पूरी तरह से स्थिर साइटों के विपरीत, वे पहले से ही कुछ प्रकार के व्यापारिक तर्क शामिल करते हैं।

और एक वेब एप्लिकेशन तकनीकी रूप से कुछ अधिक जटिल है। यहां उपयोगकर्ता के अनुरोध के आधार पर HTML पेज मक्खी पर उत्पन्न होते हैं। ईमेल क्लाइंट, सोशल नेटवर्क, सर्च इंजन, ऑनलाइन स्टोर, ऑनलाइन बिजनेस प्रोग्राम, ये सभी वेब एप्लिकेशन हैं।

2. वेब एप्लिकेशन क्या हैं

वेब एप्लिकेशन को इसके मुख्य घटकों के विभिन्न संयोजनों के आधार पर कई प्रकारों में विभाजित किया जा सकता है:

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

3. पायोन फ्रेमवर्क Django उर्फ ​​बैकेंड

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

पहला चरण उपयोगकर्ता से राउटर (URL डिस्पैचर) के लिए एक अनुरोध है, जो निर्णय करता है कि कॉल करने के लिए अनुरोध को संसाधित करने के लिए कौन सा फ़ंक्शन है। निर्णय नियमों की एक सूची के आधार पर किया जाता है जिसमें एक नियमित अभिव्यक्ति और फ़ंक्शन का नाम शामिल होता है: यदि ऐसा यूआरएल है, तो ऐसा फ़ंक्शन।

राउटर द्वारा कहा जाने वाला फंक्शन व्यू कहलाता है। किसी भी व्यावसायिक तर्क को अंदर शामिल किया जा सकता है, लेकिन अक्सर यह दो चीजों में से एक है: या तो डेटा डेटाबेस से लिया जाता है, तैयार किया जाता है और मोर्चे पर वापस आ जाता है; या किसी फॉर्म के डेटा के साथ एक अनुरोध आया, इस डेटा को डेटाबेस में जांचा और संग्रहीत किया जाता है।

एप्लिकेशन डेटा को डेटाबेस (DB) में संग्रहीत किया जाता है। सबसे अधिक इस्तेमाल किया रिलेशनल डेटाबेस। यह तब होता है जब पूर्वनिर्धारित स्तंभों के साथ तालिकाएँ होती हैं और ये तालिकाएँ स्तंभों में से एक के माध्यम से परस्पर जुड़ी होती हैं।

डेटाबेस में डेटा बनाया, पढ़ा, संशोधित और हटाया जा सकता है। कभी-कभी, इन क्रियाओं को निरूपित करने के लिए, एक संक्षिप्त CRUD (क्रिएट रीड अपडेट डिलीट) में आ सकता है। डेटाबेस में डेटा को क्वेरी करने के लिए, एक विशेष SQL भाषा (संरचित क्वेरी भाषा) का उपयोग किया जाता है।

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

डेटाबेस से प्राप्त डेटा को सामने भेजने के लिए देखने के लिए तैयार किया जाता है। उन्हें एक टेम्पलेट में प्रतिस्थापित किया जा सकता है और एक HTML फ़ाइल के रूप में भेजा जा सकता है। लेकिन एक-पृष्ठ के आवेदन के मामले में, यह केवल एक बार होता है, जब एक HTML पृष्ठ उत्पन्न होता है, जिसमें सभी जेएस स्क्रिप्ट जुड़े होते हैं। अन्य मामलों में, डेटा को JSON प्रारूप में क्रमबद्ध और भेजा जाता है।

4. जावास्क्रिप्ट फ्रेमवर्क उर्फ ​​फ्रंटेंड

एप्लिकेशन का क्लाइंट हिस्सा जावास्क्रिप्ट (जेएस) प्रोग्रामिंग भाषा में लिखी गई स्क्रिप्ट है और उपयोगकर्ता के ब्राउज़र में निष्पादित की जाती है। पहले, सभी क्लाइंट तर्क JQuery लाइब्रेरी के उपयोग पर आधारित थे, जो आपको पृष्ठ पर DOM, एनीमेशन के साथ काम करने और AJAX अनुरोध करने की अनुमति देता है।

DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल) एक HTML पेज की संरचना है। DOM के साथ काम करने का अर्थ है, HTML टैग को जोड़ना, जोड़ना, संशोधित करना, हिलाना और हटाना।

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

JSON (जावास्क्रिप्ट ऑब्जेक्ट नोटेशन) एक क्लाइंट और सर्वर के बीच डेटा के आदान-प्रदान के लिए एक सार्वभौमिक प्रारूप है। यह एक सरल स्ट्रिंग है जिसका उपयोग किसी भी प्रोग्रामिंग भाषा में किया जा सकता है।

क्रमांकन एक सूची या शब्दकोश का JSON स्ट्रिंग में रूपांतरण है। एक उदाहरण के लिए:

शब्दकोश:

{ 'id': 1, 'email': 'mail@example.com' } 

सीरियल स्ट्रिंग:

  '{"id": 1, "email": "mail@example.com"}' 

Deserialization एक स्ट्रिंग का एक सूची या शब्दकोश में उलटा रूपांतरण है।

DOM में हेरफेर करके, आप पृष्ठों की सामग्री को पूरी तरह से नियंत्रित कर सकते हैं। AJAX का उपयोग करके, आप क्लाइंट और सर्वर के बीच डेटा का आदान-प्रदान कर सकते हैं। इन तकनीकों के साथ आप पहले से ही एक एसपीए बना सकते हैं। लेकिन एक जटिल एप्लिकेशन बनाते समय, jQuery- आधारित फ्रंट-एंड कोड जल्दी से भ्रमित हो जाता है और बनाए रखना मुश्किल होता है।

सौभाग्य से, जावास्क्रिप्ट फ्रेमवर्क ने JQuery: बैकबोन मैरियनेट, कोणीय, प्रतिक्रिया, Vue, और अन्य को बदल दिया है। उनके पास एक अलग दर्शन और वाक्यविन्यास है, लेकिन वे सभी आपको अधिक से अधिक सुविधा के साथ सामने के छोर पर डेटा का प्रबंधन करने की अनुमति देते हैं, उनके पास पृष्ठों के बीच नेविगेशन बनाने के लिए टेम्पलेट इंजन और उपकरण हैं।

एक HTML टेम्पलेट एक स्मार्ट HTML पेज है जिसमें विशिष्ट मानों के बजाय चर का उपयोग किया जाता है और विभिन्न ऑपरेटर उपलब्ध हैं: यदि , लूप के लिए , और अन्य। एक HTML पेज को टेम्प्लेट से प्राप्त करने की प्रक्रिया जब चरों को प्रतिस्थापित किया जाता है और ऑपरेटरों को लागू किया जाता है, टेम्प्लेट रेंडरिंग कहलाता है।

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

5. क्लाइंट और सर्वर एक दूसरे से कैसे संवाद करते हैं

क्लाइंट HTTP के माध्यम से सर्वर के साथ संचार करता है। इस प्रोटोकॉल का आधार क्लाइंट से सर्वर के लिए अनुरोध और क्लाइंट को सर्वर की प्रतिक्रिया है।

यदि हम डेटा प्राप्त करना चाहते हैं और यदि हम डेटा को बदलना चाहते हैं, तो प्रश्नों के लिए, वे आमतौर पर GET विधियों का उपयोग करते हैं। अनुरोध होस्ट (साइट डोमेन), अनुरोध निकाय (यदि यह एक POST अनुरोध है) और बहुत सारी अतिरिक्त तकनीकी जानकारी को इंगित करता है।

आधुनिक वेब एप्लिकेशन HTTPS प्रोटोकॉल का उपयोग करते हैं, एसएसएल / टीएलएस एन्क्रिप्शन के समर्थन के साथ HTTP का एक विस्तारित संस्करण। इस डेटा के महत्व की परवाह किए बिना एक एन्क्रिप्टेड डेटा ट्रांसमिशन चैनल का उपयोग करना, इंटरनेट पर एक अच्छा रूप बन गया है।

एक और अनुरोध है जो HTTP से पहले किया गया है। यह एक DNS (डोमेन नाम प्रणाली) क्वेरी है। यह उस आईपी पते को प्राप्त करने की आवश्यकता है जिसके लिए अनुरोधित डोमेन बाध्य है। यह जानकारी ब्राउज़र में संग्रहीत है और हम अब इस पर समय नहीं बिताते हैं।

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

दुर्भाग्य से, वह नहीं जानता कि कैसे। इसलिए, एक और परत कार्यक्रम का उपयोग किया जाता है - एप्लिकेशन सर्वर। उदाहरण के लिए, अजगर अनुप्रयोगों के लिए, यह uWSGI या Gunicorn हो सकता है। और अब वे Django के लिए अनुरोध भेजते हैं।

Django ने अनुरोध को संसाधित करने के बाद, वह एक HTML पृष्ठ या डेटा और एक प्रतिक्रिया कोड के साथ प्रतिक्रिया देता है। यदि सब कुछ ठीक है, तो प्रतिक्रिया कोड 200 है; यदि पृष्ठ नहीं मिला है, तो - 404; यदि कोई त्रुटि होती है और सर्वर अनुरोध को संसाधित करने में असमर्थ था, तो - 500. ये सबसे आम कोड हैं।

6. वेब अनुप्रयोगों में कैशिंग

एक और तकनीक जिसका हम लगातार सामना करते हैं, जो वेब एप्लिकेशन और सॉफ्टवेयर और हमारे कंप्यूटर और स्मार्टफोन में प्रोसेसर स्तर पर मौजूद है।

कैशे विकास की एक अवधारणा है जब अक्सर उपयोग किए जाने वाले डेटा को डेटाबेस से बाहर निकालने के बजाय, हर बार गणना या किसी अन्य तरीके से तैयार किया जाता है, जल्दी से सुलभ स्थान पर संग्रहीत किया जाता है। कैश उपयोग के कुछ उदाहरण:

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