Framework7 এ Virtual List একটি শক্তিশালী কম্পোনেন্ট যা বড় আকারের ডেটা লিস্ট দ্রুত এবং কার্যকরভাবে রেন্ডার করতে সাহায্য করে। যখন ডেটার সংখ্যা অনেক বেশি, পুরো ডোমে (DOM) একসাথে সকল আইটেম রেন্ডার করলে পারফরম্যান্সে নেতিবাচক প্রভাব পড়ে। Virtual List কৌশল হল, স্ক্রিনে দৃশ্যমান আইটেমগুলোকে কেবল রেন্ডার করা এবং স্ক্রল করার সাথে সাথে ডেটা আপডেট করা, যাতে ব্রাউজারকে অতিরিক্ত ডোম হ্যান্ডল করতে না হয়।
Virtual List এর ধারণা
Virtual List মূলত এমন একটি প্রযুক্তি যেখানে পুরো ডেটাসেট লোড করা হলেও, দৃশ্যমান ভিউতে থাকা আইটেমগুলো ছাড়া বাকি আইটেমগুলো ডোমে রেন্ডার হয় না। ফলে DOM হালকা থাকে এবং অ্যাপ্লিকেশন স্মুথ স্ক্রলিং ও দ্রুত রেন্ডারিং বজায় রাখতে পারে।
Virtual List তৈরি করার ধাপ
১. HTML কাঠামো তৈরি করা
প্রথমে HTML এ একটি list কন্টেইনার তৈরি করুন, যেখানে Virtual List রেন্ডার হবে:
<div class="page" data-name="home">
<div class="page-content">
<div class="list virtual-list media-list" id="my-virtual-list"></div>
</div>
</div>
উপরে .virtual-list ক্লাস ব্যবহার করা হয়েছে। id="my-virtual-list" দিলে JavaScript এ DOM সিলেক্ট করে Virtual List ইনিশিয়ালাইজ করা সহজ হয়।
২. ডেটাসেট প্রস্তুত করা
ধরি, আমাদের কাছে বড় একটি ডেটাসেট আছে। উদাহরণস্বরূপ, আমরা ১০,০০০ আইটেম তৈরি করবো:
var items = [];
for (var i = 1; i <= 10000; i++) {
items.push({
title: 'Item ' + i,
subtitle: 'Subtitle ' + i
});
}
৩. Virtual List ইনিশিয়ালাইজ করা
Framework7 এর JavaScript API ব্যবহার করে Virtual List তৈরি করা হয়। Virtual List ইনিশিয়ালাইজ করার সময় আপনাকে আইটেম টেমপ্লেট এবং ডেটাসোর্স নির্ধারণ করতে হবে।
var app = new Framework7();
var virtualList = app.virtualList.create({
el: '#my-virtual-list',
items: items,
itemTemplate: `
<li>
<a href="#" class="item-link item-content">
<div class="item-inner">
<div class="item-title">{{title}}</div>
<div class="item-subtitle">{{subtitle}}</div>
</div>
</a>
</li>
`,
height: app.theme === 'ios' ? 44 : 48, // প্রতিটি আইটেমের উচ্চতা (এটা নির্ধারণ করে স্ক্রলিং ক্যালকুলেশন)
});
উপরে itemTemplate একটি টেমপ্লেট স্ট্রিং যা প্রতিটি আইটেম কীভাবে রেন্ডার হবে তা নির্ধারণ করে। items প্রপার্টিতে আমাদের ডেটাসোর্স items অ্যারে পাস করা হয়েছে। height প্রপার্টি প্রতিটি আইটেমের উচ্চতা জানায়, যাতে Virtual List সঠিকভাবে স্ক্রল পজিশন হিসাব করতে পারে।
Large Data Handling
Virtual List ব্যবহার করলে হাজার হাজার আইটেমসহ বড় ডেটাসেট পরিচালনা করা সহজ হয়। কারণ মাত্র দৃশ্যমান এলিমেন্টগুলোই DOM এ উপস্থিত থাকবে। স্ক্রল করার সময় পুরোনো এলিমেন্টগুলো DOM থেকে মুছে যাবে এবং নতুন এলিমেন্ট DOM এ যুক্ত হবে।
পারফরম্যান্স টিপস:
- Fixed Height Items: প্রতিটি আইটেমের উচ্চতা নির্দিষ্ট (fixed) রাখুন। Variable height আইটেম Virtual List ব্যবহারের ক্ষেত্রে কম কার্যকর।
- Lazy Loading: প্রয়োজনে ইমেজ বা ভারী কনটেন্ট লোডের ক্ষেত্রে Lazy Loading ব্যবহার করুন।
- Filtering / Searching: Virtual List ব্যবহার করে ফিল্টার বা সার্চ ফাংশনালিটি দ্রুত করা যায়, কারণ শুধু দৃশ্যমান আইটেমগুলোই রেন্ডার হয়।
ডেটা আপডেট করা
Virtual List এ ডেটা আপডেট করার জন্য .replaceAllItems(), .appendItems(), .prependItems() এর মতো মেথড রয়েছে। আপনি API কল করে নতুন ডেটা পাওয়ার পর এই মেথডগুলো ব্যবহার করে UI কে আপডেট করতে পারেন।
// নতুন ডেটা নিয়ে আসা
fetch('https://api.example.com/new-items')
.then(res => res.json())
.then(newItems => {
virtualList.replaceAllItems(newItems);
});
Virtual List ব্যবহার করে Framework7 এ বড় ডেটাসেট নিয়ে কাজ করা সহজ হয়। DOM এ অপ্রয়োজনীয় এলিমেন্ট এড়িয়ে স্মুথ স্ক্রলিং, দ্রুত রেন্ডারিং, এবং উন্নত পারফরম্যান্স পাওয়া যায়।
Read more
