टर्बोलिंक्स एक ऑप्टिमाइज़ेशन है जो आपके ऐप में पेज स्विच करने और एसेट्स रीलोड करने के बारे में स्मार्ट होकर कथित प्रदर्शन को बढ़ाता है। कंडीशनल GET अनुरोधों के विपरीत, इसके लिए आपके रेल्स ऐप में रूबी कोड में किसी भी बदलाव की आवश्यकता नहीं है। टर्बोलिंक्स 5 एक जावास्क्रिप्ट लाइब्रेरी है जो हर जगह काम करती है (यहां तक कि रेल्स के बिना, जैसे स्टेटिक पेजों पर) और अनसपोर्टेड ब्राउज़र्स पर ग्रेसफुली डिग्रेड होती है।

टर्बोलिंक्स 5

टर्बोलिंक्स रेल्स के साथ बंडल किया गया है और रेल्स 4 से नए एप्लिकेशन्स में डिफ़ॉल्ट रूप से शामिल है। रेल्स 5 टर्बोलिंक्स 5 के साथ शिप होता है, जिसे अब टर्बोलिंक्स क्लासिक कहा जाता है उसका रीराइट है।

हालांकि यह रेल्स के साथ शिप होता है, टर्बोलिंक्स का नया संस्करण एक शुद्ध जावास्क्रिप्ट लाइब्रेरी है जिसे किसी भी HTML पेज पर पेज पर <script> टैग में डालकर, या ऐप के जावास्क्रिप्ट बंडल में शामिल करके उपयोग किया जा सकता है।

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

1. वर्तमान पेज की एक कॉपी टर्बोलिंक्स के कैश में बाद में उपयोग के लिए स्टोर की जाती है
2. यह वर्तमान पेज के <body> को XHR परिणाम से <body> से प्रतिस्थापित करता है
3. यह वर्तमान पेज के <head> को XHR परिणाम से <head> के साथ मर्ज करता है
4. यह हिस्ट्री API का उपयोग करके ब्राउज़र में URL बदलता है

<head> टैग्स को मर्ज करके, ब्राउज़र को दोनों पेजों पर मौजूद CSS और जावास्क्रिप्ट फाइल्स जैसे एसेट्स को रीलोड और रीरेंडर नहीं करना पड़ता। यह आपके ऐप को काफी तेज कर सकता है, खासकर यदि आपके पास बहुत सारे एसेट्स हैं जो आपके अधिकांश पेजों पर पुन: उपयोग किए जाते हैं।

कुछ व्यूज के साथ एक नए रेल्स 5 ऐप में, आप लिंक्स पर क्लिक करके और बैक बटन दबाकर नेविगेट करके टर्बोलिंक्स को एक्शन में देख सकते हैं। आपके ब्राउज़र के नेटवर्क टैब में, आप टर्बोलिंक्स के माध्यम से लोड किए गए पेजों के अनुरोधों को "xhr" के रूप में चिह्नित देखेंगे। साथ ही, आपके एसेट्स हर अनुरोध के लिए रीलोड नहीं होंगे।

कैशिंग और पेज प्रीव्यू

बाद के अनुरोधों को उसी पेज पर तेज करने के लिए, टर्बोलिंक्स हाल ही में देखे गए पेजों का कैश रखता है। यह उदाहरण के लिए बैक बटन दबाने पर पिछले पेज को तुरंत रेंडर करने की अनुमति देता है।

धीमे पेजों के कथित प्रदर्शन को तेज करने के लिए, टर्बोलिंक्स कैश में मौजूद होने पर पेज का प्रीव्यू दिखाएगा। लिंक पर क्लिक करने के बाद, ताजा संस्करण लोड होने तक कैश्ड संस्करण दिखाया जाता है।

चेतावनी

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

turbolinks:load और <script> टैग्स

चूंकि हर लिंक क्लिक के बाद पेज रीफ्रेश नहीं होता, पेज लोड पर जावास्क्रिप्ट लोड करने के लिए window.onload या DOMContentLoaded का उपयोग करना अब काम नहीं करता। इसे ठीक करने के लिए, टर्बोलिंक्स turbolinks:load इवेंट प्रदान करता है, जिसका आप बजाय उपयोग कर सकते हैं:

document.addEventListener("turbolinks:load", function() {
  // ...
}) 

ब्राउज़र लोडिंग स्टेट्स

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

इसे ठीक करने के प्रयास में, टर्बोलिंक्स 500 मिलीसेकंड के बाद पेज के शीर्ष पर एक नीली बार (जिसे CSS से स्टाइल किया जा सकता है) दिखाएगा ताकि यह इंगित किया जा सके कि पेज लोड हो रहा है।

$ rails new --skip-turbolinks?

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

बदले में, टर्बोलिंक्स एक अच्छी गति बढ़ाता है और आपके स्टेटिक एसेट्स को हर पेज व्यू पर रीलोड होने से रोकता है, जो कुछ नेटवर्क अनुरोधों को बचाता है। नया रेल्स ऐप जनरेट करते समय, टर्बोलिंक्स को रखने का प्रयास करें यह देखने के लिए कि यह क्या करता है। मौजूदा ऐप्स पर, टर्बोलिंक्स को आज़माएं!

यह टर्बोलिंक्स का हमारा अवलोकन समाप्त करता है। क्या आप अपने किसी ऐप में टर्बोलिंक्स का उपयोग कर रहे हैं? हम आपसे सुनना पसंद करेंगे! साथ ही, हम यह जानने के लिए उत्सुक हैं कि आपको यह और ऐपसिग्नल अकादमी के पिछले लेख कैसे लगे, या आप आगे @AppSignal पर क्या पढ़ना चाहेंगे।