Turbolinks একটি অপ্টিমাইজেশন যা পেজ সইচিং এবং আপনার অ্যাপে অ্যাসেট রিলোড সম্পর্কে স্মার্ট होकर উপলব্ধি পারফরম্যান্স বাড়ায়। কন্ডিশনাল GET রিকোয়েস্টের বিপরীতে, এটি আপনার রেইলস অ্যাপের রুবি কোডে কোনো পরিবর্তন দরকার নয়। Turbolinks ৫ একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা সব জায়গায় কাজ করে (রেইলস ছাড়াও, যেন স্ট্যাটিক পেজে) এবং অনসাপোর্টেড ব্রাউজারে গ্রেসফুলি ডিগ্রেড করে।

Turbolinks ৫

Turbolinks রেইলসের সাথে বান্ডেল করা হয়েছে এবং রেইলস ৪ থেকে নতুন অ্যাপ্লিকেশনে ডিফল্টভাবে ইনক্লুড করা হয়েছে। রেইলস ৫ Turbolinks ৫-এর সাথে শিপ করে, যা যেটি এখন Turbolinks Classic বলা হয় তার একটি রিরাইট।

যদিও এটি রেইলসের সাথে শিপ করে, Turbolinks-এর নতুন ভার্সন একটি পিউর জাভাস্ক্রিপ্ট লাইব্রেরি যেটি যেকোনো HTML পেজে ব্যবহার করা যায় পেজে একটি <script> ট্যাগে রাখে, বা অ্যাপের জাভাস্ক্রিপ্ট বান্ডলে ইনক্লুড করে।

যদি ইনক্লুড করা হয়, Turbolinks অটোমেটিক্যালি সকল লিংক খুঁজে বের করবে যেগুলো একই ডোমেনকে পয়েন্ট করে, এবং একটি ক্লিক ইভেন্ট লিসেনার আট্যাচ করবে। সেই লিংকগুলোর যেকোনো ক্লিক ইন্টারসেপ্ট হবে। লিংকগুলোকে নরমালি ফলো করার বদলে, এটি লিংকড পেজটি ব্যাকগ্রাউন্ডে জাভাস্ক্রিপ্ট দিয়ে XMLHttpRequest ব্যবহার করে রিকোয়েস্ট করে। তারপর, চারটি জিনিস ঘটে:

1. কারেন্ট পেজের একটি কপি Turbolinks'-এর ক্যাশে সংরক্ষিত হয় পরবর্তীতে ব্যবহার করার জন্য
2. এটি কারেন্ট পেজের <body>-কে XHR রেজাল্টের <body>-দিয়ে রিপ্লেস করে
3. এটি কারেন্ট পেজের <head>-কে XHR রেজাল্টের <head>-সহ মার্জ করে
4. এটি ব্রাউজারের URL পরিবর্তন করে History API ব্যবহার করে

<head> ট্যাগগুলো মার্জ করলে, ব্রাউজারকে উভয় পেজে উপস্থিত CSS এবং জাভাস্ক্রিপ্ট ফাইল রিলোড এবং রেরেন্ডার করতে হয় না। এটি আপনার অ্যাপ উল্লেখযোগ্যভাবে স্পিড আপ করতে পারে, বিশেষ করে যদি আপনার অনেক অ্যাসেট থাকে যা আপনার অধিকাংশ পেজে রিয়ুজ হয়।

একটি ফ্রেশ রেইলস ৫ অ্যাপে কিছু ভিউসহ, আপনি Turbolinks-কে একশনে দেখতে পারেন লিংক ক্লিক করে এবং ব্যাক বাটন চাপায়। আপনার ব্রাউজারের নেটওয়ার্ক ট্যাবে, আপনি Turbolinks দিয়ে লোড হওয়া পেজের রিকোয়েস্টগুলো "xhr" হিসেবে মার্ক করা দেখবেন। এছাড়া, আপনার অ্যাসেটগুলো প্রতিটি রিকোয়েস্টের জন্য রিলোড হবena।

ক্যাশিং এবং পেজ প্রিভিউ

একই পেজের পরবর্তী রিকোয়েস্ট স্পিড আপ করতে, Turbolinks সম্প্রতি ভিজিট করা পেজের একটি ক্যাশ মেইনটেইন করে। এটি পূর্বের পেজটি তৎক্ষণাৎ রেন্ডার করার অনুমতি দেয় যখন ব্যাক বাটন চাপা जाता है, উদাহরণস্বরূপ।

ধীর পেজের উপলব্ধি পারফরম্যান্স স্পিড আপ করতে, Turbolinks পেজের একটি প্রিভিউ দেখাবে যদি সেটি ক্যাশে এক্সিস্ট করে। লিংক ক্লিক করার পর, ক্যাশড ভার্সনটি দেখানো হয় যতক্ষণ না ফ্রেশ ভার্সন লোড হয়।

সতর্কতা

Turbolinks আপনার ব্রাউজারের কিছু ডিফল্ট ফিচার রি-ইমপ্লিমেন্ট করে, তাই কিছু জিনিস Turbolinks ইনэйবল্ড থাকলে ভিন্নভাবে কাজ করে তার নেই থাকলে।

turbolinks:load এবং <script> ট্যাগ

যেহেতু পেজ প্রতিটি লিংক ক্লিকের পর রিফ্রেশ হয় না, window.onload বা DOMContentLoaded ব্যবহার করে পেজ লোডে জাভাস্ক্রিপ্ট লোড করা আর কাজ করে না। এটিকে ফিক্স করতে, Turbolinks turbolinks:load ইভেন্ট সরবরাহ করে, যা আপনি বদলে ব্যবহার করতে পারেন:

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

ব্রাউজার লোডিং স্টেট

পেজ সইচ করার সময়, ব্রাউজার আপনার ব্রাউজারে লোডিং ইন্ডিকেটর দেখাবে না কারণ রিকোয়েস্ট ব্যাকগ্রাউন্ডে এক্সিকিউট হয়।

এটি ফিক্স করার চেষ্টায়, Turbolinks ৫০০ মিলিসেকেন্ড পর পেজের শীর্ষে একটি নীল বার দেখাবে (যেটি CSS দিয়ে স্টাইল করা যায়) ইন্ডিকেট করতে যে পেজ লোড হচ্ছে।

$ rails new --skip-turbolinks?

Turbolinks ৫ Turbolinks Classic থেকে একটি লম্বা পথ এগিয়ে আসেছে, যখন Turbolinks মনে হতো সেটি वो জিনিস যা আপনি নিউ রেইলস অ্যাপ জেনারেট করার সময় স্কিপ করতেন। একটি গ্রেসফুলি ডিগ্রেডিং পিউর জাভাস্ক্রিপ্ট প্লাগইন যেটি রেইলসে ডিপেন্ড করে না, এখন এটি অধিকাংশ অ্যাপের জন্য আউট অফ দ্য বক্স কাজ করে, যদি আপনি সতর্কতাগুলো মনে রাখেন।

বিনিময়ে, Turbolinks একটি সুন্দর স্পিড বুস্ট দেয় এবং আপনার স্ট্যাটিক অ্যাসেটগুলো প্রতিটি পেজ ভিউতে রিলোড হতে বাঁচায়, যা কিছু নেটওয়ার্ক রিকোয়েস্ট বাঁচায়। একটি নতুন রেইলস অ্যাপ জেনারেট করার সময়, Turbolinks রাখার চেষ্টা করুন দেখতে এটি কী করে। এক্সিস্টিং অ্যাপগুলোর জন্য, Turbolinks একটি চান্স দিন!

এটি Turbolinks-এর আমাদের ওভারভিউ সমাপ্ত করে। আপনি কি আপনার যেকোনো অ্যাপে Turbolinks ব্যবহার করছেন? আমরা আপনার কাছ থেকে শুনতে চাই! এছাড়া, আমরা জানতে চাই আপনি এই এবং পূর্ববর্তী আর্টিকেলগুলো AppSignal Academy-এ কেমন লেগেছে, বা আপনি পরবর্তীতে কী পড়তে চান @AppSignal-এ।