Virtual DOM কিভাবে কাজ করে

প্রিয় ডেভেলপারস , আসসালামু আলাইকুম । আশা করি আপনারা সবাই ভালো আছেন । আজকে ব্লগে Virtual DOM কীভাবে কাজ করে তা নিয়ে বিস্তারিত আলোচনা করবো ...

প্রিয় ডেভেলপারস, আসসালামু আলাইকুম। আশা করি আপনারা সবাই ভালো আছেন। আজকে ব্লগে Virtual DOM কীভাবে কাজ করে তা নিয়ে বিস্তারিত আলোচনা করবো, তাহলে চলুন শুরু করা যাক।

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

 

Virtual DOM হলো Real DOM এর Lightweight copy। যা সাধারণত virtually তৈরি হয় একটি DOM। যেখানে Real DOM এর মতো সকল Properties এক্সেস রয়েছে কিন্তু Virtual DOM সরাসরি ডকুমেন্ট এর লেআউট পরিবর্তন করতে পারে না। Virtual DOM কীভাবে কাজ করে নিম্নে ধাপে ধাপে উল্লেখ করা হলো –

 

📌 যখন কোন এ্যাপ্লিকেশন প্রথমবার ব্রাউজারে রান হয়, বা এ্যাপ্লিকেশনের কোন অবস্থান পরিবর্তন হয়। তখনি DOM এর একটি lightweight কপি তৈরি হয়, যাকে Virtual DOM বলে। আর এই Virtual DOM টি হলো জাভাস্ক্রিপ্টের একটি অবজেক্ট যা Real DOM মডেলের স্ট্রাকচারের প্রতিরূপ।

 

📌 এ্যাপ্লিকেশনে যখন কোন ইউজার ইন্টারয়েকশন, ডাটা ফেচিং, আপডেটিং ইত্যাদি সংঘটিত হলে, নতুন একটি Virtual DOM তৈরি হয় এবং নতুন Virtual DOM টি পূর্ববর্তিটির সাথে তুলনা করে এবং পার্থক্য ও পরিবর্তগুলো চিহ্নিত করে। আর এই প্রক্রিয়াকে Reconciliation (রিকনসিলিয়েশন) বা (Deff) ডিফিং বলে।

 

📌 Reconciliation (রিকনসিলিয়েশন) বা (Deff) ডিফিং প্রক্রিয়ার সময়, অ্যালগোরিদম ঐ প্রক্রিয়ার পরিবর্তিত এবং আপডেট করতে প্রয়োজনীয় নির্দিষ্ট উপদানগুলি চিহ্নিত করে। আর এই প্রয়োজনীয় পরিবর্তনগুলো “Deff বা প্যাচ” এর মাধ্যমে বর্ণনা করে।

 

📌 প্রতিটি পরিবর্তনের ক্ষেত্রে এ্যাপ্লিকেশন এর Real DOM সরাসরি আপডেট করার পরিবর্তে Real DOM এর lightweight কপি Virtual DOM এ পয়োজনীয় সমস্ত পরিবর্তন এবং আপডেটগুলো একটি ব্যাচে সংগ্রহ করে। আর এই নির্ধারিত পরিবর্তনের ব্যাচটি Real DOM এর সাথে তুলনা করে যেখানে পরিবর্তন এবং আপডেট করা প্রয়োজন শুধুমাত্র তাই আপডেট করে এবং আপডেটকৃত নতুন অবস্থা UI তে প্রদর্শিত হয়।

 

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