জাভাস্ক্রিপ্ট-ছিটিয়ে রেল অ্যাপ্লিকেশন

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

ফ্র্যাগমেন্ট ক্যাশিং

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

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

অপঠিত প্রতিক্রিয়া

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

যদি আমরা প্রতিটি নিবন্ধ একটি cache এ মোড়ানো ব্লক, আমরা অপঠিত হিসাবে ভুল প্রতিক্রিয়া চিহ্নিত করার ঝুঁকি চালাই। যখন একজন ব্যবহারকারী সূচী পৃষ্ঠার অনুরোধ করে, তখন প্রতিক্রিয়া ক্যাশে করা হয়। যখন অন্য ব্যবহারকারী একই পৃষ্ঠায় পরবর্তীতে অনুরোধ করেন, তারা প্রথম ব্যবহারকারীর অপঠিত প্রতিক্রিয়া সহ ক্যাশে করা খণ্ডটি পাবেন৷

# app/views/articles/show.html.erb
<%= cache(@article) do %>
  <h1><%= @article.title %></h1>
 
  <%= simple_format(@article.content) %>
 
  <section id="responses">
    <h2>Responses</h2>
 
    <% @article.responses.each do |response| %>
      <div class="<%= response.read_by?(@current_user) ? 'read' : 'unread' %>">
        <%= time_tag(response.created_at) %>
        <strong><%= response.name %></strong>: <%= response.content %>
      </div>
    <% end %>
  </section>
<% end %>

এটি সমাধান করার একটি উপায় হল [@article, @current_user] ব্যবহার করে ক্যাশে কীতে বর্তমানে সাইন ইন করা ব্যবহারকারীকে যোগ করা। শুধু @article এর পরিবর্তে আর্গুমেন্টটি cache এ চলে গেছে সহায়ক পদ্ধতি।

# app/views/articles/show.html.erb
<%= cache([@article, @current_user]) do %>
  <h1><%= @article.title %></h1>
 
  # ...
<% end %>

এটি নিশ্চিত করে যে প্রতিটি ব্যবহারকারী তাদের নিজস্ব অপঠিত প্রতিক্রিয়াগুলি দেখতে পাচ্ছেন, তবে খণ্ডগুলি ক্যাশ করার বেশিরভাগ গতিকে অস্বীকার করে, কারণ নিবন্ধের খণ্ডগুলি এখন প্রতিটি ব্যবহারকারীর জন্য আলাদাভাবে ক্যাশে করা হয়েছে৷

জাভাস্ক্রিপ্ট ছিটানো

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

1. পৃষ্ঠাটি একবার ক্যাশে করা যেতে পারে এবং অননুমোদিত অতিথিদের জন্য আবার ব্যবহার করা যেতে পারে, সেইসাথে অন্যান্য ব্যবহারকারীদের জন্য আলাদাভাবে ক্যাশে টুকরো প্রতিটি ব্যবহারকারীর জন্য ছাড়াই৷
2. সবচেয়ে গুরুত্বপূর্ণ বিষয়বস্তু দ্রুততম প্রতিক্রিয়া সময়ের জন্য প্রথমে লোড করা হয় এবং অপঠিত সংখ্যার মতো সেকেন্ডারি বৈশিষ্ট্যগুলি পরে লোড করা হয়৷
3. যেহেতু অতিরিক্ত অনুরোধ জাভাস্ক্রিপ্টের মাধ্যমে করা হয়, তাই কর্মক্ষমতা আরও উন্নত করতে পুরো পৃষ্ঠাটি একটি CDN-এ এজ-ক্যাশ করা যেতে পারে।

পরিষ্কার

আমরা প্রথমে আমাদের পৃষ্ঠাগুলি থেকে ডায়নামিক বিষয়বস্তু সরিয়ে ফেলব যাতে ক্যাশে করা সহজ হয়৷ আমরা @current_user সরিয়ে দেব cache ক্যাশে কী থেকে আবার ব্লক করুন, তাই প্রতিটি ব্যবহারকারীর জন্য সেগুলি আর ক্যাশে করা হয় না। তারপর, আমরা ক্যোয়ারীটি সরিয়ে দেব যা কন্ট্রোলার থেকে অপঠিত গণনাগুলি খুঁজে পায় এবং ভিউ থেকে CSS ক্লাসের নামগুলি সরিয়ে ফেলব৷

# app/views/articles/show.html.erb
<%= cache(@article) do %>
  <h1><%= @article.title %></h1>
 
  <%= simple_format(@article.content) %>
 
  <section id="responses">
    <h2>Responses</h2>
 
    <% @article.responses.each do |response| %>
      <div data-response-id="<%= response.id %>">
        <%= time_tag(response.updated_at) %>
        <strong><%= response.name %></strong>: <%= response.content %>
      </div>
    <% end %>
  </section>
<% end %>

আমাদের কাছে একটি সাধারণ পৃষ্ঠা রয়েছে যা ক্যাশে করা সহজ কিন্তু আমাদের অপঠিত প্রতিক্রিয়া বৈশিষ্ট্যের অভাব রয়েছে৷ এটা আবার যোগ করা যাক।

শেষবিন্দু

ব্যবহারকারীর অপঠিত প্রতিক্রিয়াগুলি খুঁজে পেতে আমরা প্রথমে একটি শেষ পয়েন্ট তৈরি করব৷ রেন্ডার হওয়ার পরে আমরা পৃষ্ঠাটির বর্তমান অবস্থা পরিবর্তন করতে চাই, তাই আমরা এটি থেকে JSON-কে অনুরোধ করব৷

# app/controllers/unread_responses_controller.rb
class UnreadResponsesController < ApplicationController
  def index
    @article = Article.find(params[:article_id])
    @responses = @article.unread_responses_for(@current_user)
  end
end

# app/views/unread_responses/index.json.jbuilder
json.array! @responses do |response|
  json.extract! response, :id
end

# config/routes.rb
Rails.application.routes.draw do
  resources :articles do
    resources :responses
    resources :unread_responses
  end
end

আমাদের শেষ পয়েন্ট অপঠিত প্রতিক্রিয়া আইডিগুলির একটি তালিকা তৈরি করবে৷

# GET /articles/1/unread_responses.json
[{"id":1},{"id":2},{"id":3}]

টিপ :সার্ভারে প্রি-রেন্ডার করা যেতে পারে এমন একটি ডায়নামিক কম্পোনেন্ট লোড করার সময়, সার্ভার সাইডে HTML রেন্ডারিং করা সাধারণত দ্রুততর হয়, তারপর জাভাস্ক্রিপ্টের মাধ্যমে সরাসরি আপনার পৃষ্ঠায় HTML ইনজেক্ট করুন।

অপঠিত প্রতিক্রিয়া দেখানো হচ্ছে

জাভাস্ক্রিপ্ট কোডে অপঠিত প্রতিক্রিয়ার এন্ডপয়েন্টের জন্য ইউআরএল হার্ডকোড করার পরিবর্তে, আমরা এটিকে ভিউতে একটি ডেটা অ্যাট্রিবিউটে যুক্ত করব, যাতে আমরা পরে এটি উল্লেখ করতে পারি।

# app/views/articles/show.html.erb
<section id="responses" data-url="<%= article_unread_responses_path(@article, json: true) %>">
  # ...
</section>

পৃষ্ঠাটি লোড করা শেষ হওয়ার পরে, আমরা আমাদের নতুন এন্ডপয়েন্ট থেকে অপঠিত প্রতিক্রিয়া আইডিগুলির জন্য অনুরোধ করব৷ তারপরে আমরা সেই তালিকার ডেটা ব্যবহার করে প্রতিটি নিবন্ধে একটি CSS ক্লাস যোগ করে অপঠিত হিসাবে চিহ্নিত করব।

// app/assets/javascripts/application.js
document.addEventListener("turbolinks:load", function () {
  responses = document.getElementById("responses");
 
  if (!responses.dataset.loaded) {
    Rails.ajax({
      url: responses.dataset.url,
      type: "GET",
      success: function (data) {
        responses.dataset.loaded = true;
 
        data.forEach(function (response) {
          element = document.querySelector(
            "[data-response-id='" + response.id + "']"
          );
          element.classList.add("unread");
        });
      },
    });
  }
});

যেহেতু আমাদের রেল অ্যাপ্লিকেশন টার্বোলিঙ্কস ব্যবহার করে, তাই আমরা turbolinks:load শুনে পৃষ্ঠাটি লোড হওয়ার জন্য অপেক্ষা করব ঘটনা যখন সেই ইভেন্টটি চালু হয়, আমরা এর আইডি ব্যবহার করে প্রতিক্রিয়া বাক্সটি খুঁজে পাব।

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

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

ছিটানো!

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

আরও বিস্তৃত সেটআপের জন্য, স্টিমুলাস চেক করতে ভুলবেন না, একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা স্প্রিঙ্কল প্যাটার্নকে একটি ফ্রেমওয়ার্কের মধ্যে মোড়ানো যা আপনার HTML ভিউগুলিকে আপনার জাভাস্ক্রিপ্টের সাথে সংযুক্ত করে।

আমরা আশা করি আপনি Rails অ্যাপ্লিকেশনে জাভাস্ক্রিপ্ট স্প্রিঙ্কলের এই ভূমিকাটি পছন্দ করেছেন। এই নিবন্ধ, ব্লগ বা অন্য কোন বিষয়ের বিষয়ে আপনার যদি কোনো মন্তব্য থাকে, তাহলে অনুগ্রহ করে আমাদেরকে @AppSignal-এ একটি লাইন দিন।