2020 के लिए मेरी नई वेब प्रौद्योगिकी ढेर

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

मेरी पहली सफल साइट, जो अब 1999 की एक पुरानी परियोजना है, प्रौद्योगिकियों का उपयोग करके बनाई गई थी, जिन्हें एक हाथ की उंगलियों पर गिना जा सकता है: HTML4, CSS2, JavaScript3 और Apache 1.1। यह सब लिनक्स 2.0 वाले सर्वर पर घूम रहा था। साइट में 38,000 पृष्ठ शामिल हैं। और आज, 20 साल बाद, वह अभी भी उन्हें जारी करता है ।



तब से, सब कुछ बदल गया है। यह वेब प्रौद्योगिकी स्टैक पर भी लागू होता है। अब वे पहले जैसे नहीं रहे।

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

2020 वेब स्टैक

2020 एक नए दशक की शुरुआत है। यह नई वेब प्रौद्योगिकी स्टैक के बारे में बात करने का समय है।

2020 स्टैक कैसा दिखता है? मुझे कहना होगा कि यह बहुत ही प्रभावित है कि साइट डेवलपर क्या हासिल करने की कोशिश कर रहा है। सही स्तरों का चयन परियोजना के लिए आवश्यक मापनीयता की डिग्री पर निर्भर करता है।

मुझे विशेष रूप से छोटी वेबसाइटों में दिलचस्पी है। जो एक वर्चुअल सर्वर पर अच्छा महसूस करते हैं। इन साइटों को लोड बैलेंसरों या लगातार डेटा स्टोर की आवश्यकता नहीं है। यह सीएमएस आला है जो वर्डप्रेस ने लंबे समय तक कब्जा कर लिया है। लेकिन इस सब के बीच में किसी प्रकार का अतिसूक्ष्म सर्वर नहीं है। इसके बजाय, हम एक ऐसी प्रणाली के बारे में बात कर रहे हैं जो पीक ऑवर्स के दौरान अपनी शक्ति को स्वचालित रूप से बढ़ाने की आवश्यकता के बिना यातायात के निरंतर प्रवाह का सामना कर सकती है।

अब मेरे हित के क्षेत्र में परियोजनाओं के विकास और समर्थन के लिए, मैं 12 स्तरों से मिलकर एक प्रौद्योगिकी स्टैक का उपयोग करता हूं।

▍1। मेघ प्रदाता

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

▍2। SELinux के साथ फेडोरा लिनक्स वितरण

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

▍3। वेब सर्वर पढ़ें सेवा लिखें

मैं LetsEncrypt से TLS सर्टिफिकेट के साथ Read Write Serve web सर्वर का उपयोग करता हूं। मैं अपाचे का प्रशंसक हुआ करता था, मुझे नई वेबसाइटें स्थापित करने और लॉन्च करने में कुछ ही मिनट लगे। लेकिन जब से मैंने PHP से जावास्क्रिप्ट में स्विच किया, मुझे Apache के बारे में भूलना पड़ा। एक्सप्रेस सर्वर मुझे एक बहुत ही सरल उपकरण लग रहा था, लेकिन केवल जब तक मैंने इसमें सभी कार्यक्षमता को पुन: उत्पन्न करने की कोशिश नहीं की, जो अपाचे ने मुझे दिया था। हम सामग्री समन्वय के तंत्र के बारे में बात कर रहे हैं, सशर्त कैशिंग के बारे में, डेटा संपीड़न के बारे में, एसईओ के लिए यूआरएल पुनर्लेखन के बारे में, कॉर्स के बारे में, सामग्री सुरक्षा नीतियों के बारे में। परिणामस्वरूप, मैंने रीड राइट सर्व सर्वर पर स्विच किया, जिसमें ये सभी सुविधाएँ डिफ़ॉल्ट रूप से मौजूद हैं।

▍4। Node.js अनुप्रयोग रनटाइम

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

▍5। मारियाडीबी डेटाबेस

मैं MariaDB डेटाबेस सर्वर का उपयोग करता हूं। यह MySQL का एक कांटा है जिसे ओपन सोर्स समुदाय द्वारा रीब्रांड और मास्टर किया गया है। जब मुझे असंरचित JSON डेटा संग्रहीत करने की आवश्यकता होती है, तो मैं PostgreSQL का उपयोग करता हूं। तथ्य यह है कि यह मुझे विशिष्ट JSON गुणों पर सीधे अनुरोध निष्पादित करने की अनुमति देता है। यह MongoDB की तरह एक सा है, लेकिन परिचित SQL सिंटैक्स पर आधारित है।

▍6। HTTP / 2

मैं लगातार कनेक्शन के साथ HTTP / 2 क्षमताओं पर भरोसा करता हूं और अनुप्रयोगों के कुछ हिस्सों के बीच संवाद करने के लिए मल्टीप्लेक्सिंग स्ट्रीम करता हूं। ये सम्मानजनक HTTP / 1.1 प्रोटोकॉल के दो जोड़ हैं। दस्तावेजों के गठन के लिए मेरे दृष्टिकोण को बदल दिया। सबसे पहले, कतार की शुरुआत को अवरुद्ध करने की समस्या गायब हो गई है। नतीजतन, स्प्राइट सूचियों की आवश्यकता गायब हो गई है, भले ही मेरे पास दर्जनों छोटी छवियां हों। दूसरी बात, अब जावास्क्रिप्ट और सीएसएस फाइलों को बंडलों में मिलाकर अनुकूलित करने की आवश्यकता नहीं है। क्लाइंट-सर्वर कनेक्शन स्थापित होने के बाद, इन सभी छोटी फ़ाइलों को इस कनेक्शन के माध्यम से बिना किसी रुकावट के स्थानांतरित किया जाता है।

▍ ▍। HTML टेम्पलेट ब्लू वाक्यांश का उपयोग करना

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

▍8। लेखन कोड का उपयोग करते हुए पेज कोड लिखना

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

▍ ९। मानक वेब घटक

वेब घटकों के साथ काम करने के क्षेत्र में, मैं W3C मानकों का पालन करता हूं। ये शैडो डोम, उपयोगकर्ता तत्व, HTML <template> , ECMAScript मॉड्यूल हैं। यह मुझे उन सभी चीजों को पूरी तरह से शामिल करने की अनुमति देता है जो मुझे एनपीएम के माध्यम से वितरित किए जाने वाले पैकेजों में चाहिए। मेरे लिए, इस सब का सबसे बड़ा फायदा आइसोलेशन स्तर था जो छाया DOM प्रदान करता है। इससे हमें सीएसएस शाप से छुटकारा पाने की अनुमति मिली, प्रदूषणकारी नामस्थानों से।

▍ १०। क्लाइंट स्क्रिप्ट के लिए जावास्क्रिप्ट

क्लाइंट स्क्रिप्ट लिखने के लिए, मैं मॉड्यूलर ऑब्जेक्ट ओरिएंटेड जावास्क्रिप्ट कोड का उपयोग करता हूं। मैं ECMAScript मानक की नई विशेषताओं को केवल तभी लागू करता हूं जब उनका समर्थन नवीनतम ब्राउज़र रिलीज़ में दिखाई देता है। यही है, मैं उस समय अपने शस्त्रागार में उन्हें शामिल करता हूं जब मैं देखता हूं कि सभी प्रमुख ब्राउज़र caniuse.com पर "हरे रंग में बदल जाते हैं "। मैं पॉलीफिल से बचता हूं।

▍11। सीएसएस स्टाइल

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

 <link href='/fonts/source-serif-pro-400-latin.woff2' rel=preload as=font crossorigin /> 

इस दृष्टिकोण का एक अतिरिक्त लाभ यह है कि यह पूरी तरह से मुझे FOUT के रूप में ज्ञात समस्या से बचाता है - (अस्थिर पाठ का फ्लैश, एक नियमित फ़ॉन्ट का फ्लैश)।

▍ १२। GIMP और InkScape के साथ ग्राफिक संसाधन तैयार करना

और अंत में, ग्राफिक संसाधनों की तैयारी के लिए, मैं कुछ संपादकों का उपयोग करता हूं। मैं GIMP, और वेक्टर SVG सामग्री का उपयोग करके इंकमैप का उपयोग करके बिटमैप PNG चित्र तैयार करता हूं।

ऐसी तकनीकें जो अपनी पूर्व अपील खो चुकी हैं

कुछ उपकरण जो मुझे वास्तव में पहले पसंद थे, साथ ही कुछ जो मुझे केवल क्षणभंगुर के शौकीन थे, अब मेरे वेब तकनीकों के ढेर में शामिल नहीं हैं।

• एडोब फोटोशॉप और इलस्ट्रेटर। ये दो महान अनुप्रयोग हैं जो कई सालों से मेरे सभी ग्राफिक्स जरूरतों को पूरा करते हैं। मैं दुख के साथ उन्हें "अलविदा" कहता हूं और मेरे साथ होने के लिए उन्हें धन्यवाद देता हूं। अब मुझे बस जरूरत है उनके मुक्त स्रोत के विकल्प की।
• jQuery। क्रॉस-ब्राउज़र संगतता युद्ध समाप्त होने पर यह लाइब्रेरी अनावश्यक हो गई। मेरे लिए सबसे मूल्यवान jQuery सुविधा चयनकर्ता वाक्यविन्यास था। यह मांग में इतना बदल गया कि 2009 में इसे DOM के लिए एक querySelector रूप में जोड़ा गया।
• AJAX। यह वेब 2.0 का पूर्वज है। अब अतीत के अवशेष में बदल गया। XMLHttpRequest API को आधुनिक और सरल fetch API द्वारा प्रतिस्थापित किया जा रहा है, और JSON XML की जगह ले रहा है।
• SASS / SCSS। मैं मानता हूं कि चरों के बिना CSS कोड लिखना अक्षम था, परिणामस्वरूप, बहुत से लोग SASS को पसंद करते थे। और मॉड्यूल भी एक बहुत ही महत्वपूर्ण विशेषता थी। लेकिन अंत में, जावास्क्रिप्ट में यह सब उपयोग करने के लिए, आपको बहुत अधिक समय और प्रयास करना होगा। उसी समय, शैलियों के साथ काम करने के लिए सहायक उपकरणों के विकास के साथ, सीएसएस मानक भी स्थिर नहीं रहा। नतीजतन, सीएसएस कोड को परिवर्तित करने के लिए विभिन्न उपकरण धीरे-धीरे अतीत की बात बन रहे हैं।
• कार्यलय। BEM संस्था नामकरण योजना (ब्लॉक, एलीमेंट, मॉडिफायर) का उपयोग सीएसएस वर्ग नामों के निर्माण में किया जाता है जो वैश्विक नाम स्थान समस्या का समाधान करता है। लेकिन आपको इसके लिए बहुत लंबे डिज़ाइनों का उपयोग करके भुगतान करना होगा। मैंने अभिभावकों और कक्षा के नामों के लिए एक आसान तरीका पसंद करते हुए, शब्दार्थ तत्वों में माता-पिता / बच्चे के चयनकर्ताओं पर स्विच किया।
  
  उदाहरण के लिए:
  
  

   header > ul > li {   ... } nav > ul > li {   ... } footer > ul > li {   ... } 

• फ़ॉन्ट्स जॉर्जिया और वर्डाना। ये दोनों फॉन्ट कई सालों से मेरी फॉन्ट रेटिंग में सबसे ऊपर हैं। मैं उनकी पहुँच और उनकी पठनीयता पर भरोसा कर सकता था। लेकिन @font-face नियम दिखाई देने के बाद, और ओपन-सोर्स फोंट फैलने के बाद, मैंने इसी तरह के फोंट का उपयोग करना शुरू किया।
• बैबेल, ग्रंट, गल्प, ब्राउजरिफ़, वेबपैक। इस सूची में पहले चार आइटम किसी को आश्चर्यचकित करने की संभावना नहीं है। लेकिन मेरे वेबपैक ने वेबपैक क्यों छोड़ा? तथ्य यह है कि इस बंडल ने मेरे लिए प्रासंगिकता खो दी है, कुछ कारण हैं जो मैं और अधिक विस्तार से ध्यान केंद्रित करूंगा:
  
  
  1. लगातार कनेक्शन और स्ट्रीम मल्टीप्लेक्सिंग के लिए समर्थन के साथ HTTP / 2 से पहले, हम एप्लिकेशन संसाधन बंडलों के निर्माण के लिए इन उपकरणों की क्षमताओं पर निर्भर थे। लेकिन बंडल करना हमें ऐसी दुनिया में कुछ नहीं देता जहाँ HTTP / 2 है।
  2. ECMAScript 2015 मानक जावास्क्रिप्ट विकास में एक नया शब्द था, हर कोई भाषा की नई विशेषताओं का उपयोग करने के लिए दौड़ा, उसी दिन जब उन्होंने दिन का प्रकाश देखा था। हालाँकि, एक समस्या थी। नई सुविधाओं का उपयोग करते हुए लिखे गए कोड को ब्राउज़रों द्वारा समर्थित नहीं किया गया था। इसलिए, इसे ECMAScript 5-कोड में बदलना पड़ा। इस व्यवसाय में हम बाबेल पर निर्भर थे, इसका आवेदन प्रकाशन के लिए वेब परियोजनाओं को तैयार करने में एक मानक कदम था। आज, मेरी ज़रूरत की सभी नई भाषाएँ हर जगह सचमुच उपलब्ध हैं। नतीजतन, मुझे अब बेबल की जरूरत नहीं है।
  3. ब्राउज़रों में मॉड्यूल के गतिशील आयात की संभावना से पहले, कोड को कॉमनजस प्रारूप में अनुवादित किया जाना था। अब, अधिकांश प्रमुख ब्राउज़र <script type='module'> (और एज 76+ जल्द ही खींच लेंगे) का समर्थन करते हैं। नतीजतन, जल्द ही हम ECMAScript मॉड्यूल को हैलो कहने और बाकी सब चीजों को अलविदा कहने में सक्षम होंगे।
• JSX। मैं उन लोगों को नहीं समझता जो मानते हैं कि जेएसएक्स अच्छा है। और "लेकिन आप इसके लिए अभ्यस्त हैं," मेरे लिए - तर्क नहीं।
• कार्यात्मक प्रोग्रामिंग। मैंने अपने कोड में कार्यात्मक प्रोग्रामिंग के उपयोग को numbers.sort((a, b) => a - b); जैसे सरल एकल-लाइन निर्माणों तक सीमित कर दिया है। numbers.sort((a, b) => a - b); । बाकी सब चीजों के लिए, मैं ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग का उपयोग करता हूं।

टेक्नोलॉजी जो पसंदीदा हो गई है

यहाँ मेरी प्रौद्योगिकी स्टैक के स्तरों का अवलोकन है जिससे मैं विशेष रूप से प्रभावित हूँ:

• जावास्क्रिप्ट मॉड्यूल। मॉड्यूल ने सर्वर-साइड जावास्क्रिप्ट कोड में खुद को साबित किया है। और मुझे बेहद खुशी है कि मैं अंततः क्लाइंट की तरफ से उनका उपयोग कर सकता हूं।
• ऑब्जेक्ट ओरिएंटेड जावास्क्रिप्ट यहाँ वस्तु-उन्मुख जावास्क्रिप्ट विकास के लिए पाँच सुनहरे नियम दिए गए हैं:
  
  
  1. अनाम कक्षाओं के साथ अनाम वस्तुओं को बदलें।
  2. निर्माणकर्ताओं में वस्तुओं के सभी गुणों को घोषित और आरंभ करें।
  3. निर्माण के तुरंत बाद वस्तुओं को परिवर्तनों से सुरक्षित रखें।
  4. अपरिवर्तनीय हस्ताक्षरों के साथ विधियों की घोषणा करें।
  5. this हर कॉलबैक पर बांधें।
• ब्लू वाक्यांश यह प्रणाली मुझे टेम्पलेट बनाने और विभिन्न सामग्रियों को तैयार करते समय एक घोषणात्मक दृष्टिकोण का उपयोग करने की अनुमति देती है। यह लेखन गुणवत्ता HTML कोड को एक सरासर खुशी बनाता है।

परिणाम

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

प्रिय पाठकों! और 2020 में वेब तकनीकों का आपका - आपका ढेर क्या है?

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