ভার্চুয়াল DOM ও রিকনসিলিয়েশন

১ · রিয়েল DOM কেন সরাসরি বারবার বদলানো ব্যয়বহুল

ব্রাউজারের রিয়েল DOM একটি জটিল, লাইভ কাঠামো — প্রতিটি এলিমেন্টের সাথে লেআউট (কোথায় বসবে), স্টাইল, ইভেন্ট লিসেনার ইত্যাদি জড়িত। DOM-এর একটি নোড পরিবর্তন করলে ব্রাউজারকে প্রায়ই পুরো লেআউট আবার হিসেব করতে হয় (রিফ্লোReflow / LayoutDOM পরিবর্তনের পর ব্রাউজার এলিমেন্টগুলোর অবস্থান ও আকার আবার হিসেব করে — এটি ব্যয়বহুল একটি অপারেশন।) এবং স্ক্রিনে আবার আঁকতে হয় (রিপেইন্ট)। একটি বড় UI-তে যদি প্রতিটি ছোট ডেটা পরিবর্তনে সরাসরি DOM নোড খোঁজা ও বদলানো হতো, তাহলে পারফরম্যান্স দ্রুত খারাপ হয়ে যেত।

সমাধান হিসেবে React, Vue-এর মতো ফ্রেমওয়ার্ক একটি ভার্চুয়াল DOM রাখে — L09-এ দেখা vnode ট্রির মতো একটি সাধারণ, হালকা ইন-মেমরি কাঠামো, যা রিয়েল DOM নোড নয়, শুধু "DOM কেমন হওয়া উচিত তার বর্ণনা"। যখন অ্যাপের স্টেট বদলায়, ফ্রেমওয়ার্ক প্রথমে একটি নতুন ভার্চুয়াল DOM ট্রি তৈরি করে (যা তৈরি করা সস্তা — শুধু Python/JS অবজেক্ট), তারপর সেটাকে পুরনো ভার্চুয়াল DOM ট্রির সাথে তুলনা করে বের করে ঠিক কোথায় আসলে পরিবর্তন দরকার — শুধু সেটুকুই রিয়েল DOM-এ প্রয়োগ করা হয়।

২ · রিকনসিলিয়েশন ও ডিফিং — প্রক্রিয়াটি কী

রিকনসিলিয়েশনReconciliationপুরনো ও নতুন ভার্চুয়াল DOM ট্রি তুলনা করে ন্যূনতম প্রয়োজনীয় রিয়েল-DOM পরিবর্তন বের করার প্রক্রিয়া। হলো পুরনো vnode ট্রি ও নতুন vnode ট্রি — দুটোকেই একসাথে, নোড-বাই-নোড হেঁটে তুলনা করার প্রক্রিয়া। এই তুলনাকে বলা হয় ডিফিং। ডিফিং অ্যালগরিদম প্রতিটি নোডের জন্য কয়েকটি প্রশ্নের উত্তর খোঁজে:

• ট্যাগ কি বদলেছে? (যেমন div থেকে span) — হলে পুরো সাবট্রি প্রতিস্থাপন করতে হবে ("replace" প্যাচ)।
• Props কি বদলেছে? — হলে শুধু বদলে যাওয়া props-গুলো আলাদাভাবে আপডেট করতে হবে ("update_props" প্যাচ), পুরো নোড না ভেঙে।
• Children-এর সংখ্যা কি বদলেছে? — নতুন চাইল্ড যোগ হলে ("add_child"), বাদ গেলে ("remove_child")।
• টেক্সট কনটেন্ট কি বদলেছে? — হলে সেই টেক্সট নোডটুকু প্রতিস্থাপন করতে হবে।

প্রতিটি "প্রশ্নের উত্তর" একটি ছোট প্যাচ অপারেশন হিসেবে একটি লিস্টে জমা হয় — ট্রির প্রতিটি নোডের একটি পাথ (root থেকে সেই নোড পর্যন্ত চাইল্ড-ইনডেক্সের ধারা, যেমন (1, 0) মানে root-এর চাইল্ড #1-এর চাইল্ড #0) দিয়ে চিহ্নিত করা হয়, যাতে পরে রিয়েল DOM-এ ঠিক কোন নোডে প্যাচটি প্রয়োগ করতে হবে তা জানা যায়।

৩ · সম্পূর্ণ diff() অ্যালগরিদম লেখা

নিচের কোড সেলে একটি সত্যিকারের, কার্যকর diff(old, new, path) ফাংশন লেখা হয়েছে যা L09-এর vnode কাঠামোর উপর কাজ করে (children হয় একটি vnode dict, নয়তো একটি প্লেইন স্ট্রিং — টেক্সট নোড)। এটি একটি concrete "টুডু-লিস্ট" এর আগে ও পরের অবস্থা তুলনা করে — যেখানে (ক) পুরো লিস্টের একটি নতুন প্রপ যোগ হয়েছে, (খ) একটি আইটেমের টেক্সট বদলেছে, এবং (গ) একটি নতুন আইটেম যোগ হয়েছে।

# --- diff() অ্যালগরিদম ---
# একটি vnode হয় {"tag":..., "props":{...}, "children":[...]} অথবা একটি প্লেইন স্ট্রিং (টেক্সট নোড)

def diff(old, new, path=()):
    """পুরনো ও নতুন vnode তুলনা করে একটি প্যাচ-অপারেশন লিস্ট রিটার্ন করে।
    প্রতিটি প্যাচ একটি tuple: (op_name, path, ...extra_data)"""
    patches = []

    # কেস ১: নতুন নোড এমন জায়গায় যোগ হয়েছে যেখানে আগে কিছুই ছিল না
    if old is None and new is not None:
        patches.append(("add_child", path, new))
        return patches

    # কেস ২: পুরনো নোড আছে কিন্তু নতুন গাছে সেই জায়গায় কিছু নেই -- বাদ দিতে হবে
    if new is None and old is not None:
        patches.append(("remove_child", path))
        return patches

    # কেস ৩: দুটোর একটি টেক্সট নোড (স্ট্রিং) -- সরাসরি মান তুলনা
    if isinstance(old, str) or isinstance(new, str):
        if old != new:
            patches.append(("replace", path, new))
        return patches

    # কেস ৪: দুটোই এলিমেন্ট vnode -- ট্যাগ বদলেছে কি না দেখা
    if old["tag"] != new["tag"]:
        patches.append(("replace", path, new))
        return patches  # ট্যাগ বদলালে ভেতরের children আলাদাভাবে ডিফ করার দরকার নেই

    # কেস ৫: ট্যাগ একই -- props তুলনা করা (যোগ/পরিবর্তিত/বাদ-যাওয়া সব ধরা)
    old_props = old.get("props", {})
    new_props = new.get("props", {})
    changed_props = {}
    for key, value in new_props.items():
        if key not in old_props or old_props[key] != value:
            changed_props[key] = value
    for key in old_props:
        if key not in new_props:
            changed_props[key] = None  # None মানে এই প্রপ বাদ দিতে হবে
    if changed_props:
        patches.append(("update_props", path, changed_props))

    # কেস ৬: children রিকার্সিভভাবে ডিফ করা, ইনডেক্স অনুযায়ী মিলিয়ে
    old_children = old.get("children", [])
    new_children = new.get("children", [])
    max_len = max(len(old_children), len(new_children))
    for i in range(max_len):
        old_child = old_children[i] if i < len(old_children) else None
        new_child = new_children[i] if i < len(new_children) else None
        patches.extend(diff(old_child, new_child, path + (i,)))

    return patches


# --- concrete "আগে" ট্রি: দুই আইটেমের টুডু-লিস্ট ---
old_tree = {
    "tag": "ul",
    "props": {"class": "todo-list"},
    "children": [
        {"tag": "li", "props": {"class": "todo-item"}, "children": ["পানি কেনা"]},
        {"tag": "li", "props": {"class": "todo-item"}, "children": ["দুধ কেনা"]},
    ],
}

# --- concrete "পরে" ট্রি: একই লিস্ট, কিন্তু --
#   (১) ul-এ একটি নতুন প্রপ "data-count" যোগ হয়েছে
#   (২) দ্বিতীয় আইটেমের টেক্সট বদলেছে
#   (৩) তৃতীয় একটি নতুন আইটেম যোগ হয়েছে
new_tree = {
    "tag": "ul",
    "props": {"class": "todo-list", "data-count": "3"},
    "children": [
        {"tag": "li", "props": {"class": "todo-item"}, "children": ["পানি কেনা"]},
        {"tag": "li", "props": {"class": "todo-item"}, "children": ["দুধ ও ডিম কেনা"]},
        {"tag": "li", "props": {"class": "todo-item"}, "children": ["রুটি কেনা"]},
    ],
}

patch_list = diff(old_tree, new_tree)

print(f"মোট প্যাচ পাওয়া গেছে: {len(patch_list)}\n")
for i, patch in enumerate(patch_list, start=1):
    op = patch[0]
    path = patch[1]
    extra = patch[2] if len(patch) > 2 else None
    print(f"প্যাচ #{i}: op={op!r}  path={path}  data={extra}")

৪ · হাতে-হিসেব করে যাচাই করা

কোডটি Run করার আগে হাতে ট্রেস করে দেখা যাক তিনটি প্যাচ কেন সঠিক:

• প্যাচ ১ — root-এ update_props: old_tree-এর ul-এ প্রপ ছিল শুধু {"class": "todo-list"}, new_tree-এ যোগ হয়েছে "data-count": "3" — path () (root), changed props {"data-count": "3"}।
• প্যাচ ২ — path (1, 0)-এ replace: ইনডেক্স ১-এর li দুটোতেই একই ট্যাগ ও props, কিন্তু তার চাইল্ড #0 (টেক্সট) "দুধ কেনা" থেকে "দুধ ও ডিম কেনা"-তে বদলেছে — তাই path (1, 0) (root-এর চাইল্ড ১-এর চাইল্ড ০)।
• প্যাচ ৩ — path (2,)-এ add_child: old_children-এর দৈর্ঘ্য ২ (ইনডেক্স ০,১), কিন্তু new_children-এর দৈর্ঘ্য ৩ — তাই ইনডেক্স ২-তে old_child হয় None, new_child হয় তৃতীয় li, ফলে add_child প্যাচ path (2,)-এ।

প্রথম আইটেম (ইনডেক্স ০, "পানি কেনা") সম্পূর্ণ অপরিবর্তিত থাকায় তার জন্য কোনো প্যাচ তৈরি হয়নি — এটাই ডিফিং-এর মূল লক্ষ্য: শুধু আসলে বদলে যাওয়া অংশ চিহ্নিত করা, পুরো ট্রি নয়।