ভার্চুয়াল স্ক্রলিং প্রয়োগ করে বড় তালিকা আরও রেসপন্সিভ করুন।
স্ক্রল করা যায় এমন তালিকা হল আজকের দিনে সবচেয়ে সাধারণ UI প্যাটার্ন, তা আপনার প্রিয় সোশ্যাল মিডিয়া সাইটে অসীম স্ক্রল করা যায় এমন ফিড ব্রাউজ করা হোক বা কোনও এন্টারপ্রাইজ ড্যাশবোর্ড নেভিগেট করা হোক। স্ক্রল করার তালিকা খুব দীর্ঘ হলে (শত শত, হাজার হাজার বা লক্ষ লক্ষ আইটেম), অ্যাপ্লিকেশনের পারফর্ম্যান্স খারাপ হতে পারে।
বড় তালিকা লোড হতে বেশি সময় লাগতে পারে কারণ অ্যাপ্লিকেশনকে সব ডেটা লোড ও রেন্ডার করতে হয়। এছাড়াও , এগুলি রেন্ডার ও নেভিগেট করতে সময় লাগতে পারে কারণ তালিকার প্রতিটি আইটেমে রিচ ডেটা, মিডিয়া ও কার্যকারিতা থাকতে পারে।
ব্যবহারকারীরা পৃষ্ঠা লোড বা স্ক্রল করার সময় সমস্যার সম্মুখীন হতে পারেন, যার ফলে বিরক্তি এবং পৃষ্ঠা পরিত্যাগ করার মতো ঘটনা ঘটে।
কম্পোনেন্ট ডেভ কিট ব্যবহার করে Angular-এ ভার্চুয়াল স্ক্রলিং
ভার্চুয়াল স্ক্রলিং হল প্রাথমিক টেকনিক যা এই স্কেল সংক্রান্ত সমস্যার সমাধান করতে ব্যবহার করা হয়। ভার্চুয়াল স্ক্রলিংয়ের মাধ্যমে অনেক বড় তালিকা দেখানো যায়। এর জন্য উপযুক্ত সাইজের স্ক্রল বার দেওয়া হয় এবং অ্যাপ্লিকেশনের মেমরিতে পুরো তালিকা না রেখে বা পৃষ্ঠায় তা রেন্ডার না করেই তালিকা নেভিগেট করার সুবিধা দেওয়া হয়।
Angular-এ, ভার্চুয়াল স্ক্রলিংয়ের সুবিধা কম্পোনেন্ট ডেভ কিট (CDK)-এর মাধ্যমে প্রদান করা হয়। আপনি যেভাবে তালিকার মাধ্যমে ইটারেট করেন তা পরিবর্তন করে এবং কয়েকটি অতিরিক্ত কনফিগারেশন প্যারামিটার প্রদান করে, CDK-এর ভার্চুয়াল স্ক্রলিং অটোমেটিক আপনার তালিকার ভার্চুয়াল রেন্ডারিং ম্যানেজ করবে, পৃষ্ঠার পারফর্ম্যান্স এবং প্রতিক্রিয়াশীলতা উন্নত করবে।
একবারে সম্পূর্ণ তালিকা রেন্ডার করার পরিবর্তে, স্ক্রিনে ফিট করে (সাথে একটি ছোট বাফার) এমন আইটেমের শুধুমাত্র একটি সাবসেট রেন্ডার করা হবে। ব্যবহারকারী নেভিগেট করার সময়, আইটেমের নতুন সাবসেট গণনা ও রেন্ডার করা হয়, চাইলে আগে থেকে থাকা DOM আবার ব্যবহার করা হয়।
এই পোস্টের বাকি অংশে বেসিক ভার্চুয়াল স্ক্রলিং কীভাবে সেট-আপ করতে হয় তা দেখানো হয়েছে। এই স্যাম্পেল অ্যাপে আপনি সম্পূর্ণ কার্যকরী উদাহরণ দেখতে পাবেন:
ভার্চুয়াল স্ক্রলিং সেট-আপ করা হচ্ছে
প্রথমে নিশ্চিত করুন যে আপনি নিজের পছন্দের প্যাকেজ ম্যানেজার ব্যবহার করে @angular/cdk ইনস্টল করেছেন। npm ব্যবহার করে এটি ইনস্টল করতে, টার্মিনালে এই কমান্ড রান করুন:
npm install --save @angular/cdk
আপনার অ্যাপে ScrollingModule যোগ করুন
CDK ইনস্টল করা থাকলে, @angular/cdk/scrolling প্যাকেজ থেকে ScrollingModule ইমপোর্ট করুন, যা ভার্চুয়াল স্ক্রলিং ম্যানেজ করে। তারপর আপনার মডিউলের ইমপোর্ট অ্যারেতে এটি যোগ করুন:
import {ScrollingModule} from '@angular/cdk/scrolling';
...
imports: [
ScrollingModule
...
]
...
ভিউপোর্ট তৈরি করা
প্যাকেজটি কীভাবে কাজ করে তা দেখতে, ০ থেকে ৯৯,৯৯৯ পর্যন্ত সংখ্যার তালিকা সহ একটি কম্পোনেন্ট তৈরি করার চেষ্টা করুন:
@Component({
template: `<div *ngFor="let item of list">{{item}}</div>`
})
export class ScrollComponent {
list = Array.from({length: 100000}).map((_, i) => i);
}
ব্রাউজার অ্যাপটি রেন্ডার করার সময়, এটিকে ১,০০,০০০টি স্বতন্ত্র <div>
এলিমেন্ট রেন্ডার করতে হয়। এটি সাধারণ টেক্সট নোডের ক্ষেত্রে ঠিক হলেও, রিপিট করা টেমপ্লেটে কোনও জটিলতা থাকলে তা
স্কেল করা যায় না এবং ইভেন্ট লিসেনার উল্লেখযোগ্যভাবে
বৃদ্ধি পায়।
ভার্চুয়াল স্ক্রলিং যোগ করতে এবং এইসব সমস্যা এড়াতে, আপনাকে <cdk-virtual-scroll-viewport> এলিমেন্টে তালিকাটি র্যাপ করে
একটি ভিউপোর্ট তৈরি করতে হবে:
@Component({
template: `<cdk-virtual-scroll-viewport>
<div *ngFor="let item of list">{{item}}</div>
</cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
list = Array.from({length: 100000}).map((_, i) => i);
}
যেহেতু ScrollingModule তালিকার সাবসেট ডায়নামিকভাবে রেন্ডার করে, তাই আপনাকে
স্ট্যান্ডার্ড CSS-এর মাধ্যমে ভিউপোর্টের উচ্চতা নির্দিষ্ট করতে হবে। এছাড়াও, itemSize উল্লেখ করে ভিউপোর্টকে
এর কন্টেন্ট সম্পর্কে ইঙ্গিত দিতে হবে। এই তথ্য ব্যবহার করে মডিউলটি
নির্ধারণ করে যে নির্দিষ্ট সময়ে DOM-এ কতগুলি আইটেম রাখতে হবে
এবং কীভাবে উপযুক্ত সাইজের স্ক্রলবার রেন্ডার করতে হবে।
@Component({
template: `<cdk-virtual-scroll-viewport itemSize="18" style="height:80vh">
<div *ngFor="let item of list">{{item}}</div>
</cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
list = Array.from({length: 100000}).map((_, i) => i);
}
সবশেষে, *ngFor-কে *cdkVirtualFor-এ কনভার্ট করুন:
@Component({
template: `<cdk-virtual-scroll-viewport itemSize="18" style="height:80vh">
<div *cdkVirtualFor="let item of list">{{item}}</div>
</cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
list = Array.from({length: 100000}).map((_, i) => i);
}
পুরো তালিকাটি বারবার দেখানোর পরিবর্তে, ভিউপোর্ট ডায়নামিকভাবে ব্যবহারকারীর জন্য তালিকার সঠিক সাবসেট শনাক্ত করে এবং বারবার দেখায়। এখন ব্যবহারকারী পৃষ্ঠা লোড করলে, CDK-এর উচিত তালিকার সাবসেট রেন্ডার করা যা স্ক্রিনে ফিট করে (সাথে কিছুটা বাফার) এবং ভিউপোর্টে যেকোনও স্ক্রলিং ইভেন্ট তালিকার উপযুক্ত সাবসেট লোড ও রেন্ডার করে:
আরও এগিয়ে যাওয়া
CDK-এর ভার্চুয়াল স্ক্রল করার ক্ষমতা এই প্রাথমিক উদাহরণের থেকে অনেক বেশি। স্যাম্পেল অ্যাপে,
সম্পূর্ণ তালিকা মেমরিতে ছিল, কিন্তু আরও জটিল অ্যাপ্লিকেশনের জন্য
চাহিদা অনুযায়ী তালিকাটি আনা যেতে পারে। ScrollingModule-এর অন্যান্য ক্ষমতা এবং cdkVirtualOf নির্দেশিকা সম্পর্কে আরও জানতে,
CDK ডকুমেন্টেশন-এ Scrolling
সম্পর্কে পড়ুন।