Frameworks Survey — React, Vue, Svelte
কোনটি শিখবেন? কখন কোনটি বেছে নিবেন?
1. Why a Framework?
- Declarative UI: describe state, not steps
- Component reuse and isolation
- Predictable state management
- Huge ecosystem (forms, routing, animations)
- Strong job market
2. Counter Example — All Three
React
import { useState } from "react";
export default function Counter() {
const [n, setN] = useState(0);
return (
<button onClick={() => setN(n + 1)}>
count: {n}
</button>
);
}Vue 3 (Composition API)
<script setup>
import { ref } from "vue";
const n = ref(0);
</script>
<template>
<button @click="n++">count: {{ n }}</button>
</template>Svelte 5
<script>
let n = $state(0);
</script>
<button onclick={() => n++}>count: {n}</button>3. Mental Models
| React | Vue | Svelte | |
|---|---|---|---|
| UI as | function of state | template + reactive refs | compiled DOM ops |
| Re-renders | Whole component on state change | Fine-grained reactivity | Only the touched DOM nodes |
| Bundle | ~45 KB | ~35 KB | ~5 KB (no runtime) |
| Job market | 🥇 largest | 🥈 strong, especially Asia | 🥉 small but growing |
| Hiring in BD | By far the largest | Niche but growing | Rare |
4. The Reactivity Idea — Sandbox Demo
All three frameworks build on the same foundation: when state changes, the view updates automatically. Here's a 25-line proxy-based mini reactivity system that captures the essence.
let currentSubscriber = null;
function reactive(target) {
const subs = new Map();
return new Proxy(target, {
get(t, k) {
if (currentSubscriber) {
(subs.get(k) ?? subs.set(k, new Set()).get(k))
.add(currentSubscriber);
}
return t[k];
},
set(t, k, v) {
t[k] = v;
(subs.get(k) || []).forEach(fn => fn());
return true;
}
});
}
function effect(fn) {
currentSubscriber = fn;
fn();
currentSubscriber = null;
}
const state = reactive({ count: 0 });
effect(() => console.log("render: count =", state.count));
state.count = 1;
state.count = 2;
state.count = 3;5. How to Pick
Pick React if…
- You want maximum job openings (especially in Bangladesh)
- You need React Native for mobile too
- You have a big team — most engineers know it
- You want the deepest ecosystem (Next.js, Remix, Tanstack)
Pick Vue if…
- You like a more "complete" framework (router, store official)
- Your team comes from HTML/CSS background
- You're working with Laravel — Vue is the default pairing
6. The Recommendation for 2026 Bangladesh
Learn React first — the largest market and the deepest ecosystem. Once you understand it, peek at Vue and Svelte to see how the same problems are solved differently. After ten years in the field, knowing more than one framework is a superpower; on day one, going deep on React is the right move.
7. Glossary (শব্দকোষ)
| Term | Meaning | বাংলায় |
|---|---|---|
| React | Meta's library — UI as a function of state, virtual DOM diffing. | Meta-র library — UI = f(state); virtual DOM diff। |
| Vue | Progressive framework with reactive refs and SFCs. | Reactive ref ও SFC-ভিত্তিক progressive framework। |
| Svelte | Compiler that turns components into direct DOM ops. | Compiler — কোডকে সরাসরি DOM ops-এ রূপ দেয়। |
| JSX | JavaScript extension syntax for HTML-like markup in React. | React-এ HTML-এর মতো লেখার JS extension। |
| Virtual DOM | Lightweight tree React diffs against to compute DOM patches. | হালকা tree — React এটির সাথে diff করে। |
| Reactivity | Auto-update of view when underlying data changes. | Data বদলালে view আপনাআপনি update। |
| Component | Reusable, encapsulated UI unit with props/state. | Reusable UI unit — props ও state থাকে। |
| Hook | React API like useState / useEffect. | React-এর useState/useEffect ইত্যাদি। |
| SFC | Single File Component — Vue/Svelte's .vue/.svelte file format. | Vue/Svelte-এর Single File Component। |
| SSR | Server-Side Rendering — render HTML on the server first. | Server-এ আগে HTML render। |
8. Practice Problems
- Without running, predict the React mental model in 3 sentences.
✨ Show Answer
Answer: React renders a component as a function of its state and props. When state changes, React calls the function again, builds a new virtual DOM, diffs against the previous one, and patches only the differences into the real DOM. Hooks (useState/useEffect) attach state and side-effects to a function component.
- Why is Svelte's bundle smaller than React's?
✨ Show Answer
Answer: Svelte does its work at compile time. It generates direct DOM-mutation code per component, so there's no virtual DOM, no reconciler, and almost no runtime to ship. React's runtime (the reconciler + scheduler) is a fixed cost in every bundle.
- Build a runnable mini-reactivity using a single Proxy.
✨ Show Answer
See section 4 above — paste it into the runner.
- Why is "vanilla JS first, framework later" the right learning order?
✨ Show Answer
Answer: Frameworks abstract over DOM, scope, and async work. If you only learned React, you can't tell which behaviour comes from React and which is JavaScript itself. With strong vanilla foundations, every framework becomes "ah, that's how they're solving X" — fast to learn, fast to debug.
- In one paragraph, why is React the safest first choice in Bangladesh?
✨ Show Answer
Answer: The Bangladesh market follows global hiring patterns with a lag — and globally React has the largest job pool by a wide margin. Local outsourcing firms (which dominate hiring) standardise on React because clients ask for it. A junior dev who ships a single React project can land interviews in Dhaka, Chittagong and remote globally — Vue and Svelte don't yet open that many doors locally.
- Pick a framework for: (a) marketing site, (b) corporate SaaS dashboard, (c) Native mobile.
✨ Show Answer
(a) Svelte/SvelteKit (smallest bundle, best Lighthouse). (b) React (richest component libraries, largest hiring pool). (c) React Native (only choice if your stack is JS).
- Sketch a React useEffect that runs once on mount.
✨ Show Answer
useEffect(() => { fetch("/api/me").then(r => r.json()).then(setUser); }, []); - In one paragraph, when should you avoid frameworks entirely?
✨ Show Answer
Answer: Static landing pages, blog posts, simple forms, and tiny interactive widgets need only vanilla JS — adding React costs 45 KB and a build step for nothing. The Notes SPA you built in Module 30 was the proof: vanilla JS gets you a long way before frameworks pay off.
Summary — Module 39
React, Vue and Svelte solve the same problem: keep UI in sync with state. React owns the largest market; Vue is approachable and complete; Svelte ships the smallest bundle by compiling away the runtime. In Bangladesh, learn React first — then explore.