ঘোষণামূলক আংশিক আপডেট

Barry Pollard

Noam Rosenthal

প্রকাশিত: ১৯ মে, ২০২৬

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

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

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

ক্রোম টিম এই সমস্যাটি বিবেচনা করছে এবং ‘ডিক্লারেটিভ পার্শিয়াল আপডেট’ নামে ওয়েব প্ল্যাটফর্মে নতুন সংযোজন তৈরি করছে।

দুটি নতুন এপিআই সেট এইচটিএমএলকে আরও অ-রৈখিক পদ্ধতিতে উপস্থাপন করা সহজ করে তোলে, যা এইচটিএমএল ডকুমেন্টের মধ্যেই এলোমেলোভাবে অথবা নতুন জাভাস্ক্রিপ্ট এপিআই ব্যবহার করে বিদ্যমান ডকুমেন্টে ডায়নামিকভাবে এইচটিএমএল সন্নিবেশ করার সহজ উপায়ের মাধ্যমে করা যায়। chrome://flags/#enable-experimental-web-platform-features ফ্ল্যাগ ব্যবহার করে ক্রোম ১৪৮ থেকে এগুলো ডেভেলপারদের পরীক্ষার জন্য প্রস্তুত। পলিফিলও উপলব্ধ রয়েছে, যা আপনাকে এই নতুন এপিআইগুলো অবিলম্বে ব্যবহার করতে দেবে, এমনকি সেইসব ব্রাউজারেও যা এখনও এগুলো সমর্থন করে না।

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

অচল স্ট্রিমিং

প্রথম ধাপের পরিবর্তনগুলো হলো <template> HTML এলিমেন্ট এবং প্রসেসিং নির্দেশনার প্লেসহোল্ডার ব্যবহার করে নতুন আউট-অফ-অর্ডার স্ট্রিমিং এপিআই । উদাহরণস্বরূপ:

<div>
  <?marker name="placeholder">
</div>

...

<template for="placeholder">
  Here is some <em>HTML content</em>!
</template>

প্রসেসিং নির্দেশাবলী অনেক দিন ধরেই XML-এ বিদ্যমান ছিল, কিন্তু HTML-এ সেগুলোকে কমেন্ট হিসেবে গণ্য করা হতো এবং উপেক্ষা করা হতো। এই নতুন API সেই অবস্থার পরিবর্তন করে এবং HTML-এ প্রসেসিং নির্দেশাবলী নিয়ে আসে। ব্রাউজার যখন <?marker name="placeholder"> প্রসেসিং নির্দেশাবলী দেখে, তখন আগের মতোই সঙ্গে সঙ্গে কোনো কাজ করে না, কিন্তু পরে সেগুলোকে রেফারেন্স হিসেবে ব্যবহার করা যায়।

<template> এলিমেন্টটি name অ্যাট্রিবিউটের মাধ্যমে সংশ্লিষ্ট প্রসেসিং নির্দেশাবলী খুঁজে বের করে এবং কন্টেন্ট প্রতিস্থাপন করে। এক্ষেত্রে, পার্স করার পর DOM-টি দেখতে এইরকম হয়:

<div>
  Here is some <em>HTML content</em>!
</div>

প্রতিস্থাপনের জন্য <?marker> অ্যাট্রিবিউটের পাশাপাশি, <?start> এবং <?end> রেঞ্জ মার্কারও রয়েছে, যা টেমপ্লেট প্রক্রিয়াকরণের আগে অস্থায়ী প্লেসহোল্ডার কন্টেন্ট দেখানোর সুযোগ দেয়:

<div>
  <?start name="another-placeholder">
  Loading…
  <?end>
</div>

...

<template for="another-placeholder">
  Here is some <em>HTML content</em>!
</template>

এক্ষেত্রে, <template> দেখা না যাওয়া পর্যন্ত Loading… দেখানো হয় এবং এরপর তা নতুন বিষয়বস্তু দ্বারা প্রতিস্থাপিত হয়।

একাধিকবার আপডেটের সুযোগ দেওয়ার জন্য টেমপ্লেটে প্রসেসিং নির্দেশাবলী অন্তর্ভুক্ত করাও সম্ভব:

<ul id="results">
  <?start name="results">
  Loading…
  <?end>
</ul>

...

<template for="results">
  <li>Result One</li>
  <?marker name="results">
</template>
...

<template for="results">
  <li>Result Two</li>
  <?marker name="results">
</template>
...

পার্স করার পর এর ফলে নিম্নলিখিত HTML পাওয়া যায়:

<ul id="results">
  <li>Result One</li>
  <li>Result Two</li>
  <?marker name="results">
</ul>

শেষে চূড়ান্ত প্রক্রিয়াকরণের নির্দেশাবলী রাখা হয়েছে, যাতে পরবর্তীতে ডকুমেন্টে আরও কোনো <template for="results"> যোগ করা হলে তা কাজে লাগে।

ডেমো

এই ভিডিওতে, স্ট্রিমিং এইচটিএমএল ব্যবহার করে একটি সাধারণ ফটো অ্যালবাম অ্যাপ্লিকেশন তৈরি করা হয়েছে:

প্রাথমিক লেআউটের পরে স্ট্যাটাস এবং ছবি উভয়ই এইচটিএমএল-এ স্ট্রিম করা হয়।

ব্যবহারের ক্ষেত্র

স্ট্রিমিং এইচটিএমএল-এর সাথে যুক্ত হলে এই আউট-অফ-অর্ডার প্যাচিং এইচটিএমএল-এর অনেক ব্যবহার রয়েছে:

• আইল্যান্ড আর্কিটেকচার হলো অ্যাস্ট্রোর মতো ফ্রেমওয়ার্কগুলোর দ্বারা জনপ্রিয় হওয়া একটি প্রচলিত প্যাটার্ন, যেখানে স্ট্যাটিক এইচটিএমএল-এর উপরে কম্পোনেন্টগুলো স্বাধীনভাবে হাইড্রেট করা হয়। <template for> এপিআই-এর মাধ্যমে সরাসরি এইচটিএমএল-এ একই পদ্ধতিতে স্ট্যাটিক কন্টেন্ট পরিচালনা করা যায়। জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলোও আরও বেশি ইন্টারেক্টিভ আইল্যান্ড তৈরি করতে বা কম্পোনেন্টগুলো পরিচালনা করতে এটি ব্যবহার করতে পারে।
• কন্টেন্ট প্রস্তুত হলেই ডেলিভারি করুন। এই আইল্যান্ড আর্কিটেকচারের কল্যাণে, অতিরিক্ত প্রসেসিংয়ের প্রয়োজন এমন কন্টেন্টের (যেমন, ডাটাবেস লুকআপ) জন্য আটকে না রেখে, প্রস্তুত হলেই তা স্ট্রিম করা যায়। যদিও অনেক প্ল্যাটফর্ম এইচটিএমএল (HTML) স্ট্রিমিংয়ের সুযোগ দেয়, কিন্তু এইচটিএমএল-এর ইন-অর্ডার প্রকৃতির কারণে প্রায়শই কন্টেন্ট আটকে রাখা হয়, অথবা জটিল জাভাস্ক্রিপ্ট ডোম (DOM) ম্যানিপুলেশনের আশ্রয় নিতে হয়। এখন আপনি অপেক্ষারত অবস্থাতেই স্ট্যাটিক কন্টেন্ট ডেলিভারি করতে পারেন এবং তারপর এইচটিএমএল স্ট্রিমের শেষে আরও ব্যয়বহুল কন্টেন্ট যুক্ত করতে পারেন।
• পেজ লোড পারফরম্যান্সের জন্য এইচটিএমএল (HTML) সর্বোত্তম ক্রমে উপস্থাপন করা যেতে পারে। এটিকে আরও এক ধাপ এগিয়ে নিয়ে, এইচটিএমএল প্রস্তুত হয়ে যাওয়ার পরেও এর ক্রম পরিবর্তন করা যায়। উদাহরণস্বরূপ, মেগা মেনু হলো একটি সাধারণ নেভিগেশন ফিচার, যাতে এমন অনেক এইচটিএমএল কোড থাকে যা পেজটি ইন্টারেক্টিভ না হওয়া পর্যন্ত ব্যবহারকারী দেখতে পান না। প্রাথমিক পেজ লোডের জন্য প্রয়োজনীয় অধিক গুরুত্বপূর্ণ এইচটিএমএল-কে অগ্রাধিকার দিতে, এইচটিএমএল ডকুমেন্টের শেষের দিকে এই বিশাল এইচটিএমএল অংশটি উপস্থাপন করা যেতে পারে। এইচটিএমএল-এর ক্ষেত্রে ক্রম আর কোনো বাধা নয়।

এগুলো হলো এর কয়েকটি ব্যবহার মাত্র, এবং ডেভেলপাররা এই নতুন এপিআইটি কী কাজে ব্যবহার করেন তা দেখাটা বেশ রোমাঞ্চকর।

সীমাবদ্ধতা এবং সূক্ষ্মতা

এপিআই-টিতে কিছু সীমাবদ্ধতা ও সূক্ষ্ম বিষয় রয়েছে, যেগুলো সম্পর্কে সচেতন থাকা প্রয়োজন:

• নিরাপত্তাজনিত কারণে <template for> শুধুমাত্র একই প্যারেন্ট এলিমেন্টের মধ্যেকার প্রসেসিং নির্দেশাবলী আপডেট করতে পারে। সরাসরি <body> এলিমেন্টে <template for> যোগ করলে এটি পুরো ডকুমেন্ট ( <head> সহ) অ্যাক্সেস করতে পারে।
• <?end> প্রসেসিং নির্দেশনাটি ঐচ্ছিক এবং এটি অনুপস্থিত থাকলে, <?start> এলিমেন্ট এবং ধারণকারী এলিমেন্টের শেষের মধ্যবর্তী বিষয়বস্তু প্রতিস্থাপিত হবে।
• কোনো <template for> স্ট্রিমিং শুরু হওয়ার পরে প্রসেসিং নির্দেশাবলী স্থানান্তর করলে অপ্রত্যাশিত পরিণতি হতে পারে, যার ফলে নতুন কন্টেন্ট পুরানো অবস্থানেও স্ট্রিমিং হতে থাকে।
• মনে রাখবেন যে, setHTML বা innerHTML মতো মেথড ব্যবহার করে ডাইনামিকভাবে <template for> যুক্ত করার সময়, পার্স করার পর টেমপ্লেটটির "প্যারেন্ট" একটি মধ্যবর্তী ডকুমেন্ট ফ্র্যাগমেন্ট হয়। এর মানে হলো, এই মেথডগুলো ব্যবহার করে HTML যুক্ত করলে তা বিদ্যমান DOM-কে পরিবর্তন করতে পারে না এবং প্যাচিংটি ফ্র্যাগমেন্টের ভেতরেই "ইন প্লেস" ঘটে। তবে, streamHTMLUnsafe মতো মেথড ব্যবহার করে স্ট্রিমিং করার সময় (যা আমরা শীঘ্রই আলোচনা করব!), কোনো মধ্যবর্তী ফ্র্যাগমেন্ট থাকে না, ফলে টেমপ্লেটগুলো বিদ্যমান কন্টেন্টকে প্রতিস্থাপন করতে পারে।

ভবিষ্যতের সম্ভাব্য সংযোজন

ভবিষ্যতে যোগ করার জন্য বিবেচনাধীন কিছু সম্ভাব্য সংযোজন হলো:

• ক্লায়েন্ট সাইডে অন্তর্ভুক্তিসমূহ। উদাহরণস্বরূপ, <template for="footer" patchsrc="/partials/footer.html"> ।
• ব্যাচিং। ক্লায়েন্ট-সাইডে, একাধিক আপডেট একই সময়ে সম্পন্ন করা নিশ্চিত করতে ব্যাচিং পরিচালনার জন্য ফ্র্যাগমেন্ট ইনক্লুডগুলোকেও সম্প্রসারিত করা যেতে পারে।
• যেসব কন্টেন্ট পরিবর্তন হবে না, তা ওভাররাইট হওয়া থেকে প্রতিরোধ করা। এটি একটি কন্টেন্ট রিভিশন নম্বর বা ভার্সনিং-এর মাধ্যমে করা যেতে পারে। এর ফলে কন্টেন্ট রিসেট না হয়ে, রাউট পরিবর্তন বা অন্যান্য আপডেটের মধ্যে স্টেট বজায় থাকবে।
• প্যাচিং করার সময় স্যানিটাইজ করা। উদাহরণস্বরূপ, <template for=icon safe><svg id="from-untrusted-source">...</svg></template>

পলিফিল

ক্রোম টিম একটি template-for-polyfill প্রকাশ করেছে যা এনপিএম-এ উপলব্ধ , যাতে সাইটগুলি অন্যান্য ব্রাউজারে এটি আসার আগেই এই নতুন কার্যকারিতাটি অবিলম্বে ব্যবহার করতে পারে।

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

নবায়নকৃত এইচটিএমএল সন্নিবেশ এবং স্ট্রিমিং পদ্ধতি

সব কন্টেন্ট HTML-এ সরবরাহ করা যায় না। এই ক্ষেত্রে Chrome-এর কাজের দ্বিতীয় অংশটি হলো JavaScript-এর মাধ্যমে কন্টেন্ট আপডেট করা আরও সহজ করে তোলা।

জাভাস্ক্রিপ্ট ব্যবহার করে বিদ্যমান কোনো ডকুমেন্টে ডায়নামিকভাবে HTML যুক্ত করার একাধিক উপায় ইতিমধ্যেই রয়েছে:

• setHTML
• setHTMLUnsafe
• innerHTML এবং outerHTML সেটার
• createContextualFragment
• insertAdjacentHTML

তবে, এগুলোর প্রত্যেকটি কিছুটা ভিন্ন উপায়ে কাজ করে এবং এর মধ্যে এমন কিছু সূক্ষ্মতা ও পার্থক্য রয়েছে যা ডেভেলপাররা সবসময় বিবেচনা নাও করতে পারেন:

• নতুন কন্টেন্টটি কি ওভাররাইট করে নাকি যুক্ত করে?
• উদাহরণস্বরূপ, তারা কি <script> ট্যাগ এস্কেপ করার মাধ্যমে সম্ভাব্য বিপজ্জনক HTML-কে পরিশুদ্ধ করে?
• তা না হলে, <script> কি চালানো উচিত?
• তারা TrustedTypes-এর সাথে কীভাবে কাজ করে?

খুব কম ডেভেলপারই সততার সাথে ওই এপিআইগুলো দেখে সেগুলোর প্রত্যেকটির জন্য ওই প্রশ্নগুলোর উত্তর আত্মবিশ্বাসের সাথে দিতে পারবেন।

এর একটি বড় সীমাবদ্ধতা হলো, এগুলো কেবল আগে থেকে জানা সম্পূর্ণ HTML সেটের জন্যই ব্যবহার করা যায়, যখন HTML স্ট্রিম করার অনুমতি দেওয়া হয়। কার্যত, এর মানে হলো, কন্টেন্ট ঢোকানোর আগে আপনাকে পুরো কন্টেন্টটি ডাউনলোড করতে হবে, অথচ HTML-এর অন্যতম একটি শক্তিশালী দিকই হলো তাৎক্ষণিকভাবে কন্টেন্ট স্ট্রিম করে নেওয়ার ক্ষমতা। পেলোড ভাগ করে অথবা document.write মতো হ্যাকি ও অপ্রচলিত পদ্ধতি ব্যবহার করে সীমিতভাবে এর সমাধান করা যায়, কিন্তু সেগুলো নিজস্ব সমস্যা তৈরি করে।

স্ট্যাটিক এবং স্ট্রিমিং এপিআই-এর একটি নতুন সেট

ক্রোম বিদ্যমান setHTML এবং setHTMLUnsafe এর জন্য একগুচ্ছ নতুন এপিআই ও এক্সটেনশন প্রস্তাব করেছে, যা এই সমস্যাটির সমাধান করার পাশাপাশি স্ট্রিমিং কার্যকারিতাও চালু করেছে:

সেট বা প্রতিস্থাপন করার পদ্ধতির পাশাপাশি বিদ্যমান HTML-এর আগে বা পরে কন্টেন্ট সন্নিবেশ করার পদ্ধতিও রয়েছে। প্রতিটি পদ্ধতিরই স্ট্রিম সমতুল্য রয়েছে:

এর কিছু Unsafe সংস্করণও রয়েছে, যা নিয়ে আমরা শীঘ্রই আলোচনা করব। যদিও এগুলোর সংখ্যা অনেক বলে মনে হতে পারে (বিশেষ করে যখন আপনি Unsafe সমতুল্য সংস্করণগুলোও যোগ করেন), কিন্তু একটি সামঞ্জস্যপূর্ণ নামকরণের রীতি থাকায় পূর্বে উল্লিখিত সম্পর্কহীন মেথডগুলোর তুলনায় কোনটি কী কাজ করে তা আরও স্পষ্টভাবে বোঝা যায়।

স্ট্যাটিক সংস্করণগুলো DOM স্ট্রিং আর্গুমেন্ট হিসেবে নতুন HTML গ্রহণ করে, সাথে ঐচ্ছিক অপশনগুলোও থাকে:

const newHTML = "<p>This is a new paragraph</p>";
const contentElement = document.querySelector('#content-to-update');

contentElement.setHTML(newHTML);

স্ট্রিমিং সংস্করণগুলি Streams API-এর সাথে কাজ করে, যেমন getWriter() এর সাথে:

const contentElement = document.querySelector('#content-to-update');
const writer = contentElement.streamHTMLUnsafe().getWriter();

// Example stream of updating content
while (true) {
 await writer.write(`<p>${++i}</p>`);
 await new Promise((resolve) => setTimeout(resolve, 1000));
}

writer.close();

অথবা, বিকল্পভাবে একটি ফেচ রেসপন্স থেকে, পাইপ চেইন ব্যবহার করে:

const contentElement = document.querySelector('#content-to-update');

const response = await fetch('/api/content.html');

response.body
  .pipeThrough(new TextDecoderStream())
  .pipeTo(contentElement.streamHTMLUnsafe());

আমরা এমন একটি সুবিধাজনক পদ্ধতি যোগ করার পরিকল্পনা করছি, যার মাধ্যমে আপনি মধ্যবর্তী TextDecoderStream() ধাপটি ছাড়াই সরাসরি স্ট্রিম করতে পারবেন।

` options আর্গুমেন্টটি আপনাকে একটি কাস্টম sanitizer নির্দিষ্ট করার সুযোগ দেয়, যা ডিফল্টরূপে ` default অর্থাৎ ডিফল্ট স্যানিটাইজার কনফিগারেশন হিসেবে সেট করা থাকে। এটি নিম্নোক্তভাবে ব্যবহৃত হয়:

const newHTML = "<p>This is a new paragraph</p>";
const contentElement = document.querySelector('#content-to-update');

// Only allows basic formatting
const basicFormattingSanitzer = new Sanitizer({ elements: ["em", "i", "b", "strong"] });

contentElement.setHTML(newHTML, {sanitizer: basicFormattingSanitzer});

"অনিরাপদ" পদ্ধতি

এছাড়াও প্রতিটি এপিআই-এর "অনিরাপদ" সংস্করণ রয়েছে:

এই "অনিরাপদ" পদ্ধতিগুলো ডিফল্টরূপে স্যানিটাইজার বন্ধ করে দেয় (আপনি চাইলে একটি কাস্টম স্যানিটাইজার নির্দিষ্ট করতে পারেন) এবং একটি ঐচ্ছিক runScripts অপশনের মাধ্যমে স্ক্রিপ্ট চালানোর অনুমতি দেয় (যার ডিফল্ট মান false থাকে)।

setHTML মতো, setHTMLUnsafe একটি বিদ্যমান মেথড, কিন্তু স্ক্রিপ্ট এক্সিকিউশনের সাথে ব্যবহারের সুবিধার জন্য এতে runScripts অপশন প্যারামিটারটি যোগ করা হয়েছে:

const newHTML = `<p>This is a new paragraph</p>
                 <script src=script.js></script>`;
const contentElement = document.querySelector('#content-to-update');

contentElement.setHTMLUnsafe(newHTML, {runScripts: true});

মেথডটিতে "unsafe" শব্দটি ব্যবহারের উদ্দেশ্য হলো ডেভেলপারদের সম্ভাব্য ঝুঁকি এবং স্ক্রিপ্টগুলোকে কীভাবে পরিশুদ্ধ বা সীমাবদ্ধ করা যেতে পারে, সে বিষয়ে স্মরণ করিয়ে দেওয়া; এর মানে এই নয় যে এই মেথডগুলো ব্যবহার করা উচিত নয়।

এটি কতটা "অনিরাপদ" তা নির্ভর করে ইনপুটগুলো কতটা বিশ্বস্ত তার উপর। Unsafe স্ট্যাটিক মেথডগুলো html আর্গুমেন্ট হিসেবে DOM String বা TrustedHTML উভয়ের সাথেই কাজ করে এবং স্যানিটাইজার ব্যবহারেরও সুযোগ দেয়। যদিও runScript এর মূল উদ্দেশ্যই হলো স্ক্রিপ্ট ব্যবহারের অনুমতি দেওয়া, আর একারণেই ডিফল্টভাবে কোনো স্যানিটাইজার ব্যবহৃত হয় না।

ব্যবহারের ক্ষেত্র

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

ব্যবহারের ক্ষেত্রগুলোর মধ্যে রয়েছে:

• সিঙ্গেল পেজ অ্যাপে (Single Page Apps) বড় আকারের কন্টেন্ট আপডেটের ডাইনামিক স্ট্রিমিং। পূর্বে যেমন উল্লেখ করা হয়েছে, বর্তমান এসপিএ-গুলোর একটি বড় অসুবিধা হলো, এগুলো প্রাথমিক এইচটিএমএল (HTML) লোডের স্ট্রিমিং বৈশিষ্ট্য থেকে সুবিধা নিতে পারত না—এখন পর্যন্ত!
• এইচটিএমএল ফুটারের মতো সাধারণ কন্টেন্ট যুক্ত করা। জাভাস্ক্রিপ্ট এপিআই ব্যবহার করে আপনি পার্সিয়াল কন্টেন্ট নিয়ে এসে পেজে যুক্ত করতে পারেন, যা ক্যাশিংয়ের সুবিধা দেয় এবং প্রতিটি পেজ পাঠানোর সময় সেগুলোর পুনরাবৃত্তি করতে হয় না। তবে, এটি চালানোর জন্য জাভাস্ক্রিপ্টের উপর নির্ভরশীল হওয়ায়, এটি শুধুমাত্র সেইসব কন্টেন্টের জন্য ব্যবহার করা উচিত যা প্রাথমিক লোডের সময় দৃশ্যমান হবে না।

আবারও বলছি, এগুলো মাত্র কয়েকটি উদাহরণ এবং আপনারা কী উদ্ভাবন করেন তা দেখার জন্য আমরা অধীর আগ্রহে অপেক্ষা করছি!

সীমাবদ্ধতা এবং সূক্ষ্মতা

এই নতুন এপিআইগুলোতে কিছু সীমাবদ্ধতা ও সূক্ষ্ম বিষয়ও রয়েছে, যেগুলো সম্পর্কে সচেতন থাকা প্রয়োজন:

• ট্রাস্টেড টাইপস এপিআই-এর সাথে স্ট্রিমিং ইন্টিগ্রেশনের জন্য একটি নতুন createParserOptions মেথড ব্যবহার করতে হয়, যা যেকোনো এইচটিএমএল সেটিং অপারেশনে একটি স্যানিটাইজার ইনজেক্ট করার সুযোগ দেয়। ট্রাস্টেড টাইপস ইন্টিগ্রেশন সম্পর্কে আরও বিস্তারিত জানতে এক্সপ্লেনারটি দেখুন।
• স্ট্রিম করা হচ্ছে এমন এলিমেন্টগুলো সরানোর <template for> মতোই, এটি অপ্রত্যাশিত পরিণতি বা স্ট্রিম এরর তৈরি করতে পারে।
• streamHTMLUnsafe অনেক দিক থেকে মূল পার্সারের মতোই কাজ করে, যার মধ্যে রয়েছে মূল ডকুমেন্টে <template for> নির্দেশাবলী যুক্ত হওয়ার সাথে সাথেই সেগুলোর প্রক্রিয়াকরণ এবং স্ট্রিমের শেষ পর্যন্ত defer স্ক্রিপ্টগুলোকে স্থগিত রাখা।

পলিফিল

ক্রোম টিম একটি html-setters-polyfill প্রকাশ করেছে যা npm-এ উপলব্ধ , যাতে সাইটগুলি অন্যান্য ব্রাউজারে এটি আসার আগেই এই নতুন কার্যকারিতাটি অবিলম্বে ব্যবহার করতে পারে।

উল্লেখ্য যে, এই পলিফিলটি স্ট্রিম করে না, বরং এটি বাফার করে এবং কাজ শেষ হলে প্রয়োগ করে। এটি কার্যকারিতার চেয়ে এপিআই (API) কাঠামোর জন্য বেশি উপযোগী একটি পলিফিল।

এছাড়াও, নিরাপদ কন্টেন্ট সেট করা setHTML এবং Sanitizer API-এর উপর নির্ভর করে, যা Safari-তে সমর্থিত নয়।

এই দুটি একসাথে ব্যবহার করুন

যদিও এগুলি দুটি আলাদা এপিআই, এদের সমন্বয়ের মাধ্যমেই আসল শক্তি প্রকাশ পায়। এইচটিএমএল-এ নতুন <template for> এলিমেন্ট স্ট্রিম করার মাধ্যমে, আপনি ডম-এ আলাদা জাভাস্ক্রিপ্ট রেফারেন্স দিয়ে প্রতিটি অংশকে সরাসরি টার্গেট না করেই কন্টেন্টের বিভিন্ন অংশ ডাইনামিকভাবে আপডেট করতে পারেন।

একটি সাধারণ SPA-ধাঁচের পেজ লোড বাস্তবায়ন করা যেতে পারে, যার জন্য প্রসেসিং নির্দেশনাসহ একটি আউটলাইন পেজ লোড করতে হবে এবং তারপর প্রতিটি নতুন পেজের টেমপ্লেটগুলোকে HTML-এর একেবারে নিচে স্ট্রিম করে সেই প্রসেসিং নির্দেশনাগুলোর সাথে খাপ খাইয়ে নিতে হবে।

নিঃসন্দেহে এই দুটি এপিআই-এর আরও সম্ভাবনা ও ব্যবহারের ক্ষেত্র রয়েছে, তাই আমাদের (সীমিত!) কল্পনাকে আপনার পথে বাধা হতে দেবেন না। আংশিক আপডেট পরিচালনা সহজ করার মাধ্যমে আপনি কিছু বয়লারপ্লেট কোড কমাতে, আপডেট আরও সহজ করতে এবং ওয়েবের জন্য নতুন সম্ভাবনা উন্মোচন করতে পারেন!