एचएन देखाईं: Vertex.js – एगो 1kloc एसपीए फ्रेमवर्क

इहाँ लेख बा:

माइक्रो-फ्रेमवर्क के उदय: डेवलपर लोग फूलल जावास्क्रिप्ट टूलिंग के काहे नकार रहल बा

हाल में एगो डेवलपर हैकर न्यूज में लगभग 1,000 लाइन के कोड में बनल एकल पन्ना के एप्लीकेशन फ्रेमवर्क पोस्ट कइले बा आ एकर प्रतिक्रिया इलेक्ट्रिक रहल। ई प्रोजेक्ट — एगो न्यूनतम एसपीए ढाँचा — एगो बहस के फेर से भड़का दिहलस जवन सालन से वेब डेवलपमेंट समुदाय में उबलत बा: का हमनी के टूल ओह समस्या के हल करे खातिर बहुत जटिल हो गइल बा? जब रिएक्ट के कोर लाइब्रेरी, एकर राउटर, एकर स्टेट मैनेजमेंट लेयर आ एकर बिल्ड टूलिंग सामूहिक रूप से लाखों लाइन कोड के वजन में आवे ला, एगो अइसन फ्रेमवर्क जे महज 1,000 लाइन में रूटिंग, रिएक्टिविटी आ कंपोनेंट रेंडरिंग के डिलीवरी करे ला, एगो असहज सवाल के मजबूर करे ला। ग्राहक के सामना करे वाला एप्लीकेशन बनावे वाला बिजनेस सभ खातिर, ओह सवाल के जवाब के वास्तविक परिणाम होला — लोड टाइम, डेवलपर उत्पादकता, आ लंबा समय ले रखरखाव के लागत में।

1,000 लाइन के ढाँचा असल में का साबित करेला

माइक्रो-फ्रेमवर्क के विचार कवनो नया नइखे। Backbone.js 2010 में जब ई शुरुआत कइलस तब लगभग 1,800 लाइन के एनोटेटेड स्रोत कोड रहल।Mithril.js 10KB gzipped से कम पर भेजल जाला। एह श्रेणी में हर नया प्रविष्टि के उल्लेखनीय बनावे वाला चीज खुद लाइन गिनती ना हवे बलुक ब्राउजर एपीआई सभ के वर्तमान स्थिति के बारे में का बतावे ला। आधुनिक ब्राउजर सभ टेम्पलेट लिटरल, हिस्ट्री एपीआई, प्रॉक्सी आधारित रिएक्टिविटी, कस्टम तत्व आ मॉड्यूल लोडिंग खातिर नेटिव सपोर्ट के साथ भेजल जालें। एक दशक पहिले फ्रेमवर्क के हजारन लाइन के जरूरत रहे खाली इंटरनेट एक्सप्लोरर आ क्रोम के बीच के अंतर के सामान्य करे खातिर। आज, एगो कुशल डेवलपर प्लेटफार्म प्रिमिटिव सभ के ऊपर एगो पतला आर्केस्ट्रेशन लेयर के रूप में पूरा तरीका से कामकाजी एसपीए फ्रेमवर्क बना सके ला।

ई एह से मायने रखेला काहे कि ई बातचीत के "हमनी के कवन ढाँचा चुने के चाहीं?" के "का हमनी के कवनो ढाँचा के बिल्कुल जरूरत बा?" छोट से मध्यम प्रोजेक्ट सभ खातिर — डायनामिक सेक्शन वाला लैंडिंग पन्ना, इंटरनल डैशबोर्ड, ग्राहक पोर्टल — एकर जवाब तेजी से हो रहल बा: शायद ना, भा कम से कम भारी ना। 1,000 लाइन के ढाँचा एह बात के सबूत बा कि प्लेटफार्म एतना परिपक्व हो गइल बा कि ढाँचा के काम सिकुड़ रहल बा।

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

जावास्क्रिप्ट ब्लोट के असली लागत

गूगल के खुद के रिसर्च में लगातार पता चलल बा कि हर 100 मिलीसेकंड के जोड़े वाला लोड टाइम में रूपांतरण दर में 7% तक के कमी हो सकेला। मीडियन वेब पेज अब 500KB से ढेर जावास्क्रिप्ट भेजत बा — ई आंकड़ा 2015 के बाद से लगभग तीन गुना बढ़ गइल बा।बिजनेस सभ खातिर ई कौनों अमूर्त परफार्मेंस मीट्रिक ना हवे। एकर सीधे अनुवाद नुकसान के आमदनी, अधिका बाउंस रेट, आ खराब सर्च इंजन रैंकिंग में होला।

मोबाइल नेटवर्क पर समस्या अउरी बढ़ जाला। 3G से जुड़ल मिड रेंज एंड्रॉयड डिवाइस पर यूजर जावास्क्रिप्ट से भारी पन्ना के इंटरैक्टिव होखे खातिर 5-8 सेकंड इंतजार क सके ला, ऊहो सुरुआती एचटीएमएल रेंडर भइला के बाद। ई खासतौर पर उभरत बाजार सभ में ग्राहकन के सेवा देवे वाला बिजनेस सभ खातिर दंडात्मक बा, जहाँ मोबाइल-फर्स्ट ब्राउजिंग के आदर्श बा आ नेटवर्क के बुनियादी ढांचा में बहुत अंतर होला।

के बा
• पार्स के समय: बड़हन जावास्क्रिप्ट बंडल सभ के पार्स आ संकलन में ढेर समय लागे ला, ऊहो एप्लीकेशन कोड के एकही लाइन के निष्पादित होखे से पहिले
• मेमोरी प्रेशर: जटिल फ्रेमवर्क इंटरनल मेमोरी के खपत करे ला जेकर इस्तेमाल खुद एप्लीकेशन द्वारा कइल जा सके ला
• अपडेट थकान: प्रमुख फ्रेमवर्क अपग्रेड (एंगुलर 1 से 2, Vue 2 से 3, रिएक्ट क्लास घटक के हुक) हर 2-3 साल पर महंगा माइग्रेशन के कोसिस करे के मजबूर करे ला
• निर्भरता श्रृंखला: एगो बिसेस रिएक्ट प्रोजेक्ट के node_modules फोल्डर में 800-1,200 पैकेज होलें, हर एक में संभावित सुरक्षा भेद्यता भा टूटे वाला बदलाव
होला
• जटिलता बनाईं: वेबपैक, बेबेल, पोस्टसीएसएस, आ इनहन के कॉन्फ़िगरेशन फाइल अक्सर ओह एप्लीकेशन कोड से ढेर होलीं जे ऊ लोग परोसल जाला

के बा

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

डेवलपर समुदाय काहें बँटल बा

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

| माइक्रो-फ्रेमवर्क वीकेंड प्रोजेक्ट खातिर बहुत मजेदार हो सके ला, इनहन लोग के तर्क बा, बाकी पाँच लोग के टीम के बेस्पोक 1,000 लाइन कोडबेस पर ऑनबोर्ड करे के कोसिस करीं जेह में कौनों स्टैक ओवरफ्लो के जवाब ना होखे आ कौनों आधिकारिक दस्तावेज ना होखे।

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

आधुनिक बिजनेस के असल में का जरूरत बा अपना टेक स्टैक से

रूपरेखा बहस अंततः एगो बड़हन सवाल के प्रॉक्सी हवे: बिजनेस सभ के आपन सीमित तकनीकी संसाधन सभ के आवंटन कइसे करे के चाहीं? डेवलपर के बिल्ड पाइपलाइन के कॉन्फ़िगर करे भा नया फ्रेमवर्क वर्जन में माइग्रेट करे में बितावे वाला हर घंटा अइसन घंटा होला जे ग्राहकन के सेवा देवे वाला फीचर बनावे में ना बितावल जाला। कई बिजनेस सभ खातिर — खासतौर पर छोट आ मध्यम आकार के ऑपरेशन सभ खातिर — आदर्श टेक्नोलॉजी के पसंद अइसन होला जे "हमरा लगे एगो बिचार बा" आ "ग्राहक लोग एकर इस्तेमाल कर रहल बा।"

के बीच के अंतर के कम से कम करे <ब्लॉककोट> के बा

बढ़त बिजनेस के सबसे बढ़िया टेक्नोलॉजी फैसला ई बा कि ऊ अइसन टूल चुनल जाव जवन काल्हु के रखरखाव के बोझ ना पैदा कइले आजु के समस्या के हल कर सके. एकर मतलब 1,000 लाइन के ढाँचा होखे भा पूरा तरीका से प्रबंधित प्लेटफार्म, लक्ष्य एकही बा: आपन समय ओह चीज पर बिताईं जवन राउर बिजनेस के बिसेस बनावे ला, ना कि अइसन बुनियादी ढांचा पर जवना के हर बिजनेस के जरूरत होखे।

के बा

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

रूपरेखा स्पेक्ट्रम: आपन मीठा जगह खोजल

फ्रेमवर्क पसंद के बाइनरी के रूप में माने के बजाय — मेगा-फ्रेमवर्क भा माइक्रो-फ्रेमवर्क — ई स्पेक्ट्रम के संदर्भ में सोचे में मदद करे ला। एक छोर पर रउरा लगे वेनिला जावास्क्रिप्ट बा जवना में शून्य अमूर्तता बा. दूसरा ओर, रउआ लगे Next.js या Nuxt जइसन फुल-स्टैक मेटा-फ्रेमवर्क बा जवन रूटिंग, रेंडरिंग, डेटा फेचिंग, आ डिप्लोयमेंट के संभालेला। अधिकतर प्रोजेक्ट कहीं बीच के होला।

कुछ इंटरैक्टिव तत्व वाला ग्राहक के सामना करे वाली मार्केटिंग साइट खातिर, माइक्रो-फ्रेमवर्क भा इहाँ तक कि Alpine.js-शैली के इनलाइन रिएक्टिविटी भी एकदम फिट हो सके ला। रियल-टाइम डेटा, भूमिका आधारित अनुमति आ ऑफलाइन सपोर्ट वाला जटिल सास डैशबोर्ड खातिर, समृद्ध इकोसिस्टम वाला परिपक्व फ्रेमवर्क ओवरहेड के लायक होला। गलती सबसे भारी विकल्प के डिफ़ॉल्ट कइल बा काहें से कि ई सभसे लोकप्रिय बा, या सभसे हल्का विकल्प के डिफ़ॉल्ट कइल बा काहें से कि ई सभसे बौद्धिक रूप से संतोषजनक बा।

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

गैर-तकनीकी संस्थापक आ बिजनेस ऑपरेटर खातिर पाठ

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

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

के बा
1. अपना कस्टम कोड के ऑडिट करीं: ई पहचानीं कि कवन आंतरिक टूल मौजूदा प्लेटफार्म सभ में उपलब्ध कामकाज के डुप्लिकेट करे लें
2. सच्चा लागत के गणना करीं: खाली सुरुआती बिकास ना बलुक चल रहल रखरखाव, सुरक्षा पैच, आ फीचर अनुरोध
में कारक बनाईं
3. एकीकरण के मूल्यांकन करीं: आपन वर्तमान SaaS सदस्यता के गिनती करीं आ लागत के तुलना एगो एकीकृत प्लेटफार्म के मुकाबले करीं
4. अपना डिफरेंसिएटर सभ के रक्षा करीं: कस्टम डेवलपमेंट संसाधन सभ के अइसन फीचर सभ खातिर आरक्षित करीं जे वास्तव में आपके बिजनेस के अलग करे

के बा

भविष्य इरादा से कइल पसंद के होला

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

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

1,000 लाइन के ढाँचा हमनी के याद दिलावत बा कि बिजली खातिर जटिलता के जरूरत ना पड़ेला। सबसे कारगर बिजनेस — आ सभसे कारगर औजार — ऊ होला जे ठीक वइसने काम करे ला जेकर जरूरत होखे आ एकरा से ढेर कुछ ना।

के बा

अक्सर पूछल जाए वाला सवाल

वर्टेक्स.जेएस नियर माइक्रो-फ्रेमवर्क का होला?

माइक्रो-फ्रेमवर्क एगो न्यूनतम जावास्क्रिप्ट लाइब्रेरी हवे जे बिना बड़हन समाधान के थोक के कोर एप्लीकेशन टास्क सभ के संभाले खातिर डिजाइन कइल गइल बा। Vertex.js एकरा के हासिल क के लगभग 1,000 लाइन के कोड में जरूरी SPA कामकाज-जइसे कि रूटिंग आ स्टेट मैनेजमेंट- उपलब्ध करावे ला। ई अइसन फ्रेमवर्क सभ के बिपरीत बाटे जिनहन में रूटिंग भा स्टेट खातिर अलग-अलग, भारी लाइब्रेरी सभ के जरूरत होला, छोट प्रोजेक्ट सभ खातिर समग्र जटिलता आ ब्लोट के कम करे ला।

डेवलपर लोग सरल टूल के ओर काहें बढ़ रहल बा?

बहुत सारा डेवलपर लोग के लागेला कि आधुनिक जावास्क्रिप्ट टूलिंग औसत प्रोजेक्ट खातिर बहुत जटिल हो गइल बा। भारी ढाँचा सभ में धीमा बिल्ड टाइम, खड़ी सीखन के वक्र, आ बेमतलब के बिसेसता सभ के परिचय दिहल जा सके ला। Vertex.js नियर सरल टूल सभ ओह जरूरी समस्या सभ पर फोकस क के तेज, ढेर समझ में आवे वाला बिकास के अनुभव देलें जे कौनों फ्रेमवर्क के हल करे के जरूरत होला, प्रोजेक्ट के वास्तविक जरूरत सभ के साथ बेहतर तरीका से संरेखित होलें।

का Vertex.js एगो बड़हन, जटिल एप्लीकेशन खातिर उपयुक्त बा?

Vertex.js मुख्य रूप से छोट प्रोजेक्ट सभ खातिर डिजाइन कइल गइल बा जहाँ सादगी आ कम ओवरहेड प्रमुख होखे। कई गो इंटरैक्टिव घटक वाला बहुत बड़हन, जटिल एप्लीकेशन सभ खातिर, बिसाल इकोसिस्टम वाला अउरी फीचर-रिच फ्रेमवर्क ढेर उचित हो सके ला। व्यापक रूप से पहिले से बनल मॉड्यूल के जरूरत वाला टीम सभ खातिर, मेवेज नियर सेवा ($19/mo में 207 मॉड्यूल के पेशकश करे वाली) जरूरी यूआई आ कामकाजी घटक सभ के उपलब्ध करा सके ला जेकर कमी माइक्रो-फ्रेमवर्क में होला।

का हमरा अभी भी Vertex.js के साथ बिल्ड टूल के जरूरत बा?

जबकि Vertex.js खुद हल्का बा, संभव बा कि आप अभी भी प्रोफेशनल डेवलपमेंट खातिर बिल्ड टूल के इस्तेमाल करब। राउर कोड बंडल करे, npm निर्भरता के संभाले, आ आधुनिक जावास्क्रिप्ट फीचर सक्षम करे खातिर Vite भा Parcel जइसन टूल जरूरी बा. हालाँकि, समग्र टूलचेन बड़हन फ्रेमवर्क सभ के जरूरत के तुलना में सरल रहे ला, काहें से कि आप जटिल स्टेट-मैनेजमेंट आ रूटिंग लाइब्रेरी सभ से बचे के पड़े ला।