Virtual DOM কি এবং কেন ?

Virtual DOM জানার আগে DOM সম্পর্কে বিস্তারিত জানতে হবে, তাহলে DOM কি? DOM এর পূর্ণরুপ হলো Document Object Model (ডকুমেন্ট অবজেক্ট মডেল)। সহজে বলা যায়, DOM হচ্ছে XML বা HTML Document এর জন্য একটা প্রোগ্রামিং ইন্টারফেস এবং একটি ডকুমেন্টের স্ট্রাকচারকে Object Tree হিসেবে উপস্থাপন করে। এই ওয়েব ডকুমেন্টের মধ্যে প্রত্যেকটি UI Element নোড হিসেবে কাজ করে এবং যা জাভাস্ক্রিপ্টের মাধ্যমে মডিফাই এবং পেজের সঙ্গে ইন্ট্যার‍্যাক্ট সহজে করা যায়। DOM যেহেতু অবজেক্ট কে উপস্থাপন করে এবং সেখানেও জাভাস্ক্রিপ্টের অন্যান্য অবজেক্টের মতোই বিশেষ কিছু Property ও Method রয়েছে। যেগুলোর সাহায্যে আমরা আমাদের ওয়েব পাইজের এ্যাক্সেস করতে পারি এবং প্রয়োজনুসারে পরিবর্তন বা পরিবর্ধন করতে পারি।

 

Virtual DOM কীভাবে কাজ করে?

Virtual DOM হলো Real DOM এর Lightweight copy। যা সাধারণত virtually তৈরি হয় একটি DOM। যেখানে Real DOM এর মতো সকল Properties এক্সেস রয়েছে কিন্তু Virtual DOM সরাসরি ডকুমেন্ট এর লেআউট পরিবর্তন করতে পারে না। যখন ইউজার ইন্টারফেসে কোনো পরিবর্তন হয়, এই পরিবর্তন সরাসারি Real DOM না হয় Virtual DOM হয়ে থাকে। Virtual DOM নতুন আসা পরিবর্তনকে Real DOM এর সাথে তুলনা করে এবং কোন পার্থক্য আছে কিনা তা যাচাই করে। যদি পার্থক্য খুঁজে পায় তাহলে DOM এ নতুন আসা পরিবর্তিত অংশটুকু আপডেট করে এবং বাকি অংশ বা ইলিমেন্ট এর নোড গুলো অপরিবর্তিত থাকে। আর এই পরিবর্তন বা আপডেট প্রক্রিয়াকে Reconciliation (রিকনসিলিয়েশন) বলে।

 

Real DOM এবং Virtual DOM এর মধ্যে পার্থক্য

Real DOM: Real DOM হলো একটি ওয়েব পেইজের প্রকৃত HTML গঠন এবং ওয়েব পেইজের যে কোন পরিবর্তনে ব্রাউজার সম্পূর্ণ ওয়েব পেইজটিকে পুনরায় রেন্ডার করতে ট্রিগার করে। যদিও ছোট ধরনের এ্যাপ্লিকশনে তেমন কোন সমস্যার না কিন্তু বড় এবং জটিল এ্যাপ্লিকেশনগুলোতে সমস্যা এবং রেন্ডারিং প্রক্রিয়া ব্যায়বহুল।

 

Virtual DOM: Virtual DOM হলো Real DOM এর একটি ইন-মেমরি রিপ্রেজেন্টেশন। ওয়েব পেইজের সকল পরিবর্তন প্রথমে Virtual DOM এ করা হয় এবং পরবর্তিতে রিকনসিলিয়েশন প্রক্রিয়া পূর্বের ডম এর সাথে তুলনা করে, যেখানে যেখানে পরিবর্তন এবং আপডেট করা প্রয়োজন ঐ সকল যায়গার পরিবর্তন সাধিত হয়।

 

নিম্নে Real DOM এবং Virtual DOM এর মধ্যকার সাধারণ কিছু পার্থক্য -  

Real DOM	Virtual DOM
Real DOM প্রকৃতপক্ষে একটি ওয়েব পেইজের স্ট্রাকচার উপস্থাপন করে।	অন্যদিকে, Virtual DOM একটি ওয়েব পেইজের ভার্চুয়াল/মেমরি উপস্থাপন করে।
DOM ম্যানিপুলেশন খুব ব্যায়বহুল।	DOM ম্যানিপুলেশন খুব সহজ।
অনেক মেমরি অপচয় হয়।	কোন মেমরির অপচয় হয় না।
ধীরে ধীরে আপডেট হয়।	দ্রুত আপডেট হয়।
সরাসরি HTML আপডেট করে।	সরাসরি HTML আপডেট করে না।
Element আপডেট হলে নতুন DOM তৈরি করে।	Element আপডেট হলে JSX তৈরি করে।
এটি অ্যাপ্লিকেশনের UI উপস্থাপন করে।	এটি DOM এর ভার্চুয়াল উপস্থাপন মাত্র।

 

React এর মতো জনপ্রিয় লাইব্রেরীতে Virtual DOM কীভাবে প্রয়োগ করা হয়?

React এ Virtual DOM, DOM এর আর্কিটেকচারের একটি প্রধান অংশ। যখন কোনো কম্পোনেন্টের স্টেট এর অবস্থা পরিবর্তন হয়, তখন React এই পরিবর্তনের নতুন একটি Virtual DOM তৈরি করে এবং এই ভার্চুয়াল ডম কে পূর্বের DOM এর সাথে তুলনা করে। React এর Diffing Algorithm (ডিফিং অ্যালগরিদম) মাধ্যমে Real DOM এ তা আপডেট করে নেয়।

 

Virtual DOM এ Reconciliation (রিকনসিলিয়েশন) প্রক্রিয়া –

Reconciliation হলো Virtual DOM (Document Object Model) এর একটি প্রক্রিয়া যা ইউজার ইন্টারফেসকে দক্ষতার সাথে আপডেট করতে React এর মতো জনপ্রিয় লাইব্রেরী ব্যবহার করা হয়। Virtual DOMM হলো Real DOM এর একটি lightweight copy এবং এটি Real DOM এর সরাসরি ডম ম্যানিপুলশন কমিয়ে আরও কার্যকরভাবে UI তে পরিবর্তন করার সুযোগ করে দেয়।

 

নিম্নে Virtual DOM এ Reconciliation (রিকনসিলিয়েশন) প্রক্রিয়ার ধাপগুলো বর্ণনা করা হলো –

✔ Initial Render (প্রাথমিক পরিবর্তন) – যখন কোন কম্পোনেন্ট প্রাথমিক রেন্ডার হয়, তখন DOM এর একটি ভার্চুয়াল Representation তৈরি হয়। এই ভার্চুয়াল Representation টি Virtual DOM এর একটি Tree-structure (ট্রি-স্ট্রাকচার)।

✔ State or Prop Change (স্টেট বা প্রপস পরিবর্তন) - যখন কোন কম্পোনেন্ট এর State বা Props এর অবস্থা পরিবর্তন হয়, তখন কম্পোনেন্টের একটি নতুন ভার্চুয়াল Representation তৈরি হয়।

✔ Reconciliation Algorithm (রিকনসিলিয়েশন অ্যালগরিদম) – একটি Reconciliation Algorithm ব্যবহার করে আগেরটির সাথে নতুন ভার্চুয়াল Representation এর সাথে তুলনা করা হয়। নতুন এবং পুরানো ভার্চুয়াল ডম ট্রি এর মধ্যে পার্থক্যগুলিকে দক্ষতার সাথে সনাক্ত করে।

✔ Determination of Changes (পরিবর্তন নির্ধারণ) - Reconciliation Algorithm নতুন এবং পুরানো ভার্চুয়াল ডম ট্রির মধ্যে পার্থক্য চিহ্নিত করে এবং সম্পূর্ণ নিশ্চিত করে যে ভার্চুয়াল ডমের কোন কোন অংশগুলো পরিবর্তন বা আপডেট করতে হবে।

✔ Minimizing DOM Operations (DOM অপারেশন মিনিমাইজ করা) – একবার পার্থক্য চিহ্নিত হয়ে গেলে, React, Real DOM আপডেট করার জন্য প্রয়োজনীয় পরিবর্তনের একটি মিনিমাল সেট তৈরি করে। এই ধাপটি আপডেট করার ক্ষেত্রে অত্যন্ত গুরুত্বপূর্ণ, কেননা Real DOM এর সরাসরি ম্যানিলুশেন একটি ব্যায়বহুল অপারেশন।

✔ Patch to Real DOM (Real DOM প্যাচ করা) – পরিবর্তনের মিনিমাল সেট, প্যাচ হিসেবে উল্লেখ করা হয়, Real DOM এ প্রয়োগ করা হয়। এই প্রয়োগে শুধুমাত্র DOM এর যে অংশগুলি পরিবর্তিত হয়েছে তা আপডেট করে।

✔ Repeat the Process (প্রক্রিয়াটি পুনরাবৃত্তি করা) – যদি আরও স্টেট বা প্রপ পরিবর্তন হয়, পুনরায় নতুন একটি Virtual DOM তৈরি হয় এবং উপরিল্লোখিত প্রক্রিয়াটি ধাপে ধাপে পুনরাবৃত্তি হয়।

 

এক নজরে Reconciliation প্রক্রিয়া
Initial Render	DOM এর একটি ভার্চুয়াল Representation তৈরি হয়।
State & Prop	যখন state বা prop পরিবর্তন হয়, তখন একটি নতুন ভার্চুয়াল Representation তৈরি হয়।
Reconciliation Algorithm	পুরানো এবং নতুন ভার্চুয়াল Representation এ পার্থক্য তুলনা করে।
Minimize DOM Operations	Real DOM আপডেট করার জন্য প্রয়োজনীয় পরিবর্তনের একটি মিনিমাল সেট তৈর করে।
Patch to Real DOM	Real DOM এ মিনিমাল সেটের পরিবর্তনগুলো প্রয়োগ করা হয়।
Repeat	যদি আরও পরিবর্তন হয়, তাহলে সম্পূর্ণ প্রক্রিয়াটি পুনরাবৃত্তি করে।

 

Performance Optimization এর জন্য Virtual DOM কেন ব্যবহার করা হয়?

✔ Efficient Update (দক্ষ আপডেট) – Virtual DOM শুধুমাত্র পরিবর্তিত অংশগুলির তুলনা করা এবং আপডেট করার মাধ্যমে, অপ্রয়োজনীয় রি-রেন্ডার এবং Real DOM এ আপডেটগুলি মিনিমাইজড করা হয়।

✔ Batching Updates (ব্যাচিং আপডেট) – Virtual DOM এ একাধিক পরিবর্তন একসাথে ব্যাচ করা যায়, যার ফলে Real DOM এর সাথে Interactions (মিথস্ক্রিয়া) সংখ্যা হ্রাস করে এবং Performance উন্নত করে।

✔ Smooth Rendering (স্মুথ রেন্ডারিং) – ডিফিং অ্যালগরিদমের মাধ্যমে এমনভাবে আপডেট করা হয় যার ফলে হঠাৎ বা অপ্রয়োজনীয় পরিবর্তন এড়িয়ে User Experience উপর প্রভাব কমিয়ে দেয়।

 

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