Turbolinks से Turbo पर स्विच करना: एक व्यावहारिक माइग्रेशन गाइड

Turbolinks, जो आपके वेब एप्लिकेशन में नेविगेशन को तेज़ बनाने का एक बेहतरीन टूल था, अब सक्रिय विकास में नहीं है। इसे Hotwire परिवार का हिस्सा, Turbo नामक एक नए फ्रेमवर्क द्वारा प्रतिस्थापित किया गया है।

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

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

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

Turbo का परिचय

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

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

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

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

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

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

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

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

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

Rails में Posts CRUD

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

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

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

yarn remove turbolinks
yarn add @hotwired/turbo-rails

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

rails turbo:install

यदि एप्लिकेशन में Webpacker इंस्टॉल है, तो यह Turbo को npm के माध्यम से इंस्टॉल करेगा, जो है। यह कमांड आपके प्रोजेक्ट से सभी पुरानी Turbolinks निर्भरताओं को हटाने का भी प्रयास करता है यदि आप कुछ चूक गए हैं।

फिर, app/javascript/packs/application.js फाइल खोलें और निम्न कोड लाइनों का पता लगाएं:

import Turbolinks from "turbolinks";
Turbolinks.start();

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

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

import "@hotwired/turbo-rails";

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

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

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

आपके ब्राउज़र में पेज रीलोड होने के बाद, कंसोल लॉग्स देखें कि क्या प्रिंट होता है:

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' %>

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

Turbo विशेषताओं की खोज

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

आइए app/views/posts/index.html.erb फाइल में "New Post" बटन को निम्न में अपडेट करके इसे टेस्ट करें:

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

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

यदि आप अपने एप्लिकेशन को रीलोड करते हैं और "New Post" बटन पर क्लिक करते हैं, तो आप देखेंगे कि पेज अब सामान्य ऐप्स की तरह पूरी तरह से रीलोड हो रहा है।

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

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

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

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

फॉर्म सबमिशन

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

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

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

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

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

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

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

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

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

UI में वैलिडेशन त्रुटियों को प्रदर्शित करना

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

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

इसे टेस्ट करने के लिए, आपको पहले अपने _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 फ्रेम्स को संपूर्ण-पेज-आधारित एक्शन से अलग करता है।

प्रोग्रेस बार

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

Turbo पहले से ही पेज के शीर्ष पर एक अंतर्निहित CSS-आधारित प्रोग्रेस बार प्रदान करता है, जो Bootstrap और Material Design जैसे प्रमुख पुस्तकालयों द्वारा प्रदान किए गए समान है।

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

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

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

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

window.Turbo.setProgressBarDelay(1);

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

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

निष्कर्ष

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

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

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