पेश है Inertia.js

वेब एप्लिकेशन बनाना एक बहुत ही कठिन प्रक्रिया हो सकती है। कई रूपरेखाओं और पुस्तकालयों से चुनने के लिए आगे बढ़ने से पहले आपको इस बारे में सोचना होगा कि क्या यह एक पारंपरिक सर्वर-साइड रेंडर ऐप (SSR) या सिंगल पेज एप्लिकेशन (SPA) होगा।

जबकि सर्वर-साइड और क्लाइंट-साइड रेंडरिंग दोनों के अपने फायदे और नुकसान हैं, जड़ता दोनों दुनिया के सर्वश्रेष्ठ को जोड़ती है।

Inertia.js क्या है?

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

इसके अनुसार आधिकारिक दस्तावेज :

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

---

कुछ लोग पूछ रहे होंगे कि क्या यह एक और जावास्क्रिप्ट फ्रेमवर्क है? प्रलेखन यह कहना है:

बिटबकेट हटाए गए शाखा को पुनर्प्राप्त करें

Inertia कोई ढांचा नहीं है, न ही यह आपके मौजूदा सर्वर-साइड या क्लाइंट-साइड फ्रेमवर्क का प्रतिस्थापन है। बल्कि, यह उनके साथ काम करने के लिए डिज़ाइन किया गया है। जड़ता को गोंद के रूप में सोचें जो दोनों को जोड़ता है।

समस्या Inertia.js हल करती है

जड़ता आधुनिक अनुप्रयोगों का निर्माण करते समय डेवलपर्स के सामने आने वाली कई समस्याओं को हल करती है। समस्याएं जैसे:

एसपीए जटिलताओं— आधुनिक एसपीए बनाने में कुछ दिक्कतें आती हैं। ऐप के लिए राज्य को प्रभावी ढंग से प्रबंधित करने, ऐप के लिए रूटिंग का पता लगाने, नेविगेशन गार्ड स्थापित करने और प्रमाणीकरण के साथ डेवलपर्स को हमेशा समस्याएं होती हैं बिल्डिंग एपीआई- Inertia.js के साथ आपको REST या GraphQL API बनाने की आवश्यकता नहीं है, क्योंकि Inertia को आपके क्लासिक सर्वर-साइड फ्रेमवर्क जैसे Laravel, Ruby on Rails, या Django के साथ लीक से हटकर काम करने के लिए बनाया गया था। ब्राउज़र मुद्दे- जड़ता में अंतर्निहित सेवाएं हैं जो एसपीए के निर्माण के दौरान आने वाली ब्राउज़र समस्याओं को हल करती हैं, जैसे मुद्दे:
• ब्राउज़र इतिहास प्रबंधन और स्क्रॉल स्थिति — यह |_+_| प्रदान करता है , |_+_|, और |_+_| स्थानीय घटक राज्यों को कैश करने के गुण
• लोडिंग संकेत - क्योंकि जड़ता अनुरोध AJAX कॉल के माध्यम से किए जाते हैं, कोई डिफ़ॉल्ट ब्राउज़र लोडिंग संकेतक नहीं है, इसलिए जड़ता में शामिल हैं NProgress.js , एक प्रगति बार पुस्तकालय। लोडिंग इंडिकेटर केवल तभी दिखाया जाता है जब अनुरोध 250 मीटर से अधिक समय लेता है
• एसेट रीलोडिंग और वर्जनिंग - जड़ता आपकी वेबसाइट पर संपत्ति के वर्तमान संस्करण को ट्रैक और स्टोर करने का विकल्प प्रदान करती है

आपको Inertia.js का उपयोग क्यों करना चाहिए?

ग्राफक्यूएल का उपयोग किए बिना ग्राफक्यूएल लाभ उठाता है

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

सीमित AJAX कॉल

पारंपरिक एसपीए में, डेटा प्राप्त करने के लिए प्रत्येक पृष्ठ विज़िट पर AJAX कॉल किए जाते हैं। Inertia में, ऐप को बूट करने के लिए एक AJAX कॉल किया जाता है, फिर यह लगातार Vue.js उदाहरण बनाए रखता है और हर बाद के पेज विज़िट XHR के माध्यम से एक विशेष |_+_| हैडर |_+_| पर सेट है। यह सर्वर को पूर्ण-पृष्ठ विज़िट करने के बजाय JSON के रूप में जड़ता प्रतिक्रिया भेजने के लिए ट्रिगर करता है।

यह एक असफल-सुरक्षित घटक भी बनाता है जो एक मानक एंकर लिंक के चारों ओर लपेटता है, यह क्लिक ईवेंट को इंटरसेप्ट करता है और पूर्ण पृष्ठ पुनः लोड होने से रोकता है।

सुरक्षा

एपीआई-संचालित ऐप्स का निर्माण करते समय, हमें अन्य मूल पर संसाधनों तक पहुंचने में सक्षम होने के लिए अपने ऐप में सीओआरएस समर्थन जोड़ना होगा।

जड़ता के साथ आपको CORS स्थापित करने के बारे में चिंता करने की ज़रूरत नहीं है क्योंकि आपका डेटा आपके नियंत्रकों के माध्यम से प्रदान किया जाता है और आपके जावास्क्रिप्ट घटकों के समान डोमेन पर रखा जाता है।

आप सर्वर-साइड पर प्राधिकरण सेट अप कर सकते हैं और अपने पेज घटकों के लिए प्रॉप के रूप में टोकन को दरकिनार कर प्राधिकरण जांच कर सकते हैं, इससे महत्वपूर्ण जानकारी को उजागर करने के जोखिम को कम करने में मदद मिलती है क्योंकि हैंडलिंग ग्राहक पर प्राधिकरण एक XSS हमले (क्रॉस-साइट स्क्रिप्टिंग) के जोखिम में डाल सकता है।

फ्रेमवर्क अज्ञेयवादी

जड़ता दोनों सर्वर-साइड और क्लाइंट-साइड फ्रेमवर्क अज्ञेयवादी है। आप किसी भी सर्वर-साइड फ्रेमवर्क के साथ-साथ डायनेमिक घटकों का समर्थन करने वाले किसी भी क्लाइंट-साइड फ्रेमवर्क के साथ जड़ता का उपयोग कर सकते हैं।

जड़ता एडेप्टर ऐसी सेवाएं (पैकेज) हैं जो विशिष्ट ढांचे के साथ जड़ता को अच्छी तरह से काम करने में मदद करती हैं, आधिकारिक एडाप्टर समर्थन वर्तमान में सीमित है रेल , laravel बैकएंड पर, और प्रतिक्रिया , देखें.जे.एस , दुर्बल अग्रभाग पर।

कुछ अन्य रूपरेखाओं के लिए अनौपचारिक एडेप्टर हैं जैसे सिम्फोनी , Django , केकेपीएचपी , और अदोनिस .

क्या जड़ता का कोई भविष्य है?

वेब हमेशा विकसित हो रहा है और हमने पारंपरिक सर्वर-साइड निर्मित मोनोलिथ ऐप्स से API-संचालित ऐप्स में संक्रमण देखा है। इस मौजूदा चलन के साथ क्या जड़ता का कोई भविष्य है?

बेशक, प्रश्न का उत्तर उपयोग के मामले और वरीयताओं पर निर्भर करता है।

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

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

क्या इनर्शिया के साथ सर्वर-साइड रेंडरिंग संभव है?

जड़ता वर्तमान में सर्वर-साइड रेंडरिंग का समर्थन नहीं करती है, लेकिन जड़ता वेबसाइटों को प्री-रेंडर करने के लिए उपकरण हैं, वे आपकी वेबसाइटों के विशिष्ट मार्गों के स्थिर HTML संस्करणों को उत्पन्न और कैश करते हैं, और फिर उस सामग्री की सेवा करते हैं।

अपने प्रोजेक्ट में Inertia.js का उपयोग शुरू करें

आवश्यक शर्तें

यह इंस्टॉलेशन प्रक्रिया सर्वर-साइड के लिए Laravel और क्लाइंट-साइड के लिए Vue.js का उपयोग करती है, इस सेक्शन के साथ निम्नलिखित का पालन करना आवश्यक है:

• नोड.जेएस 10x या उच्चतर और धागा / एनपीएम 5.2 या उच्चतर स्थापित आपके पीसी पर
• पीएचपी> = 7.2.0, संगीतकार और laravel आपके पीसी पर स्थापित
• मूल Vue और Laravel मूल सिद्धांत

एक नया Laravel प्रोजेक्ट बनाएं:

या संगीतकार के साथ बनाएँ:

|_+_| परियोजना में:

कैलेंडर प्रतिक्रिया देशी

कंपोज़र का उपयोग करके Inertia का सर्वर-साइड एडॉप्टर इंस्टॉल करें:

|_+_| का नाम बदलें फ़ाइल आपके |_+_| में मिली फोल्डर |_+_|.

अपने |_+_| की सामग्री को बदलें इसके साथ ही:

|_+_| निर्देश एक सहायक है जो आधार बनाता है |_+_| एक |_+_| के साथ का |_+_| जिसमें पृष्ठ की जानकारी होती है, यह लारवेल को बताता है कि विचार जड़ता का उपयोग करके उत्पन्न होते हैं।

अगला, अपने टर्मिनल में यह कमांड चलाकर क्लाइंट-साइड एडॉप्टर सेट करें:

अपना |_+_| खोलें फ़ाइल |_+_| में मिली और अपने |_+_| की सामग्री को बदलें निम्नलिखित के साथ फाइल करें:

|_+_| कॉलबैक जड़ता को बताता है कि पृष्ठ घटक को कैसे लोड किया जाए। यह एक पृष्ठ नाम के रूप में एक स्ट्रिंग प्राप्त करता है और एक पृष्ठ उदाहरण देता है।

गतिशील आयात

कोड-विभाजन को सक्षम करने के लिए हम गतिशील आयात के लिए बैबेल प्लगइन का उपयोग करते हैं।

सबसे पहले, इस आदेश को चलाकर इसे स्थापित करें:

इसके बाद, एक |_+_| बनाएं निम्नलिखित के साथ अपनी प्रोजेक्ट रूट निर्देशिका में फ़ाइल करें:

अंत में, |_+_| को अपडेट करें उपयोग करने के लिए आपके ऐप आरंभीकरण में कॉलबैक |_+_| इसके बजाय |_+_|. कॉलबैक एक वादा देता है जिसमें एक घटक उदाहरण शामिल होता है, जैसे:

मैं डॉगकैश कहां से खरीद सकता हूं?

निष्कर्ष

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

चेकआउट जड़ता चालू है Github और यह लेख द्वारा लिखित जोनाथन रेनिंक ज्यादा सीखने के लिए। आधिकारिक प्रलेखन भी अच्छी तरह से लिखा गया है और आरंभ करने के लिए एक उत्कृष्ट संसाधन है।