React, Vue, Svelte — framework কেন, কীভাবে কাজ করে আর কোনটি বেছে নেবেন

১ · সমস্যাটি আগে — হাতে DOM মেলানো কেন ভেঙে পড়ে

পর্ব ৩৭-এ আপনি DOM নিজের হাতে বদলেছেন: element খুঁজেছেন, textContent বসিয়েছেন, classList বদলেছেন। ছোট পাতায় এটি চমৎকার কাজ করে। এবার একটি অনলাইন দোকানের কথা ভাবুন। একটি পণ্য কার্টে যোগ হলে একসাথে অনেক জায়গা বদলাতে হয়: হেডারের ব্যাজে সংখ্যা, কার্টের তালিকায় নতুন সারি, মোট দাম, “কার্ট খালি” বার্তাটি লুকানো, checkout বোতাম চালু করা, আর পণ্যের কার্ডে “কার্টে আছে” চিহ্ন। পণ্য সরালে আবার সব কয়টি — উল্টো দিকে।

// ✘ হাতে মেলানো: প্রতিটি পরিবর্তনে মনে রাখতে হয় কোন কোন জায়গা বদলাবে
function addToCart(item) {
  cart.push(item);
  badge.textContent = cart.length;          // ১. হেডারের ব্যাজ
  list.append(makeRow(item));               // ২. কার্টের তালিকা
  totalEl.textContent = sum(cart);          // ৩. মোট দাম
  emptyMsg.hidden = true;                   // ৪. "কার্ট খালি" বার্তা
  // ৫. checkout বোতাম? ৬. পণ্যের কার্ডের চিহ্ন? — একটি ভুলে গেলেই বাগ
}
function removeFromCart(id) { /* আবার সব কয়টি জায়গা, উল্টো দিকে */ }

এই ধরনের কোডকে বলে imperative update — “কী দেখাতে চাই” নয়, “কোন ধাপে কী বদলাব” লেখা। সমস্যা তিনটি। প্রথমত, পরিবর্তনের পথ গুণিতক হারে বাড়ে: n ধরনের ঘটনা আর m জায়গার পাতা মানে প্রায় n × m সংখ্যক হাতে লেখা আপডেট। দ্বিতীয়ত, একটি ভুললেই ডেটা আর পাতা আলাদা কথা বলে — ব্যাজে ৩, তালিকায় ২টি পণ্য। তৃতীয়ত, নতুন একটি জায়গা (যেমন মোবাইলের নিচের বারে কার্টের সংখ্যা) যোগ করলে আগের প্রতিটি আপডেট-পথ খুঁজে খুঁজে বদলাতে হয় — কোড যত বড়, ঝুঁকি তত বেশি।

তিনটি বড় প্রতিশ্রুতি

পর্ব ২১-এর হিসাব খাতায় আমরা নিয়ম বানিয়েছিলাম “পাতা = f(state)”: ডেটা বদলালে পুরো তালিকা নতুন করে আঁকো। সেটি declarative UI-এর বীজ। Framework এই বীজকে তিনটি প্রতিশ্রুতিতে বড় করে:

মনে রাখুন, framework জাদু নয়। শেষ পর্যন্ত সবাই পর্ব ৩৭-এর createElement, textContent, addEventListener-ই ডাকে। পার্থক্য হলো এই ডাকগুলো আপনি লেখেন না — framework লেখে, আর কম ভুলে লেখে।

২ · সব framework-এর ভাগ করা ভাষা — component, props, state আর effect

React, Vue, Svelte, Angular — নাম আর লেখার ধরন আলাদা, কিন্তু নিচের ধারণাগুলো সবার ভেতরে একই। একটি framework ভালোভাবে শিখলে বাকিগুলো দ্রুত পড়তে পারবেন, কারণ আসলে শুধু শব্দ বদলায়।

ডেটা নিচে, খবর ওপরে — একমুখী প্রবাহ

সবচেয়ে গুরুত্বপূর্ণ নিয়মটি হলো one-way data flow. ডেটার একটি মালিক থাকে। মালিক ডেটা props হিসেবে নিচে পাঠায়। নিচের component ডেটা নিজে বদলায় না; সে মালিককে একটি callback দিয়ে জানায় — “ব্যবহারকারী চা যোগ করতে চান”। মালিক state বদলায়, আর নতুন ডেটা আবার নিচে নামে। এতে যেকোনো বাগে প্রশ্ন একটি: “এই ডেটার মালিক কে, আর কে তাকে বদলাতে বলেছে?” দুটি sibling component-এর একই ডেটা লাগলে ডেটাকে তাদের সাধারণ parent-এ তুলে নেওয়া হয় — একে বলে lifting state up. অনেক স্তর পেরিয়ে props পাঠাতে হলে (prop drilling) React-এর Context বা একটি store ব্যবহার হয়।

state কম, হিসাব বেশি — derived state

নতুনদের সবচেয়ে চেনা ভুল: cart, count আর total — তিনটিই আলাদা state হিসেবে রাখা। তাহলে তিনটি মিলিয়ে রাখার দায়িত্ব আবার আপনার, অর্থাৎ অংশ ১-এর সমস্যাই ফিরে এল। নিয়ম: যা অন্য state থেকে হিসাব করা যায়, তা state নয় — এটি derived state. শুধু cart রাখুন; count আর total প্রতিবার হিসাব হোক। হিসাব ভারী হলে framework একে cache করার উপায় দেয় — React-এ useMemo, Vue-তে computed, Svelte-এ $derived. এটি পর্ব ২৩-এর pure function আর memoization-এর সরাসরি প্রয়োগ।

effect — render-এর বাইরের জগৎ

Component-এর মূল কাজ ডেটা থেকে UI বর্ণনা করা, আর সেটি pure হওয়া উচিত: একই ডেটা, একই UI. কিন্তু অ্যাপকে বাইরের জগতের সাথেও কথা বলতে হয় — fetch (পর্ব ৩৫), timer, WebSocket, document.title. এই side effect-গুলো রাখা হয় আলাদা জায়গায়, যাকে বলে effect: component পাতায় বসার পরে চলে, নির্ভরতা বদলালে আবার চলে, আর component সরে গেলে cleanup করে (listener সরানো, request বাতিল — পর্ব ৩৬-এর AbortController). পুরোনো class কোডে এদের বলত lifecycle method.

form, routing আর data fetching

Controlled ইনপুটে মান থাকে state-এ: প্রতিটি টাইপে state বদলায়, আর state-ই ইনপুটে মান বসায়। এতে যাচাই (পর্ব ৩৯) সহজ হয়। Routing-এ দুই ঘরানা: পুরোনো MPA (multi-page app) — প্রতিটি লিংকে সার্ভার থেকে নতুন HTML পাতা; আর SPA — একটি পাতা একবার লোড হয়, তারপর JavaScript URL বদলায় (History API) আর শুধু ভেতরের component বদলায়, যাকে বলে client-side routing. Data fetching-এ loading, error, cache, পুরোনো উত্তর আগে আসার race condition — সবই সামলাতে হয়; তাই বড় অ্যাপে এর জন্য আলাদা library (যেমন TanStack Query) জনপ্রিয়।

নিজের হাতে একটি ছোট framework

এবার এই ধারণাগুলো প্রায় ২০ লাইনে বানিয়ে দেখি — কোনো library ছাড়া। একটি createStore state রাখে আর বদলালে subscriber-দের খবর দেয়; একটি component (CartCounter) state নিয়ে DOM ফেরত দেয়; আর render পুরো পাতা নতুন করে বসায়। চালানোর পরে ওপরের ফ্রেমে “+ চা” বোতামটি নিজে চেপে দেখুন:

function createStore(state) {                    // state রাখে, বদলালে খবর দেয়
  const subs = [];
  return {
    get: () => state,
    set(patch) { state = { ...state, ...patch }; subs.forEach((fn) => fn(state)); },
    subscribe: (fn) => subs.push(fn),
  };
}
const h = (tag, props, ...kids) => {             // ছোট্ট element-বানানো helper
  const el = Object.assign(document.createElement(tag), props); el.append(...kids); return el;
};
const CartCounter = ({ cart }) => h('div', {},    // component: ডেটা ঢোকে, DOM বের হয়
  h('p', {}, `কার্টে ${cart.length}টি — মোট ৳${cart.reduce((s, p) => s + p.price, 0)}`),
  h('ul', {}, ...cart.map((p) => h('li', {}, p.name))),
  h('button', { onclick: () => store.set({ cart: [...cart, { name: 'চা', price: 20 }] }) }, '+ চা'));
const store = createStore({ cart: [] }), root = document.querySelector('#app'); let renders = 0;
store.subscribe((s) => { renders++; root.replaceChildren(CartCounter(s)); });
root.replaceChildren(CartCounter(store.get())); renders++;
const firstP = root.querySelector('p');
store.set({ cart: [{ name: 'শিঙাড়া', price: 15 }] });
root.querySelector('button').click();
console.log(root.querySelector('p').textContent, '| render:', renders, '| পুরোনো p পাতায় আছে?', firstP.isConnected);

৩ · React — JSX, hooks আর virtual DOM দিয়ে re-render

Facebook ২০১৩ সালে React open source করে। এর মূল ভাবনা ঠিক ওপরের mini-framework-এর মতো: component হলো একটি সাধারণ JavaScript function, যা state থেকে UI বর্ণনা ফেরত দেয়, আর state বদলালে function-টি আবার চলে। পার্থক্য হলো, React সরাসরি DOM বানায় না — বানায় হালকা object-এর একটি গাছ, virtual DOM, তারপর আগের গাছের সাথে তুলনা করে শুধু পার্থক্যটুকু আসল DOM-এ বসায়। একই কার্ট কাউন্টার React-এ:

import { useState } from 'react';

let nextId = 1;
export function CartCounter() {
  const [cart, setCart] = useState([]);                     // local state
  const total = cart.reduce((s, p) => s + p.price, 0);      // derived — state নয়, হিসাব

  function addTea() {
    setCart((prev) => [...prev, { id: nextId++, name: 'চা', price: 20 }]); // নতুন array
  }
  return (
    <div>
      <p>কার্টে {cart.length}টি — মোট ৳{total}</p>
      <ul>{cart.map((p) => <li key={p.id}>{p.name}</li>)}</ul>
      <button onClick={addTea}>+ চা</button>
    </div>
  );
}
// প্রত্যাশিত আচরণ: শুরুতে "কার্টে 0টি — মোট ৳0"; দুবার চাপলে "কার্টে 2টি — মোট ৳40" আর তালিকায় দুটি "চা"

JSX — দেখতে HTML, আসলে JavaScript

Function-এর ভেতরে HTML-এর মতো লেখাটিকে বলে JSX. ব্রাউজার JSX বোঝে না; build tool (পর্ব ৪৬-এর Vite, ভেতরে esbuild বা Babel-এর মতো transpiler) একে সাধারণ function call-এ বদলে দেয়:

// আপনি লেখেন:
<p className="total">মোট ৳{total}</p>

// compiler বানায় (React 17 থেকে চালু "automatic runtime"):
import { jsxs } from 'react/jsx-runtime';
jsxs('p', { className: 'total', children: ['মোট ৳', total] });
// পুরোনো রূপ: React.createElement('p', { className: 'total' }, 'মোট ৳', total)
// ফল একটি সাধারণ object: { type: 'p', props: { className: 'total', children: [...] } }

এই একটি সত্য JSX-এর সব “অদ্ভুত” নিয়ম ব্যাখ্যা করে। class JavaScript-এর reserved word, তাই className. {}-এর ভেতরে যেকোনো expression চলে, কিন্তু if বা for statement চলে না — তাই শর্তে ternary বা &&, তালিকায় map (পর্ব ১৬). আর {}-এর ভেতরের লেখা React নিজে escape করে বসায়, তাই ব্যবহারকারীর ডেটা দেখানো স্বাভাবিকভাবেই textContent-এর মতো নিরাপদ। ব্যতিক্রম নামেই বিপদ জানায়: dangerouslySetInnerHTML — পর্ব ৪৩-এর XSS নিয়ম এখানেও খাটে। Vue-র v-html আর Svelte-এর {@html}-ও একই রকম ঝুঁকিপূর্ণ।

hooks — function-এর ভেতরে স্মৃতি

একটি function প্রতিবার নতুন করে চলে, তাহলে cart মনে থাকে কীভাবে? উত্তর hooks (React 16.8, ২০১৯ থেকে). useState মানটি component-এর বাইরে, React-এর নিজের খাতায় রাখে, আর প্রতি render-এ ফেরত দেয়। প্রধান কয়েকটি:

• useState — একটি মান আর তাকে বদলানোর function. বদলানোর function ডাকলেই React পরের render-এর সূচি করে। আগের মানের ওপর নির্ভর করলে setCart(prev => …) রূপ লিখুন।
• useEffect — render শেষে চলা side effect, সাথে একটি dependency array আর একটি cleanup function.
• useMemo / useCallback — ভারী হিসাব বা function-কে dependency না বদলানো পর্যন্ত cache করা।
• useRef — render-এর মাঝে টিকে থাকা একটি বাক্স, যা বদলালে render হয় না (যেমন একটি DOM node বা timer id).

React hooks চেনে ডাকার ক্রম দিয়ে — প্রথম useState মানে খাতার প্রথম ঘর, দ্বিতীয়টি দ্বিতীয় ঘর। তাই দুটি rules of hooks: (১) hook শুধু component-এর ওপরের স্তরে ডাকুন — if, loop বা nested function-এর ভেতরে নয়, যাতে প্রতি render-এ ক্রম একই থাকে; (২) hook শুধু React component বা নিজের বানানো hook (use দিয়ে শুরু নাম) থেকে ডাকুন। ESLint-এর eslint-plugin-react-hooks এগুলো ধরিয়ে দেয়। আরেকটি ফাঁদ পর্ব ২২-এর stale closure: পুরোনো render-এর timer পুরোনো মান দেখে।

একটি ক্লিক থেকে DOM পর্যন্ত — React-এর render চক্র

onClick → addTea() → setCart(prev => [...prev, চা])
এখনই DOM বদলায় না; React শুধু নোট রাখে “এই component আবার আঁকতে হবে”
একই event-এ কয়েকটি setState হলে সব একসাথে (batching)

CartCounter()  // পুরো function, ওপর থেকে নিচে
  useState → cart = [চা]      // React-এর খাতা থেকে নতুন মান
  total = 20                // derived — আবার হিসাব
child component-গুলোও (ডিফল্টে) আবার চলে

{ type: 'div', children: [
    { type: 'p',  children: ['কার্টে ', 1, 'টি — মোট ৳', 20] },
    { type: 'ul', children: [{ type: 'li', key: 1, children: 'চা' }] },
    { type: 'button', props: { onClick: addTea } } ] }

div      → একই type      → রেখে দাও
p        → লেখা 0→1, 0→20 → দুটি text বদল
ul > li  → key 1 নতুন    → একটি li তৈরি
button   → একই          → কিছু না

textNode.nodeValue = '1'; textNode2.nodeValue = '20';
ul.append(document.createElement('li'))   // "চা"
div, button, ইনপুটের focus — সব অক্ষত
তারপর effect-গুলো চলে (useEffect)

React Compiler আর ecosystem

বড় React অ্যাপে অপ্রয়োজনীয় re-render কমাতে ডেভেলপাররা বছরের পর বছর হাতে useMemo, useCallback আর memo লিখেছেন — আর প্রায়ই ভুল জায়গায়। React দল এর উত্তর হিসেবে React Compiler এনেছে: build-এর সময় component বিশ্লেষণ করে নিজে থেকে memoization বসায়। ২০২৪ সালে এটি পরীক্ষামূলক (beta) হিসেবে আসে আর ২০২৫ সালে স্থিতিশীল সংস্করণ পায়। তবে এটি শুধু React-এর নিয়ম মানা কোডেই কাজ করে, তাই নিয়ম জানা এখনো জরুরি।

React নিজে শুধু UI library; বাকিটা ecosystem থেকে আসে। Routing-এ React Router, server data-র cache আর loading/error সামলাতে TanStack Query, shared state-এ Redux Toolkit (পর্ব ২৩-এর reducer ধারণা, Redux-এর আধুনিক রূপ) বা ছোট ও সহজ Zustand. মোবাইলে একই ধারণা React Native-এ। নতুন প্রজেক্ট শুরুর পুরোনো টুল Create React App ২০২৫ সালে আনুষ্ঠানিকভাবে deprecated হয়েছে; আজকের পরামর্শ Vite (পর্ব ৪৬) বা একটি meta-framework (অংশ ৭)।

৪ · তালিকা, key আর derived তালিকা — পণ্যের লিস্ট আর খোঁজার বক্স

তালিকা আঁকার সময় framework-কে একটি কঠিন প্রশ্নের উত্তর দিতে হয়: আগের render-এর তিনটি আইটেম আর এখনকার চারটি — কোনটি কোনটির সাথে মেলে? নতুন আইটেম কি শুরুতে ঢুকেছে, নাকি সবগুলোর নাম বদলেছে? Framework আইটেমের ভেতরটা পড়ে অনুমান করে না; সে আপনার দেওয়া key দেখে। React-এ key, Vue-তে :key, Svelte-এ (p.id), Angular-এ track — নাম আলাদা, কাজ এক। key হিসেবে array-এর index দিলে কী হয়, দেখুন। প্রতিটি সারিতে একটি পরিমাণের ইনপুট আছে, আর ব্যবহারকারী “চা”-র পাশে 2 লিখেছেন। এবার তালিকার শুরুতে “পানি” যোগ হলো:

1items = [চা, কফি, লাচ্ছি]2items = [পানি, ...items]   // শুরুতে নতুন3// ✘ {items.map((p, i) => <Row key={i} … />)}4// ✔ {items.map((p) => <Row key={p.id} … />)}

খোঁজার বক্স — controlled input আর derived তালিকা

এবার একটি পণ্যের তালিকা আর তার ওপরে একটি খোঁজার বক্স। কোন জিনিস state, আর কোনটি হিসাব? ব্যবহারকারী যা টাইপ করেছেন (query), সেটি state — এটি অন্য কিছু থেকে বের করা যায় না। কিন্তু filter করা তালিকা products আর query থেকে হিসাব করা যায় — তাই সেটি derived:

function ProductSearch({ products }) {                       // props: ডেটা ওপর থেকে আসে
  const [query, setQuery] = useState('');                     // state: শুধু ব্যবহারকারীর দেওয়া
  const visible = products.filter((p) => p.name.includes(query)); // derived: প্রতি render-এ
  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />  {/* controlled */}
      <p>{visible.length}টি পণ্য</p>
      <ul>{visible.map((p) => <ProductRow key={p.id} product={p} />)}</ul>
    </>
  );
}
// ✘ AI-এর কোডে প্রায়ই: derived তালিকাকে আলাদা state + effect দিয়ে মেলানো
// const [visible, setVisible] = useState(products);
// useEffect(() => setVisible(products.filter(…)), [products, query]);  // বাড়তি render, বাড়তি বাগ

প্রত্যাশিত আচরণ: বক্সে “কা” লিখলে শুধু যেসব নামে “কা” আছে, সেগুলো থাকে, আর সংখ্যাও সাথে সাথে বদলায়। তালিকা কয়েক হাজার হলে useMemo বা পর্ব ৩৬-এর debounce ভাবুন — কিন্তু আগে মাপুন (পর্ব ৫৩)।

৫ · Vue, Svelte আর signal — বদল টের পাওয়ার অন্য পথ

React-এর পথ: “কী বদলেছে জানি না, তাই পুরো component আবার চালাই আর তুলনা করি।” বাকিদের প্রশ্ন: যদি আগেই জানা যেত কোন ডেটা কোন DOM node-এ ব্যবহার হয়েছে, তাহলে তুলনারই দরকার হতো না। এই ধারণার নাম fine-grained reactivity, আর এর মূল একক signal: একটি মানের বাক্স, যে মনে রাখে কে কে তাকে পড়েছে, আর বদলালে শুধু তাদের খবর দেয় — পর্ব ৩৮-এর observer pattern, তবে নিজে থেকে subscribe হয়। ছোট একটি signal ব্যবস্থা নিজে বানিয়ে দেখুন:

let current = null;                                 // এই মুহূর্তে কোন effect চলছে
function signal(value) {
  const subs = new Set();                           // যারা আমাকে পড়েছে
  return {
    get() { if (current) subs.add(current); return value; },   // পড়লেই নাম লেখা
    set(v) { if (v !== value) { value = v; [...subs].forEach((run) => run()); } },
  };
}
function effect(fn) {
  const run = () => { const prev = current; current = run; fn(); current = prev; };
  run();
}
function computed(fn) { const s = signal(); effect(() => s.set(fn())); return { get: s.get }; }
const qty = signal(1), price = signal(120), buyer = signal('রহিম');
const total = computed(() => { console.log('  ⚙ total হিসাব'); return qty.get() * price.get(); });
const $ = (id) => document.getElementById(id);
effect(() => { $('total').textContent = `৳${total.get()}`; console.log('  ↻ total-এর DOM'); });
effect(() => { $('buyer').textContent = buyer.get(); console.log('  ↻ buyer-এর DOM'); });
console.log('qty = 3'); qty.set(3);
console.log('buyer = করিম'); buyer.set('করিম');
console.log('qty = 3 আবার'); qty.set(3);
console.log($('box').textContent);

1qty, price, buyer = signal(…)2total = computed(qty × price)3effect: totalText ← total4effect: buyerText ← buyer5qty.set(3)6buyer.set('করিম')7// React-এ: setQty(3) → পুরো component + diff

একই কার্ট কাউন্টার — Vue, Svelte আর Angular-এ

<script setup>
import { ref, computed } from 'vue';
let nextId = 1;
const cart = ref([]);
const total = computed(() => cart.value.reduce((s, p) => s + p.price, 0));
function addTea() {
  cart.value.push({ id: nextId++, name: 'চা', price: 20 });  // সরাসরি বদল — Proxy টের পায়
}
</script>

<template>
  <p>কার্টে {{ cart.length }}টি — মোট ৳{{ total }}</p>
  <ul><li v-for="p in cart" :key="p.id">{{ p.name }}</li></ul>
  <button @click="addTea">+ চা</button>
</template>

<script>
  let nextId = 1;
  let cart = $state([]);                                   // reactive state
  let total = $derived(cart.reduce((s, p) => s + p.price, 0)); // derived
  function addTea() {
    cart.push({ id: nextId++, name: 'চা', price: 20 });   // $state-এর array গভীরভাবে reactive
  }
</script>

<p>কার্টে {cart.length}টি — মোট ৳{total}</p>
<ul>
  {#each cart as p (p.id)}<li>{p.name}</li>{/each}
</ul>
<button onclick={addTea}>+ চা</button>

import { Component, signal, computed } from '@angular/core';

@Component({
  selector: 'app-cart-counter',
  template: `
    <p>কার্টে {{ cart().length }}টি — মোট ৳{{ total() }}</p>
    <ul>@for (p of cart(); track p.id) { <li>{{ p.name }}</li> }</ul>
    <button (click)="addTea()">+ চা</button>`,
})
export class CartCounterComponent {
  private nextId = 1;
  cart = signal<{ id: number; name: string; price: number }[]>([]);
  total = computed(() => this.cart().reduce((s, p) => s + p.price, 0));
  addTea() {
    this.cart.update((c) => [...c, { id: this.nextId++, name: 'চা', price: 20 }]);
  }
}

চারটি কোড পাশাপাশি রাখলে আসল শিক্ষাটি চোখে পড়ে: state, derived মান, তালিকায় key, event-এ function — চারটি ধারণাই প্রতিটিতে আছে। বদলেছে শুধু লেখার ধরন আর বদল টের পাওয়ার যন্ত্র: React-এ নতুন array, Vue আর Svelte-এ সরাসরি push, Angular-এ update.

৬ · Angular, Solid, Preact, Qwik, Lit — বাকি মানচিত্র

Angular-কে আলাদা করে চেনা দরকার, কারণ এর দর্শন বাকিদের থেকে ভিন্ন। React বলে “আমি শুধু UI, বাকিটা আপনি বেছে নিন”; Angular বলে “সব সিদ্ধান্ত আমি নিয়ে রেখেছি”. ফোল্ডার কাঠামো, CLI, routing, form, HTTP — সবকিছুর একটি অফিসিয়াল উপায়। এর কেন্দ্রে dependency injection: একটি component নিজে new CartService() বানায় না; constructor-এ বা inject(CartService) দিয়ে চায়, আর Angular সঠিক instance দিয়ে দেয়। এতে টেস্টে আসল service-এর জায়গায় নকল দেওয়া সহজ (পর্ব ৪৮)। আগে Angular বদল টের পেত Zone.js দিয়ে পুরো গাছ পরীক্ষা করে; signal আসার পরে সে zoneless দিকে সরছে। বড় দল, দীর্ঘমেয়াদি প্রজেক্ট, ব্যাংক বা সরকারি এন্টারপ্রাইজ সফটওয়্যার — যেখানে “সবাই একই নিয়মে লিখবে” গুরুত্বপূর্ণ, সেখানে Angular প্রায়ই দেখা যায়।

মনে রাখুন, Web Components framework-এর বিকল্প নয়, পরিপূরক: নিজের ট্যাগ আর আলাদা style দেয়, কিন্তু state থেকে UI আঁকা বা routing দেয় না।

৭ · Meta-framework আর rendering — CSR, SSR, SSG, hydration আর islands

এ পর্যন্ত সব কোড চলেছে ব্রাউজারে: ফাঁকা একটি HTML আসে, JavaScript নামে, তারপর component পাতা আঁকে। একে বলে CSR (client-side rendering). ড্যাশবোর্ডে এটি ঠিক আছে, কিন্তু একটি পণ্যের পাতা বা সংবাদের পাতায় সমস্যা: ধীর ফোনে কয়েক সেকেন্ড সাদা পাতা, আর search engine বা সোশ্যাল মিডিয়ার preview ঠিকমতো লেখা পায় না। সমাধান হলো সার্ভারেই component চালিয়ে HTML বানানো — আর সেই কাজের জন্য React, Vue বা Svelte-এর ওপরে একটি স্তর লাগে, যাকে বলে meta-framework: Next.js আর React Router 7 (Remix-এর উত্তরসূরি) React-এর জন্য, Nuxt Vue-র জন্য, SvelteKit Svelte-এর জন্য, Angular-এর নিজের SSR, আর Astro যেকোনোটির সাথে।

SSR বা SSG-তে ব্রাউজার আগেই সম্পূর্ণ HTML পায়, তাই লেখা দ্রুত দেখা যায় — পর্ব ৫৩-এর Core Web Vitals-এর LCP ভালো হয়। কিন্তু সেই HTML এখনো “মৃত”: বোতামে listener নেই, state নেই। তাকে জীবন্ত করার ধাপটির নাম hydration:

GET /product/7   — CSR হলে উত্তর হতো ফাঁকা <div id="root"></div>

product = await db.find(7)          // পর্ব ৫২
html = renderToString(<ProductPage product={product} />)
<h1>জামদানি শাড়ি</h1><p>৳4500</p><button>কার্টে যোগ</button>
+ ডেটার একটি JSON কপি, + <script src="bundle.js">

পর্দায় নাম, দাম, বোতাম — দ্রুত (ভালো LCP)
ব্যবহারকারী "কার্টে যোগ" চাপলেন → কিছুই হলো না
listener এখনো লাগেনি; ধীর ফোনে এই ফাঁক কয়েক সেকেন্ড

bundle.js নামে → parse → চলে
যে অংশ কখনো বদলায় না (শিরোনাম, বর্ণনা), তার কোডও নামে
main thread ব্যস্ত → INP খারাপ হতে পারে (পর্ব ৫৩)

hydrateRoot(root, <ProductPage product={json} />)
→ component আবার চলে, কিন্তু DOM নতুন বানায় না
→ বিদ্যমান node-এর সাথে মিলিয়ে listener আর state লাগায়
সার্ভার আর ব্রাউজারের HTML না মিললে "hydration mismatch" সতর্কবার্তা

islands আর React Server Components

Islands architecture-এ পাতা মূলত স্থির HTML-এর একটি সমুদ্র; তার মাঝে কয়েকটি interactive “দ্বীপ” — একটি কার্ট বোতাম, একটি ছবির carousel. শুধু দ্বীপগুলোর JavaScript নামে আর hydrate হয়, প্রতিটি আলাদাভাবে। Astro এই ধারণার সবচেয়ে পরিচিত উদাহরণ, আর এর দ্বীপ React, Vue, Svelte — যেকোনোটি দিয়ে লেখা যায়। লেখা-প্রধান সাইটে এটি পাঠানো JavaScript অনেক কমায়।

React Server Components (RSC) একই সমস্যা React-এর ভেতর থেকে সমাধান করতে চায়। কিছু component শুধু সার্ভারে চলে — সরাসরি ডেটাবেস পড়তে পারে, আর তাদের কোড কখনো ব্রাউজারে যায় না; ব্রাউজারে যায় শুধু ফল। interactive অংশগুলো আলাদা করে 'use client' চিহ্ন দিয়ে “client component” বানানো হয়। Next.js-এর App Router এই মডেলে চলে। এটি শক্তিশালী, কিন্তু কোন কোড কোথায় চলছে আর কোন ডেটা সীমানা পেরোচ্ছে (secret যেন client-এ না যায়), তা নিয়ে সতর্ক থাকতে হয়। পুরোনো Next.js-এর pages/ router আর getServerSideProps এখনো চলে, কিন্তু নতুন ডকুমেন্টেশনের কেন্দ্রে App Router — AI-এর কোডে দুটি মিশে যাওয়া খুব সাধারণ (অংশ ৯)।

৮ · কোনটি বেছে নেবেন — আর কখন কোনোটিই নয়

“সবচেয়ে ভালো framework কোনটি?” প্রশ্নটির সৎ উত্তর: প্রজেক্ট আর দলের ওপর নির্ভর করে। বিচার করার পাঁচটি মাপকাঠি:

• দলের দক্ষতা। দলের জানা framework-এর উৎপাদনশীলতা প্রায়ই নতুনটির সব সুবিধার চেয়ে বেশি।
• অ্যাপের ধরন। বেশিরভাগ লেখা আর অল্প interactivity (ব্লগ, ডকুমেন্টেশন, কোম্পানির সাইট) → Astro বা অন্য SSG. লগইনের পেছনে অনেক ফর্ম আর চার্ট (ড্যাশবোর্ড, ERP) → React বা Vue, প্রায়ই CSR. বড় দল, দীর্ঘমেয়াদি এন্টারপ্রাইজ → Angular-এর কাঠামো সুবিধা দেয়। SEO-নির্ভর ই-কমার্স → Next.js, Nuxt বা SvelteKit-এর SSR/ISR.
• পারফরম্যান্স আর bundle. সস্তা ফোন আর ধীর নেটওয়ার্কে প্রতিটি KB গুরুত্বপূর্ণ। Svelte, Solid, Preact ছোট runtime দেয়; React-এর আকার বড়, কিন্তু SSR/RSC দিয়ে কমানো যায়। অনুমান নয় — পর্ব ৫৩-এর মতো মাপুন।
• শেখার ঢাল। Vue আর Svelte HTML জানা মানুষের কাছে সহজ শুরু; React-এ “এটি শুধু JavaScript”, কিন্তু hooks-এর নিয়ম আর ecosystem-এর অসংখ্য বিকল্প শিখতে হয়; Angular-এ শুরুতে শেখার জিনিস সবচেয়ে বেশি (TypeScript, DI, RxJS).
• চাকরির বাজার। বাংলাদেশে আর বিদেশের remote কাজে front-end চাকরির বিজ্ঞাপনে React সবচেয়ে বেশি চাওয়া হয় — এটি প্রচলিত ধারণা, আর বিজ্ঞাপন দেখলেই মিলবে। Laravel-ভিত্তিক অনেক প্রতিষ্ঠানে Vue, আর কিছু বড় এন্টারপ্রাইজ ও ব্যাংকিং সফটওয়্যারে Angular দেখা যায়। নিজে কয়েকটি job portal-এ খুঁজে সংখ্যাটা যাচাই করুন — অন্যের দাবি নয়।

একটি উদাহরণ — হাসপাতালের ড্যাশবোর্ড

ধরুন, ঢাকার একটি হাসপাতালের জন্য রোগী ভর্তি, বেড আর বিলের একটি অভ্যন্তরীণ ড্যাশবোর্ড বানাবেন। লগইনের পেছনে, SEO লাগে না → CSR যথেষ্ট। অনেক ফর্ম, টেবিল আর live বেড-সংখ্যা → component framework উপকারী। দলের তিনজন React জানেন → React + Vite + TanStack Query + একটি UI component library যুক্তিসংগত পছন্দ। দল Vue জানলে Vue সমান ভালো। আর যদি একই হাসপাতালের পাবলিক ওয়েবসাইট (ডাক্তারের তালিকা, সময়সূচি) বানাতে হয় — সেটি আলাদা প্রজেক্ট: স্থির লেখা আর SEO → Astro বা SSG. একই প্রতিষ্ঠান, দুটি ভিন্ন সঠিক উত্তর।

কখন framework লাগে না

একটি পাঁচ পাতার কোম্পানি সাইট, একটি যোগাযোগ ফর্ম, একটি ছবির gallery — এখানে React মানে build pipeline আর বড় bundle, অথচ দরকার কয়েক লাইনের DOM কোড। পর্ব ৩৭-এর vanilla JavaScript আর progressive enhancement — আগে কাজ করা HTML, তারপর JavaScript দিয়ে উন্নত করা — এখানে যথেষ্ট। সার্ভার-রেন্ডারড অ্যাপে (Laravel, Django, Rails) অল্প প্রাণ যোগ করতে htmx (HTML attribute দিয়ে সার্ভার থেকে HTML টুকরো এনে বসানো) বা Alpine.js (মার্কআপের ভেতরে ছোট reactive আচরণ) আজকাল জনপ্রিয় বিকল্প। ABCL TECH-এর এই কোর্সের পাতাগুলোও কোনো framework ছাড়া, সাধারণ HTML আর অল্প JavaScript-এ বানানো।

শেখার পথ

একটি সৎ পরামর্শ: framework দিয়ে JavaScript শেখা শুরু করবেন না। যিনি closure (পর্ব ২২), this, Promise আর async/await (পর্ব ৩৩–৩৪), DOM আর event (পর্ব ৩৭–৩৮), module (পর্ব ৪৫) বোঝেন, তিনি React-এর stale closure, useEffect-এর cleanup বা hydration-এর বাগ ধরতে পারেন; যিনি বোঝেন না, তিনি শুধু AI-কে বারবার জিজ্ঞেস করেন। এই কোর্স শেষ করে একটি framework বেছে নিন — বাজারের কারণে সাধারণত React, অথবা আপনার দল বা প্রজেক্ট যা চায় — আর তার অফিসিয়াল ডকুমেন্টেশন (react.dev, vuejs.org, svelte.dev, angular.dev) দিয়ে গভীরভাবে শিখুন। সাথে TypeScript (পর্ব ৪৭) আর টেস্টিং (পর্ব ৪৮), আর পর্ব ৫৫-এর মতো একটি সত্যিকারের প্রজেক্ট। দ্বিতীয় framework তখন সহজ, কারণ ধারণাগুলো একই।

৯ · AI-এর যুগে — AI-এর লেখা framework কোড যাচাই করা

Framework কোড AI-এর সবচেয়ে দুর্বল জায়গাগুলোর একটি — কারণ এর API দ্রুত বদলায়, আর AI-এর প্রশিক্ষণের ডেটায় দশ বছরের পুরোনো আর নতুন কোড মিশে আছে। ফলে একই উত্তরে React-এর class component আর hooks, Vue 2-এর Options API আর Vue 3-এর <script setup>, Next.js-এর পুরোনো pages router আর নতুন App Router মিশে যায়। সাধারণ ভুলগুলো:

AI-এর লেখা framework কোড হাতে পেলে — যাচাইয়ের চেকলিস্ট

• কোডের API আপনার প্রজেক্টের সংস্করণের সাথে মেলে (package.json দেখুন); পুরোনো আর নতুন রীতি মেশানো নেই
• প্রতিটি state-এর জন্য প্রশ্ন: এটি কি অন্য state থেকে হিসাব করা যায়? গেলে state নয়
• প্রতিটি useEffect/$effect/watch: এটি কি সত্যিই বাইরের system-এর সাথে সমলয়? cleanup আছে?
• প্রতিটি তালিকায় স্থায়ী, অনন্য key; index বা random নয়
• state immutable ভাবে বদলানো (React) বা reactive পথে (Vue/Svelte/signal); সরাসরি mutation-এর পরে একই reference set নয়
• dangerouslySetInnerHTML, v-html, {@html} নেই — থাকলে ডেটা sanitize করা (পর্ব ৪৩)
• React DevTools-এর “Highlight updates” বা Profiler চালিয়ে দেখুন — একটি টাইপে পুরো পাতা জ্বলে উঠছে কি না