কম্পিউটার

Turbolinks-এর মাধ্যমে আপনার অ্যাপের নেভিগেশনের গতি বাড়ানো

Turbolinks হল একটি অপ্টিমাইজেশন যা অনুভূত বাড়ায় আপনার অ্যাপে পৃষ্ঠা পরিবর্তন এবং সম্পদ পুনরায় লোড করার বিষয়ে স্মার্ট হয়ে পারফরম্যান্স। শর্তসাপেক্ষ GET অনুরোধের বিপরীতে, এটির জন্য আপনার Rails অ্যাপে রুবি কোডে কোনো পরিবর্তনের প্রয়োজন নেই। Turbolinks 5 হল একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা সর্বত্র কাজ করে (এমনকি স্ট্যাটিক পৃষ্ঠাগুলিতে যেমন রেল ছাড়াই) এবং অসমর্থিত ব্রাউজারগুলিতে সুন্দরভাবে হ্রাস পায়৷

Turbolinks 5

টার্বোলিঙ্কসকে রেলের সাথে বান্ডিল করা হয়েছে এবং রেল 4 থেকে ডিফল্টভাবে নতুন অ্যাপ্লিকেশনগুলিতে অন্তর্ভুক্ত করা হয়েছে। রেল 5 জাহাজ Turbolinks 5 সহ, যা এখন যাকে Turbolinks Classic বলা হয় তার একটি পুনর্লিখন।

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

অন্তর্ভুক্ত করা হলে, Turbolinks স্বয়ংক্রিয়ভাবে একই ডোমেনে নির্দেশিত সমস্ত লিঙ্ক খুঁজে পাবে এবং একটি ক্লিক ইভেন্ট লিসেনার সংযুক্ত করবে। সেই লিঙ্কগুলিতে যেকোন ক্লিক করলে বাধা দেওয়া হবে। স্বাভাবিকের মতো লিঙ্কগুলি অনুসরণ করার পরিবর্তে, এটি XMLHttpRequest ব্যবহার করে জাভাস্ক্রিপ্টের মাধ্যমে পটভূমিতে লিঙ্ক করা পৃষ্ঠার অনুরোধ করে . তারপর, চারটি জিনিস ঘটে:

  1. বর্তমান পৃষ্ঠার একটি অনুলিপি Turbolinks-এর ক্যাশে সংরক্ষণ করা হয় যা পরে ব্যবহার করা হবে
  2. এটি প্রতিস্থাপন করে বর্তমান পৃষ্ঠার <body> <body> এর সাথে XHR ফলাফল থেকে
  3. এটি একত্রিত হয় বর্তমান পৃষ্ঠার <head> <head> এর সাথে XHR ফলাফল থেকে
  4. এটি ইতিহাস API ব্যবহার করে ব্রাউজারে URL পরিবর্তন করে

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

কিছু ভিউ সহ একটি নতুন Rails 5 অ্যাপে, আপনি লিঙ্কগুলিতে ক্লিক করে এবং পিছনের বোতাম টিপে চারপাশে নেভিগেট করার মাধ্যমে টার্বোলিঙ্কগুলিকে কার্যরত দেখতে পারেন৷ আপনার ব্রাউজারের নেটওয়ার্ক ট্যাবে, আপনি "xhr" হিসাবে চিহ্নিত Turbolinks এর মাধ্যমে লোড করা পৃষ্ঠাগুলির জন্য অনুরোধগুলি দেখতে পাবেন৷ এছাড়াও, প্রতিটি অনুরোধের জন্য আপনার সম্পদ পুনরায় লোড করা হবে না।

ক্যাশিং এবং পৃষ্ঠা পূর্বরূপ

একই পৃষ্ঠায় পরবর্তী অনুরোধের গতি বাড়ানোর জন্য, Turbolinks সম্প্রতি পরিদর্শন করা পৃষ্ঠাগুলির একটি ক্যাশে বজায় রাখে। উদাহরণস্বরূপ, পিছনের বোতাম টিপলে এটি পূর্ববর্তী পৃষ্ঠাটিকে অবিলম্বে রেন্ডার করার অনুমতি দেয়।

ধীরগতির পৃষ্ঠাগুলির অনুভূত কর্মক্ষমতা দ্রুততর করার জন্য, Turbolinks পৃষ্ঠাটির একটি পূর্বরূপ দেখাবে যদি এটি ক্যাশে বিদ্যমান থাকে। লিঙ্কে ক্লিক করার পরে, তাজা সংস্করণ লোড হওয়ার সময় ক্যাশে করা সংস্করণটি দেখানো হয়৷

সতর্কতা

Turbolinks আপনার ব্রাউজারের কিছু ডিফল্ট বৈশিষ্ট্য পুনরায় প্রয়োগ করে, তাই কিছু জিনিস টার্বোলিংকগুলি ছাড়ার চেয়ে আলাদাভাবে কাজ করে।

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

যেহেতু প্রতিটি লিঙ্ক ক্লিক করার পরে পৃষ্ঠাটি রিফ্রেশ হয় না, তাই window.onload ব্যবহার করে পৃষ্ঠা লোডের উপর জাভাস্ক্রিপ্ট লোড করা হচ্ছে অথবা DOMContentLoaded আর কাজ করে না। এটি ঠিক করতে, Turbolinks turbolinks:load সরবরাহ করে ইভেন্ট, যা আপনি পরিবর্তে ব্যবহার করতে পারেন:

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

ব্রাউজার লোডিং অবস্থা

পৃষ্ঠাগুলির মধ্যে স্যুইচ করার সময়, ব্রাউজারটি আপনার ব্রাউজারে লোডিং সূচকটি দেখাবে না কারণ অনুরোধটি পটভূমিতে কার্যকর হয়৷

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

$ rails new --skip-turbolinks ?

Turbolinks ক্লাসিক থেকে Turbolinks 5 অনেক দূর এগিয়েছে, যখন Turbolinks মনে হচ্ছিল যে আপনি একটি নতুন Rails অ্যাপ তৈরি করার সময় এড়িয়ে গেছেন। একটি চমত্কারভাবে অবক্ষয়কারী খাঁটি জাভাস্ক্রিপ্ট প্লাগইন যা এখন রেলের উপর নির্ভর করে না, এটি বেশিরভাগ অ্যাপের জন্য বাক্সের বাইরে কাজ করে, যদি আপনি সতর্কতাগুলি মনে রাখেন৷

বিনিময়ে, Turbolinks একটি চমৎকার গতি বৃদ্ধি করে এবং প্রতিটি পৃষ্ঠা দৃশ্যে আপনার স্ট্যাটিক সম্পদগুলিকে পুনরায় লোড হতে বাধা দেয়, যা কিছু নেটওয়ার্ক অনুরোধ সংরক্ষণ করে। একটি নতুন Rails অ্যাপ তৈরি করার সময়, এটি কী করে তা দেখতে Turbolinks-এ রাখার চেষ্টা করুন। বিদ্যমান অ্যাপে, Turbolinks একবার চেষ্টা করে দেখুন!

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


  1. টারবোলিঙ্কের জন্য আপনার একক পৃষ্ঠার অ্যাপ ডিচ করছেন?

  2. আপনার প্রথম ওয়েব স্ক্র্যাপার তৈরি করা, পার্ট 2

  3. আপনার প্রথম ওয়েব স্ক্র্যাপার তৈরি করা, পার্ট 2

  4. আইডি ওয়াচডগ দিয়ে আপনার পরিচয় রক্ষা করুন