जावास्क्रिप्ट-छिड़काव रेल अनुप्रयोग

जब पृष्ठ का एक बड़ा हिस्सा कैश किया जाता है तो रेल का टुकड़ा कैशिंग अधिक गति उत्पन्न करता है। बहुत अधिक गतिशील या उपयोगकर्ता-विशिष्ट सामग्री वाले पृष्ठों के लिए यह अधिक कठिन है। एक समाधान "जावास्क्रिप्ट स्प्रिंकल्स" का उपयोग करना है, जो कि 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. चूंकि अतिरिक्त अनुरोध जावास्क्रिप्ट के माध्यम से किया जाता है, प्रदर्शन को और बेहतर बनाने के लिए पूरे पृष्ठ को सीडीएन पर एज-कैश किया जा सकता है।

सफाई

हम पहले अपने पृष्ठों से गतिशील सामग्री को निकालेंगे ताकि उन्हें कैश करना आसान हो जाए। हम @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 को सीधे अपने पेज में जावास्क्रिप्ट के माध्यम से इंजेक्ट करें।

अपठित प्रतिसाद दिखा रहा है

जावास्क्रिप्ट कोड में अपठित प्रतिक्रियाओं के समापन बिंदु के लिए URL को हार्डकोड करने के बजाय, हम इसे दृश्य में डेटा विशेषता में जोड़ देंगे, ताकि हम इसे बाद में संदर्भित कर सकें।

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

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

// 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 का उपयोग करता है, हम turbolinks:load को सुनकर पेज के लोड होने की प्रतीक्षा करेंगे। प्रतिस्पर्धा। जब वह ईवेंट सक्रिय होता है, तो हम उसकी आईडी का उपयोग करके प्रतिक्रिया बॉक्स पाएंगे।

फिर हम जाँचेंगे कि क्या प्रतिक्रिया तत्व में loaded . है डेटा विशेषता। हम बाद में अपठित प्रतिक्रियाओं को अपडेट करने के बाद इस विशेषता को सेट करेंगे, इसलिए यदि ब्राउज़र के बैक बटन का उपयोग करके पृष्ठ को पुनः लोड किया जाता है तो हम कोई अतिरिक्त अनुरोध नहीं करते हैं।

पहले लोड पर, loaded विशेषता अभी तक सेट नहीं है, इसलिए हम अपने समापन बिंदु पर अनुरोध करना जारी रखेंगे। सफलता मिलने पर, हम दिए गए परिणाम में प्रत्येक लेख पर लूप करेंगे, प्रतिक्रिया के तत्व को उसकी आईडी से खोजेंगे, और उसमें हमारी "अपठित" CSS क्लास जोड़ेंगे।

छिड़काव!

फ़्रैगमेंट कैशिंग पुन:प्रयोज्य सामग्री और बाद में उपयोगकर्ता-विशिष्ट डायनामिक बिट्स जोड़ने के लिए अपने पृष्ठों पर जावास्क्रिप्ट को छिड़कने से अधिकांश महत्वपूर्ण सामग्री को सीधे कैशे से प्रस्तुत करके आपके ऐप का प्रारंभिक प्रतिक्रिया समय तेज़ हो सकता है। यद्यपि मुख्य सामग्री लोड होने के बाद एक अतिरिक्त अनुरोध करने और पृष्ठ को अपडेट करने में समय लगता है, गतिशील सामग्री को स्थगित करने से आपका ऐप अधिक तेज़ महसूस करेगा, भले ही पूर्ण अनुरोध में उपयोगकर्ता-विशिष्ट भागों सहित, सब कुछ की सेवा करने से अधिक समय लगता है। कैश।

अधिक विस्तृत सेटअप के लिए, स्टिमुलस की जाँच करना सुनिश्चित करें, एक जावास्क्रिप्ट लाइब्रेरी जो स्प्रिंकल्स पैटर्न को एक फ्रेमवर्क में लपेटती है जो आपके HTML दृश्यों को आपके जावास्क्रिप्ट से जोड़ता है।

हमें उम्मीद है कि आपको रेल एप्लिकेशन में जावास्क्रिप्ट स्प्रिंकल्स का यह परिचय पसंद आया होगा। यदि आप इस लेख, ब्लॉग या किसी अन्य विषय के बारे में कोई टिप्पणी करना चाहते हैं, तो कृपया हमें @AppSignal पर एक पंक्ति दें।