टर्बोलिंक्स से टर्बो में माइग्रेट करना

Turbolinks, आपके वेब एप्लिकेशन को तेज़ी से नेविगेट करने के लिए एक बेहतरीन टूल, अब सक्रिय विकास के अधीन नहीं है। इसे टर्बो नामक एक नए ढांचे से हटा दिया गया है, जो हॉटवायर छतरी का हिस्सा है।

इसके पीछे की टीम समझ गई थी कि अन्य सामान टर्बोलिंक्स से निकाले गए समान अवधारणाओं को अपना सकते हैं, ताकि वे एक तेज़ वेब का पालन कर सकें, जैसे फ़्रेम, फ़ॉर्म सबमिशन और नेटिव ऐप्स।

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

हम किस बारे में बात करेंगे, इसे बेहतर ढंग से समझने के लिए, Turbolinks का कुछ ज्ञान होना आवश्यक है। आप इसके बारे में यहां और यहां अधिक पढ़ सकते हैं।

टर्बो का परिचय

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

ऐसा करने के लिए, टर्बो खुद को चार मुख्य भागों में विभाजित करता है:

• टर्बो ड्राइव , टर्बो का दिल, आपके लिंक और रूपों पर सभी क्लिकों के स्वचालित अवरोधन के माध्यम से पूर्ण पृष्ठ पुनः लोड होने से बचाता है, ब्राउज़र को इसे कॉल करने से रोकता है, इतिहास एपीआई के माध्यम से यूआरएल बदलता है, अजाक्स के माध्यम से पर्दे के पीछे के पृष्ठ का अनुरोध करता है, और प्रतिक्रिया प्रस्तुत करता है उचित रूप से।
• टर्बो फ्रेम्स पृष्ठ के उपसमुच्चय को स्वतंत्र रूप से व्यवहार करने के लिए फ़्रंट-एंड देवों द्वारा फ़्रेम के साथ व्यवहार करने के तरीके को फिर से खोजकर पृष्ठ सबसेट/फ़्रेम से संबंधित है। यह पृष्ठों को अलग-अलग दायरे और आलसी लोड क्षमताओं के साथ संदर्भ के स्वतंत्र सेट में विघटित करता है।
• टर्बो स्ट्रीम सीआरयूडी कंटेनर टैग के एक साधारण सेट के साथ वेब सॉकेट पर एसिंक डिलीवरी के माध्यम से सामान्य आंशिक पृष्ठ अपडेट को प्रतिस्थापित करने में सहायता करता है। उनके साथ, आप एक ही वेब सॉकेट के माध्यम से HTML टुकड़े भेज सकते हैं और पृष्ठ को UI को समझ सकते हैं और फिर से संसाधित कर सकते हैं।
• टर्बो नेटिव यदि आप मूल रूप से iOS/Android पर जा रहे हैं, तो मूल शेल के लिए एम्बेडेड वेब ऐप्स में टर्बो से निपटने के लिए सभी आवश्यक टूलिंग प्रदान करता है।

प्रोजेक्ट सेटअप

चीजों को गति देने में मदद करने के लिए, मैंने आपको एक उपयोग के लिए तैयार रेल ऐप प्रोजेक्ट प्रदान करने का निर्णय लिया है जिसमें स्टाइलिंग के लिए बूटस्ट्रैप के साथ-साथ एक मचान पोस्ट फॉर्म-फ्लो एम्बेडेड है।

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

आप rails s . के साथ एक नया स्कैफोल्डेड Rails ऐप भी जेनरेट कर सकते हैं आदेश।

आप यहां भंडार का गिटहब लिंक पा सकते हैं। इसे स्थानीय रूप से क्लोन करना सुनिश्चित करें और bundle install कमांड चलाएं सभी रेल निर्भरताओं को स्थापित करने के लिए।

एक बार सब कुछ सेट हो जाने के बाद, रेल सर्वर को rails s . के माध्यम से प्रारंभ करें कमांड करें और /posts देखें यूआरआई, जैसा कि नीचे दिखाया गया है:

सीआरयूडी को रेल में पोस्ट करता है

कार्रवाई में टर्बोलिंक्स की सुविधाओं की जांच करने के लिए, नई पोस्ट बनाने या एक आइटम प्रदर्शित करने के लिए बस लिंक के माध्यम से नेविगेट करें। आप देखेंगे कि पृष्ठ पुनः लोड किए बिना URL बदल जाता है।

माइग्रेशन चरण

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

yarn remove turbolinks
yarn add @hotwired/turbo-rails

यह सुनिश्चित करने का एक और शानदार तरीका है कि यदि आप रेल के साथ काम कर रहे हैं, तो सब कुछ ठीक से स्थापित है, निम्न आदेश चलाकर:

rails turbo:install

यह npm के माध्यम से टर्बो स्थापित करेगा यदि वेबपैकर एप्लिकेशन में स्थापित है, जो कि यह है। यदि आप कुछ चूक गए हैं तो यह आदेश आपके प्रोजेक्ट से सभी Turbolinks पुरानी निर्भरता को हटाने का भी प्रयास करता है।

फिर, ऐप/जावास्क्रिप्ट/पैक/application.js खोलें फ़ाइल करें और कोड की निम्न पंक्तियों का पता लगाएं:

import Turbolinks from "turbolinks";

Turbolinks.start();

ध्यान दें कि आपके रेल ऐप के संस्करण के आधार पर आयात थोड़ा बदल सकता है (पुराने संस्करणों का उपयोग किया जाता है require import . के बजाय ) फिर भी, प्रक्रिया दोनों के लिए समान है।

फिर, उन्हें निम्नलिखित संबंधित के साथ प्रतिस्थापित करें:

import "@hotwired/turbo-rails";

हाँ, केवल एक आयात; मैन्युअल रूप से कुछ भी शुरू करने की कोई आवश्यकता नहीं है। Turbo इंस्टेंस स्वचालित रूप से window.Turbo . को असाइन किया जाता है आयात पर आपत्ति, जिसे प्रबंधित करना आसान है।

इसका परीक्षण करने के लिए और यह देखने के लिए कि क्या हम केवल टर्बो की तलाश कर रहे हैं और टर्बोलिंक नहीं, आइए फ़ाइल के अंत में निम्नलिखित कोड स्निपेट जोड़ें:

$(document).on("turbolinks:load", () => {
  console.log("turbolinks!");
});
$(document).on("turbo:load", () => {
  console.log("turbo!");
});

आपके ब्राउज़र में पृष्ठ के पुनः लोड होने के बाद, क्या प्रिंट किया गया है यह देखने के लिए कंसोल लॉग की जाँच करें:

टर्बो लोड इवेंट लॉग की जांच करना

हमें app/views/layouts/application.html.erb में एक और बदलाव करने की ज़रूरत है फ़ाइल, जो मूल रूप से पुराने Turbolinks डेटा विशेषताओं को Turbo के समकक्ष में बदलने के लिए है। data-turbolinks-* . का उपयोग करके दो टैग का पता लगाएँ विशेषताएँ और उन्हें निम्नलिखित के साथ प्रतिस्थापित करें:

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbo-track': 'reload' %>

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

टर्बो सुविधाओं को एक्सप्लोर करना

चूंकि टर्बो स्वचालित रूप से आपके एप्लिकेशन में सभी लिंक को बिना रीलोड के कॉल करने के लिए इंटरसेप्ट करता है, उदाहरण के लिए, यदि आपको किसी विशेष लिंक के लिए उस कार्यक्षमता को अक्षम करने की आवश्यकता है, तो आपको इसे स्पष्ट रूप से कोड करना होगा।

आइए app/views/posts/index.html.erb में "नई पोस्ट" बटन को अपडेट करके इसका परीक्षण करें। निम्नलिखित को फाइल करें:

<%= link_to 'New Post', new_post_path, :class => "btn btn-primary btn-sm", "data-turbo" => "false" %>

ध्यान दें कि हम स्पष्ट रूप से नई डेटा विशेषता जोड़ रहे हैं data-turbo , टर्बो को क्लिक करने पर इस विशिष्ट लिंक को न देखने के लिए कहने के लिए।

यदि आप अपना आवेदन पुनः लोड करते हैं और "नई पोस्ट" बटन पर क्लिक करते हैं, तो आप देखेंगे कि पृष्ठ अब पूरी तरह से पुनः लोड हो रहा है जैसा कि सामान्य ऐप्स में होता है।

यह परीक्षण करने का भी एक शानदार तरीका है कि क्या Turbo सेट है और आपके एप्लिकेशन में काम कर रहा है।

वही आपके रूपों के लिए जाता है। टर्बो स्वचालित रूप से सभी फॉर्म सबमिशन का ख्याल रखता है, इसलिए वे अतुल्यकालिक रूप से होते हैं। यदि आप इसे app/views/posts/_form.html.erb के अंतर्गत फ़ॉर्म के लिए अक्षम करना चाहते हैं फ़ाइल, आपको सबमिट बटन को निम्न में बदलना चाहिए:

<div class="actions">
    <%= form.submit class: "btn btn-primary btn-sm", "data-turbo" => false %>
</div>

ऐप को फिर से लोड करें और इसका परीक्षण करें! नई पोस्ट बनाते समय आपको वही व्यवहार दिखाई देगा।

फ़ॉर्म सबमिशन

रूपों के बारे में बोलते हुए, टर्बो उनके साथ उसी तरह से व्यवहार करता है जैसे वह लिंक के साथ करता है। हालांकि, प्रपत्र अनुरोध हमेशा सफलतापूर्वक समाप्त नहीं होते हैं।

आइए इसे व्यवहार में देखें! सबसे पहले, पोस्ट का name बदलने के लिए कुछ सत्यापन जोड़ें और title आवश्यक गुण। इसके लिए app/models/post.rb खोलें फ़ाइल करें और इसे निम्न में बदलें:

class Post < ApplicationRecord
    validates :name, presence: true
    validates :title, presence: true
end

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

फ़ॉर्म प्रतिक्रियाओं को किसी अन्य स्थान पर रीडायरेक्ट करना चाहिए

इसे ठीक करने के लिए, हमारे पास दो संभावित दृष्टिकोण हैं। पहले में status . जोड़ना शामिल है प्रत्येक पोस्ट नियंत्रक अद्यतन करने योग्य क्रियाओं (पोस्ट, पुट, आदि) के लिए और इसे इसके मूल्य के रूप में अप्राप्य इकाई वस्तु प्राप्त करें।

नीचे, आप create . दोनों के लिए कोड परिवर्तन देख सकते हैं और update (post_controller.rb ) तरीके:

# def create
format.html { render :new, status: :unprocessable_entity }

# def update
format.html { render :edit, status: :unprocessable_entity }

अपने संपादन सहेजें और फ़ॉर्म का पुन:परीक्षण करें। आप देखेंगे कि इस बार त्रुटियां सही ढंग से प्रदर्शित हुई हैं:

यूआई में सत्यापन त्रुटियां प्रदर्शित करना

ऐसा करने का दूसरा तरीका turbo_frame_tag . के माध्यम से है . टर्बो का उपयोग करने वाले रेल ऐप में, हमने जिन टर्बो फ्रेम्स की बात की है, वे इस टैग द्वारा प्रस्तुत किए गए हैं।

जब आप अपने पृष्ठ के एक हिस्से को अलग करना चाहते हैं और बैकएंड ऐप के साथ एक सीधी सुरंग खोलना चाहते हैं तो यह एक बेहतरीन संसाधन है ताकि टर्बो इस विशिष्ट फ्रेम के लिए अनुरोध और प्रतिक्रियाएं संलग्न कर सके।

इसका परीक्षण करने के लिए, आपको सबसे पहले अपने _form.html.erb की संपूर्ण सामग्री को लपेटना होगा इस टैग के भीतर फ़ाइल करें:

<%= turbo_frame_tag post do %>
    ...
<% end %>

प्रपत्रों के मामले में यह पद स्पष्ट कारणों से है। जब आप अपने ब्राउज़र पर वापस आते हैं और उसका पुन:परीक्षण करते हैं, तो वही सत्यापन त्रुटियाँ अपेक्षित रूप से दिखाई देंगी।

यहां ध्यान देने योग्य एक और दिलचस्प बात उस फॉर्म के लिए जेनरेट किया गया HTML है। एक नज़र डालें:

<turbo-frame id="new_post">
  <form action="/posts" accept-charset="UTF-8" method="post">
    ...
  </form>
</turbo-frame>

यह कस्टम HTML तत्व है कि कैसे Turbo, फ़्रेम को संपूर्ण-पृष्ठ-आधारित क्रियाओं से अलग करता है।

प्रगति बार

यह सामान्य बात है कि जब आप ब्राउज़र के डिफ़ॉल्ट लोडिंग तंत्र को हटाते हैं, तो आप उन मामलों के लिए दूसरा प्रदान करते हैं जिनमें पृष्ठ धीरे-धीरे लोड होता है।

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

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

अगर आप इसकी शैली बदलने या इसे पूरी तरह से हटाने के इच्छुक हैं, तो आप .turbo-progress-bar के साथ खेल सकते हैं सीएसएस वर्ग, जैसा कि नीचे दिखाया गया है:

.turbo-progress-bar {
  height: 15px;
  background-color: gold;
}

इसका परीक्षण करने के लिए, आपको application.js . में प्रगति बार विलंब को कम करना होगा निम्नलिखित कोड के साथ फाइल करें:

window.Turbo.setProgressBarDelay(1);

प्रदान किया गया समय मिलीसेकंड में है। नीचे, आप प्रगति पट्टी के लिए अद्यतन शैली का प्रतिनिधित्व पा सकते हैं।

अपडेट की गई प्रगति बार प्रदर्शित करना

रैपिंग अप

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

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

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