HN देखाउनुहोस्: Vertex.js - एक 1kloc SPA फ्रेमवर्क

माइक्रो-फ्रेमवर्कको उदय: किन विकासकर्ताहरूले ब्लोटेड JavaScript टूलिङलाई अस्वीकार गर्दैछन्

एउटा विकासकर्ताले हालै ह्याकर न्यूजमा कोडको लगभग 1,000 लाइनहरूमा निर्मित एकल-पृष्ठ अनुप्रयोग फ्रेमवर्क पोस्ट गर्यो, र प्रतिक्रिया इलेक्ट्रिक थियो। परियोजना - एक minimalist SPA फ्रेमवर्क - एक बहस पुन: सुरु भयो जुन वेब विकास समुदायमा वर्षौंदेखि उकिरहेको छ: के हाम्रा उपकरणहरू उनीहरूले समाधान गर्ने समस्याहरूको लागि धेरै जटिल भएका छन्? जब React को मूल पुस्तकालय, यसको राउटर, यसको राज्य व्यवस्थापन तह, र यसको निर्माण उपकरणले कोडको सयौं हजार लाइनहरूमा सामूहिक रूपमा तौल गर्दछ, केवल 1,000 रेखाहरूमा राउटिङ, प्रतिक्रियाशीलता र कम्पोनेन्ट रेन्डरिङ प्रदान गर्ने ढाँचाले एक असहज प्रश्नलाई बाध्य पार्छ। ग्राहक-मुखी अनुप्रयोगहरू निर्माण गर्ने व्यवसायहरूका लागि, त्यो प्रश्नको जवाफले वास्तविक परिणामहरू छन् — लोड समय, विकासकर्ता उत्पादकता, र दीर्घकालीन मर्मत लागतहरूमा।

१,०००-लाइन फ्रेमवर्कले वास्तवमा के प्रमाणित गर्छ

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

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

निस्सन्देह, React र Vue जस्ता फ्रेमवर्कहरूले अझै पनि जटिल राज्य रूखहरू, सर्भर-साइड रेन्डरिङ आवश्यकताहरू, र 20+ विकासकर्ताहरूको टोलीहरूका साथ ठूला-ठूला अनुप्रयोगहरूमा आफ्नो वजन कमाउँछन् जसले कठोर सम्मेलनहरूबाट लाभ उठाउँछन्। मुख्य अन्तरदृष्टि यो हो कि सही उपकरण पूर्ण रूपमा समस्याको दायरामा निर्भर गर्दछ।

जाभास्क्रिप्ट ब्लोटको वास्तविक लागत

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

समस्या मोबाइल नेटवर्कहरूमा जटिल छ। 3G मा जडान गर्ने मिड-रेन्ज एन्ड्रोइड उपकरणमा प्रयोगकर्ताले प्रारम्भिक HTML रेन्डर गरिसकेपछि पनि जाभास्क्रिप्ट-हेभी पृष्ठ अन्तरक्रियात्मक हुनको लागि 5-8 सेकेन्ड पर्खन सक्छ। यो विशेष गरी उदीयमान बजारहरूमा ग्राहकहरूलाई सेवा दिने व्यवसायहरूको लागि सजाय हो, जहाँ मोबाइल-फर्स्ट ब्राउजिङ सामान्य हो र नेटवर्क पूर्वाधार नाटकीय रूपमा भिन्न हुन्छ।

• पर्स समय: ठूला JavaScript बन्डलहरूले पार्स र कम्पाइल गर्न लामो समय लिन्छन्, एप्लिकेसन कोडको एकल लाइन कार्यान्वयन हुनु अघि पनि
• मेमोरी प्रेसर: जटिल फ्रेमवर्क इन्टरनलले मेमोरी खपत गर्छ जुन एप्लिकेसनले नै प्रयोग गर्न सक्छ
• अद्यावधिक थकान: प्रमुख फ्रेमवर्क अपग्रेडहरू (Angular 1 to 2, Vue 2 to 3, react class components to hooks) ले महँगो माइग्रेसन प्रयासहरू प्रत्येक २-३ वर्षमा बाध्य पार्छ
• निर्भरता चेन: एक सामान्य प्रतिक्रिया परियोजनाको node_modules फोल्डरमा 800-1,200 प्याकेजहरू छन्, प्रत्येक एक सम्भावित सुरक्षा जोखिम वा ब्रेकिङ परिवर्तन
• जटिलता निर्माण गर्नुहोस्: Webpack, Babel, PostCSS, र तिनीहरूको कन्फिगरेसन फाइलहरू प्रायः तिनीहरूले सेवा गर्ने एप्लिकेसन कोड भन्दा बढी हुन्छन्।

माइक्रो-फ्रेमवर्कहरूले यी अधिकांश लागतहरूलाई पन्छाउँछन्। कम एब्स्ट्र्याक्सनको साथ, तोड्नको लागि कम चीजहरू छन्, अडिट गर्न कम निर्भरताहरू, र ब्राउजरमा पठाउन कम बाइटहरू छन्। एक समर्पित फ्रन्टएन्ड पूर्वाधार टोली बिना छिटो, भरपर्दो वेब उपस्थिति चाहिने व्यवसायको लागि, गणितले बढ्दो रूपमा सरलतालाई समर्थन गर्दछ।

विकासकर्ता समुदाय किन विभाजित छ

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

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

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

आधुनिक व्यवसायहरूलाई उनीहरूको टेक स्ट्याकबाट वास्तवमा के चाहिन्छ

ढाँचा बहस अन्ततः ठूलो प्रश्नको लागि प्रोक्सी हो: कसरी व्यवसायहरूले उनीहरूको सीमित प्राविधिक स्रोतहरू आवंटित गर्नुपर्छ? प्रत्येक घण्टा एक विकासकर्ताले बिल्ड पाइपलाइन कन्फिगर गर्न वा नयाँ फ्रेमवर्क संस्करणमा माइग्रेट गर्दा ग्राहकहरूलाई सेवा दिने सुविधाहरू निर्माण गर्न खर्च नगरेको घण्टा हो। धेरै व्यवसायहरूका लागि - विशेष गरी साना र मध्यम आकारका सञ्चालनहरू - आदर्श टेक्नोलोजी छनौट एउटा हो जसले "मसँग एउटा विचार छ" र "ग्राहकहरूले यसलाई प्रयोग गर्दैछन्" बीचको अन्तरलाई कम गर्छ।

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

यो सिद्धान्त फ्रन्टएन्ड फ्रेमवर्कभन्दा बाहिर फैलिएको छ। व्यवसायहरूले नियमित रूपमा उही ब्याकएन्ड प्रणालीहरू पुन: निर्माण गर्छन् — प्रयोगकर्ता प्रमाणीकरण, भुक्तानी प्रशोधन, CRM, इनभ्वाइसिङ, समयतालिका — किनभने तिनीहरूको छनोट गरिएको टेक स्ट्याकले यसको माग गर्दछ। Mewayz जस्ता प्लेटफर्महरू यस दोहोरिने कामलाई हटाउनको लागि ठ्याक्कै अवस्थित छन्, CRM र पेरोलदेखि बुकिङ प्रणाली र एनालिटिक्ससम्म सबै कुरा कभर गर्ने २०७ पूर्वनिर्मित मोड्युलहरू प्रदान गर्दै। उही दर्शन जसले विकासकर्ताहरूलाई माइक्रो-फ्रेमवर्क तिर डोर्‍याउँछ — कमसँग धेरै गर्नुहोस्, अनावश्यक जटिलता हटाउनुहोस् — व्यवसायहरूलाई एकल प्रणालीमा दर्जनौं SaaS सदस्यताहरू प्रतिस्थापन गर्ने समेकित प्लेटफर्महरू तर्फ लैजान्छ।

फ्रेमवर्क स्पेक्ट्रम: तपाईंको मीठो ठाउँ खोज्दै

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

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

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

गैर-प्राविधिक संस्थापक र व्यवसाय अपरेटरहरूको लागि पाठ

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

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

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

भविष्य जानाजानी छनौटहरूसँग सम्बन्धित छ

1,000-लाइन SPA फ्रेमवर्कको वरिपरिको उत्साह वास्तवमा फ्रेमवर्कको बारेमा होइन। यो सफ्टवेयर विकासमा जानबूझेर तर्फ बढ्दो आन्दोलनको बारेमा हो - उपकरणहरू छनौट गर्ने किनभने तिनीहरू समस्यासँग मिल्छन्, तिनीहरूले बजारमा हावी भएकाले होइन। जाभास्क्रिप्ट इकोसिस्टमले पछिल्लो दशकलाई विशेषता र अमूर्तताको हतियार दौडमा बिताएको छ। काउन्टर-आन्दोलन, माइक्रो-फ्रेमवर्कहरू, सर्भर-रेन्डर गरिएको HTML, र प्लेटफर्म-नेटिभ एपीआईहरू द्वारा प्रतिनिधित्व गरिएको, व्यावहारिकता तर्फको सुधार हो।

व्यवसायहरूको लागि, यो परिवर्तन स्पष्ट रूपमा सकारात्मक छ। यसको अर्थ अधिक विकल्पहरू, कम स्विचिङ लागतहरू, र विकासकर्ता संस्कृति हो जसले सैद्धान्तिक पूर्णतामा सरलता र गतिलाई बढ्दो रूपमा मूल्य दिन्छ। चाहे तपाईं WordPress र अनुकूलन-निर्मित साइट बीच छनौट गर्ने एकल उद्यमी हुनुहुन्छ, वा तपाईंको अर्को आन्तरिक उपकरण निर्माण गर्ने वा किन्नको लागि मूल्याङ्कन गर्ने CTO, उही सिद्धान्त लागू हुन्छ: उत्तम प्रविधि भनेको पृष्ठभूमिमा हराउने हो, तपाईंलाई आफ्ना ग्राहकहरूको सेवामा ध्यान केन्द्रित गर्न दिन्छ।

1,000-लाइन फ्रेमवर्कले हामीलाई शक्तिलाई जटिलताको आवश्यकता पर्दैन भनेर सम्झाउँछ। सबैभन्दा प्रभावकारी व्यवसायहरू — र सबैभन्दा प्रभावकारी उपकरणहरू — ती हुन् जसले आवश्यक पर्ने कुराहरू गर्छन् र अरू केही गर्दैनन्।