Turbolinks থেকে Turbo-এ স্থানান্তর করা

Turbolinks, আপনার ওয়েব অ্যাপ্লিকেশন দ্রুত নেভিগেট করার জন্য একটি দুর্দান্ত সরঞ্জাম, আর সক্রিয় বিকাশের অধীনে নেই৷ এটি টার্বো নামে একটি নতুন কাঠামোর দ্বারা বাতিল করা হয়েছে, যা হটওয়্যার ছাতার অংশ৷

এর পিছনে থাকা দলটি বুঝতে পেরেছিল যে অন্যান্য জিনিসগুলি একটি দ্রুত ওয়েবে মেনে চলতে Turbolinks থেকে নেওয়া অনুরূপ ধারণাগুলি গ্রহণ করতে পারে, যেমন ফ্রেম, ফর্ম জমা দেওয়া এবং নেটিভ অ্যাপ৷

এই নিবন্ধটির লক্ষ্য টার্বো ফ্রেমওয়ার্কের জন্য একটি নির্দেশিকা প্রদান করা, যা Turbolinks-এর নতুন বিকল্প, একটি ব্যবহারিক মাইগ্রেশন গাইড সহ যা ব্যাখ্যা করবে কিভাবে Turbo-এ Turbolinks-এর সবচেয়ে গুরুত্বপূর্ণ এবং সাধারণভাবে ব্যবহৃত টুকরা ব্যবহার করতে হয়।

আমরা কী বিষয়ে কথা বলব তা আরও ভালভাবে বোঝার জন্য, Turbolinks সম্পর্কে কিছু জ্ঞান থাকা অপরিহার্য। আপনি এখানে এবং এখানে এটি সম্পর্কে আরও পড়তে পারেন৷

Introducing Turbo

Turbo হল কম জাভাস্ক্রিপ্ট সহ আধুনিক এবং দ্রুত ওয়েব অ্যাপ তৈরি করার জন্য বেশ কিছু কৌশলের একটি সংগ্রহ। এটি সার্ভারকে সরাসরি ব্রাউজারে HTML আকারে বিতরণ করা সমস্ত যুক্তির সাথে মোকাবিলা করার অনুমতি দিয়ে তা করে। পরিবর্তে, ব্রাউজারের একমাত্র দায়িত্ব হল সাধারণ এইচটিএমএল প্রক্রিয়া করা।

এটি করার জন্য, টার্বো নিজেকে চারটি প্রধান অংশে বিভক্ত করে:

• টার্বো ড্রাইভ , টার্বোর হৃদয়, আপনার লিঙ্ক এবং ফর্মগুলিতে সমস্ত ক্লিকের স্বয়ংক্রিয় বাধাদানের মাধ্যমে সম্পূর্ণ পৃষ্ঠা পুনরায় লোড হওয়া এড়িয়ে যায়, ব্রাউজারকে এটিকে কল করা থেকে বাধা দেয়, ইতিহাস API এর মাধ্যমে URL পরিবর্তন করে, Ajax এর মাধ্যমে পর্দার পিছনে পৃষ্ঠাটিকে অনুরোধ করে এবং প্রতিক্রিয়া প্রদান করে যথাযথভাবে।
• টার্বো ফ্রেম ফ্রন্ট-এন্ড devs যেভাবে ফ্রেমের সাথে স্বাধীনভাবে পৃষ্ঠার উপসেটগুলিকে চিকিত্সা করার জন্য মোকাবেলা করেছিল তা নতুন করে উদ্ভাবনের মাধ্যমে পৃষ্ঠা উপসেট/ফ্রেমের সাথে ডিল করে। এটি পৃথক স্কোপ এবং অলস লোড ক্ষমতা সহ প্রসঙ্গগুলির স্বাধীন সেটগুলিতে পৃষ্ঠাগুলিকে পচিয়ে দেয়৷
• টার্বো স্ট্রীম সাধারণ আংশিক পৃষ্ঠা আপডেটগুলিকে CRUD কন্টেইনার ট্যাগগুলির একটি সাধারণ সেট সহ ওয়েব সকেটগুলিতে async ডেলিভারির মাধ্যমে প্রতিস্থাপন করতে সহায়তা করে। তাদের সাথে, আপনি একই ওয়েব সকেটের মাধ্যমে এইচটিএমএল টুকরা পাঠাতে পারেন এবং পৃষ্ঠাটিকে UI বুঝতে এবং পুনরায় প্রক্রিয়া করতে পারেন৷
• টার্বো নেটিভ আপনি যদি iOS/Android-এ নেটিভ যাচ্ছেন তাহলে নেটিভ শেলগুলির জন্য এম্বেড করা ওয়েব অ্যাপে Turbo-এর সাথে মোকাবিলা করার জন্য সমস্ত প্রয়োজনীয় টুলিং প্রদান করে৷

প্রকল্প সেটআপ

গতি বাড়াতে সাহায্য করার জন্য, আমি আপনাকে স্টাইলিংয়ের জন্য বুটস্ট্র্যাপ সহ একটি স্ক্যাফোল্ডেড পোস্ট ফর্ম-ফ্লো সহ ব্যবহার করার জন্য প্রস্তুত রেল অ্যাপ প্রকল্প প্রদান করার সিদ্ধান্ত নিয়েছি।

এটি আপনাকে জিনিসগুলি সেট আপ করার সময় হারাতে বাধা দেবে, সেইসাথে আপনাকে Turbolinks স্বয়ংক্রিয়ভাবে যোগ করা একটি কাজের প্রকল্প দেবে। আপনার যদি ইতিমধ্যেই নিজের একটি প্রকল্প থাকে, তাহলে সেটাও ঠিক আছে; আপনি এখনও নিবন্ধটি অনুসরণ করতে সক্ষম হবেন।

আপনি rails সহ একটি নতুন ভারা রেল অ্যাপ তৈরি করতে পারেন আদেশ৷

আপনি এখানে সংগ্রহস্থলের GitHub লিঙ্কটি খুঁজে পেতে পারেন। স্থানীয়ভাবে এটি ক্লোন করা নিশ্চিত করুন এবং bundle install কমান্ডটি চালান সমস্ত রেল নির্ভরতা ইনস্টল করতে।

সবকিছু সেট হয়ে গেলে, rails s এর মাধ্যমে Rails সার্ভার শুরু করুন কমান্ড দিন এবং /posts চেক করুন URI, নীচে দেখানো হিসাবে:

রেলগুলিতে CRUD পোস্টগুলি

টার্বোলিঙ্কের বৈশিষ্ট্যগুলি কার্যকরভাবে পরীক্ষা করতে, নতুন পোস্ট তৈরি করতে বা একটি আইটেম প্রদর্শন করতে লিঙ্কগুলির মাধ্যমে নেভিগেট করুন। আপনি দেখতে পাবেন যে পৃষ্ঠা পুনরায় লোড না করেই URL পরিবর্তন হয়৷

মাইগ্রেশন ধাপ

সঠিক নোড প্যাকেজ ইনস্টলেশন দিয়ে শুরু করা যাক। যেহেতু আপনার আর turbolinks দরকার নেই , আমরা এটিকে আমাদের নোড তালিকা থেকে মুছে ফেলতে পারি এবং টার্বো-রেল নির্ভরতা যোগ করতে পারি, যেমনটি নীচের দুটি কমান্ডে দেখানো হয়েছে:

yarn remove turbolinks
yarn add @hotwired/turbo-rails

আপনি যদি Rails এর সাথে কাজ করেন তবে সবকিছু সঠিকভাবে ইনস্টল করা হয়েছে তা নিশ্চিত করার আরেকটি দুর্দান্ত উপায় হল নিম্নলিখিত কমান্ডটি চালানো:

rails turbo:install

এটি npm এর মাধ্যমে Turbo ইনস্টল করবে যদি Webpacker অ্যাপ্লিকেশনটিতে ইনস্টল করা থাকে, যা এটি। আপনি যদি কিছু মিস করেন তবে এই কমান্ডটি আপনার প্রকল্প থেকে সমস্ত Turbolinks পুরানো নির্ভরতাগুলি সরিয়ে দেওয়ার চেষ্টা করে৷

তারপর, app/javascript/packs/application.js খুলুন ফাইল করুন এবং কোডের নিম্নলিখিত লাইনগুলি সনাক্ত করুন:

import Turbolinks from "turbolinks";

Turbolinks.start();

মনে রাখবেন যে আমদানিগুলি আপনার Rails অ্যাপের সংস্করণের উপর নির্ভর করে সামান্য পরিবর্তিত হতে পারে (পুরানো সংস্করণগুলি require ব্যবহৃত হয় import এর পরিবর্তে ) তবুও, প্রক্রিয়া উভয়ের জন্য একই।

তারপরে, তাদের প্রতিস্থাপিত করুন নিজ নিজ দিয়ে:

import "@hotwired/turbo-rails";

হ্যাঁ, শুধু একটি একক আমদানি; ম্যানুয়ালি কিছু শুরু করার দরকার নেই। Turbo উদাহরণ স্বয়ংক্রিয়ভাবে window.Turbo-এ বরাদ্দ করা হয় আমদানির উপর বস্তু, যা পরিচালনা করা সহজ।

এটি পরীক্ষা করে দেখতে এবং দেখতে যে আমরা কেবল টার্বো খুঁজছি এবং Turbolinks নয়, ফাইলের শেষে নিম্নলিখিত কোড স্নিপেটটি যোগ করা যাক:

$(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-এ সমস্ত আমদানি করা সম্পদ স্বয়ংক্রিয়ভাবে ট্র্যাক করার অনুমতি দেওয়ার জন্য এটি গুরুত্বপূর্ণ হতে চলেছে ট্যাগ করুন এবং সেগুলি পরিবর্তন করার ক্ষেত্রে তাদের পুনরায় লোড করতে ভুলবেন না। এটি সমস্ত ফাইলের ক্ষেত্রে প্রযোজ্য, আপনার সেখানে যোগ করা সমস্ত স্ক্রিপ্ট এবং শৈলী সহ৷

টার্বো বৈশিষ্ট্য অন্বেষণ

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

চলুন 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-কে এই নির্দিষ্ট লিঙ্কটি ক্লিক করার সময় তা না দেখতে বলা।

আপনি যদি আপনার অ্যাপ্লিকেশনটি পুনরায় লোড করেন এবং "নতুন পোস্ট" বোতামে ক্লিক করেন, আপনি দেখতে পাবেন যে পৃষ্ঠাটি এখন সম্পূর্ণরূপে পুনরায় লোড হচ্ছে যেমন এটি সাধারণত সাধারণ অ্যাপে হয়৷

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 যোগ করা হয় প্রতিটি পোস্ট কন্ট্রোলার আপডেটযোগ্য অ্যাকশনে (POST, PUT, ইত্যাদি) এবং এটিকে তার মান হিসাবে আনপ্রসেসযোগ্য সত্তা অবজেক্ট গ্রহণ করে।

নীচে, আপনি 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 এই নির্দিষ্ট ফ্রেমে অনুরোধ এবং প্রতিক্রিয়া সংযুক্ত করতে পারে।

এটি পরীক্ষা করার জন্য, আপনাকে প্রথমে আপনার _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>

এই কাস্টম এইচটিএমএল উপাদানটি হল কিভাবে টার্বো ফ্রেমকে সম্পূর্ণ-পৃষ্ঠা-ভিত্তিক ক্রিয়া থেকে আলাদা করে।

প্রগতি বার

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

Turbo ইতিমধ্যেই পৃষ্ঠার শীর্ষে একটি অন্তর্নির্মিত CSS-ভিত্তিক অগ্রগতি বার সরবরাহ করে, যা বুটস্ট্র্যাপ এবং মেটেরিয়াল ডিজাইনের মতো প্রধান লাইব্রেরিগুলির দ্বারা প্রদত্ত বারের মতো।

এটি শুধুমাত্র তখনই প্রদর্শনের জন্য সেট করা হয় যখন অনুরোধগুলি প্রক্রিয়া করতে 500 ms-এর বেশি সময় নেয়, যা আমাদের পরীক্ষার প্রকল্পের জন্য যথেষ্ট নয়৷

আপনি যদি এটির স্টাইল পরিবর্তন করতে বা এমনকি এটিকে সম্পূর্ণরূপে সরিয়ে দিতে ইচ্ছুক হন, তাহলে আপনি .turbo-progress-bar এর সাথে খেলতে পারেন CSS ক্লাস, নীচে দেখানো হিসাবে:

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

এটি পরীক্ষা করার জন্য, আপনাকে application.js-এ প্রগ্রেস বার বিলম্ব কমাতে হবে নিম্নলিখিত কোড সহ ফাইল:

window.Turbo.setProgressBarDelay(1);

প্রদত্ত সময় মিলিসেকেন্ডে। নীচে, আপনি অগ্রগতি বারের জন্য আপডেট করা শৈলী উপস্থাপনা খুঁজে পেতে পারেন৷

আপডেট করা অগ্রগতি বার প্রদর্শন করা হচ্ছে

র্যাপিং আপ

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

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

যদি আপনার অ্যাপটি ডিভাইস ব্যবহার করে থাকে, উদাহরণস্বরূপ, সম্ভাবনা হল আপনার কিছু অভিযোজন প্রয়োজন। সৌভাগ্যবশত, Turbo টিম এই বিষয়ে একটি দুর্দান্ত টিউটোরিয়াল প্রদান করেছে যাতে Turbo-এর সাথে Devise-এর আশেপাশের ছোটখাটো বিষয়ে সাহায্য করা যায়।