Angular আর Svelte — দুই ভিন্ন দর্শন

১ · দুই দর্শন: সব-এক-ছাদের-নিচে বনাম compiler

এই কোর্সে এতক্ষণ আপনি React আর Next.js দিয়ে “বাজারঘর” বানিয়েছেন। মডিউল ১০-এ আমরা অন্য জনপ্রিয় framework-গুলোর দিকে তাকাচ্ছি, যাতে একই সমস্যার অন্য সমাধান চিনতে পারেন। পর্ব ৬৬-তে Vue আর Nuxt আছে। এই পর্বে দুটি framework, যাদের দর্শন প্রায় বিপরীত মেরুতে।

যান্ত্রিকভাবে পার্থক্যটি এই। React-এ state বদলালে component function আবার চলে, নতুন virtual DOM তৈরি হয়, React আগেরটির সাথে মিলিয়ে (পর্ব ১৫) DOM-এ যা বদলেছে শুধু তা লেখে। Angular-এ template আগেই compile হয়ে নির্দেশে পরিণত হয়, আর signal বদলালে Angular জানে কোন view-কে আবার দেখতে হবে। Svelte-এ compiler প্রতিটি {count}-এর জন্য আলাদা একটি ছোট আপডেট-ফাংশন লেখে, যা সরাসরি একটি text node বদলায়।

এই পর্বের সব আসল run একই দিনে, Node 24.15 আর npm 11.12-এ। লেখার সময়ে version: @angular/cli 22.2.5 আর @angular/core 22.2.4, svelte 5.57.3, @sveltejs/kit 3.1.1, sv 1.2.0, vite 8.3.5, react 19.3.1. সব npm view দিয়ে যাচাই করা stable version; pre-release tag এড়ানো হয়েছে। Version দ্রুত বদলায়, তাই নিজের যন্ত্রে আবার দেখে নিন।

২ · Signal: সব framework-এর নতুন সাধারণ ভাষা

Angular আর Svelte-কে বুঝতে আগে একটি ধারণা হাতে-কলমে বানিয়ে নিই। চায়ের দোকানের হিসাব খাতার কথা ভাবুন। খাতায় “আজকের বাকি” লেখা একটি ঘর। দোকানি জানেন কোন কোন খদ্দের এই ঘরটি দেখে চলেন। ঘরের সংখ্যা বদলালে শুধু তাঁদের ডেকে বলেন; বাকি সবাইকে নয়। আর সংখ্যা যদি একই থাকে, কাউকেই ডাকেন না।

Signal ঠিক এটাই। একটি মানের ধারক, যে মনে রাখে কে তাকে পড়েছে। তিনটি অংশ:

• signal: লেখা যায় এমন মান, যেমন কার্টের পণ্যের তালিকা।
• computed: অন্য signal থেকে হিসাব করা মান, যেমন পণ্যের সংখ্যা বা মোট দাম। নিজে লেখা যায় না।
• effect: signal পড়ে বাইরের দুনিয়ায় কিছু করা কাজ, যেমন DOM-এ লেখা বা log. Framework নিজের template-এর জন্য ভেতরে এমন effect-ই বানায়।

নিচের ব্লকটি একটি শিক্ষণ মডেল। আসল library-গুলো আরও অনেক কিছু করে (নিচে বলছি), কিন্তু মূল কৌশল এই ৩৫ লাইনেই।

// শিক্ষণ মডেল: signal, computed আর effect — reactivity-র মূল ধারণা
let running = null;                         // এই মুহূর্তে কোন effect চলছে
function signal(value) {
  const readers = new Set();
  const read = () => { if (running) readers.add(running); return value; };
  read.set = (next) => {
    if (Object.is(next, value)) return;     // একই মান হলে কাউকে জাগায় না
    value = next;
    [...readers].forEach((run) => run());
  };
  return read;
}
function effect(fn) {
  const run = () => { const prev = running; running = run; fn(); running = prev; };
  run();
}
function computed(fn) {                     // আসল library-তে এটি অলস (lazy) আর cache করা
  const s = signal(undefined);
  effect(() => s.set(fn()));
  return () => s();
}

const items = signal([]);
const user = signal('রহিম');
const count = computed(() => items().length);
const total = computed(() => items().reduce((sum, p) => sum + p.price, 0));
effect(() => console.log(`  [ব্যাজ] কার্টে ${count()}টি`));
effect(() => console.log(`  [মোট]  ৳${total()}`));
effect(() => console.log(`  [নাম]  স্বাগতম, ${user()}`));

console.log('১) শাড়ি যোগ:');  items.set([...items(), { price: 4500 }]);
console.log('২) নাম বদল:');    user.set('করিম');
console.log('৩) একই নাম আবার:'); user.set('করিম');
console.log('৪) ব্যাগ যোগ:');   items.set([...items(), { price: 450 }]);

  [ব্যাজ] কার্টে 0টি
  [মোট]  ৳0
  [নাম]  স্বাগতম, রহিম
১) শাড়ি যোগ:
  [ব্যাজ] কার্টে 1টি
  [মোট]  ৳4500
২) নাম বদল:
  [নাম]  স্বাগতম, করিম
৩) একই নাম আবার:
৪) ব্যাগ যোগ:
  [ব্যাজ] কার্টে 2টি
  [মোট]  ৳4950

মডেলটি ইচ্ছা করে সরল। আসল library তিনটি জিনিস বাড়তি করে। এক, computed অলস: কেউ না পড়া পর্যন্ত হিসাব করে না, আর ফল cache রাখে। দুই, প্রতিবার effect চলার আগে পুরোনো নির্ভরতা মুছে নতুন করে তালিকা বানায়, যাতে if-এর শাখা বদলালে ভুল signal-এর কথা না শোনে। তিন, “glitch” এড়ায়: একটি বদল দুই পথে একই effect-এ পৌঁছালে effect যেন মাঝের অর্ধেক-হালনাগাদ অবস্থা না দেখে। এজন্য তারা বদলগুলো একসাথে জমা করে (batching) আর নির্ভরতার ক্রমে চালায়।

একই ধারণা, অনেক নাম

ধারণাটি নতুন নয়। ২০১০ সালের দিকে Knockout.js-এর “observable” প্রায় একই কাজ করত, আর spreadsheet-এর ঘর তো তারও আগে থেকে এভাবেই চলে: A1 বদলালে শুধু যে ঘরগুলো A1 ব্যবহার করে, সেগুলো নতুন করে হিসাব হয়। SolidJS (Ryan Carniato) এই ধারণাকে আবার আলোচনায় আনে, ২০২২ সালে Preact Signals আসে, আর ২০২৩ সালে Angular 16-এ signal প্রথম developer preview হিসেবে আসে। TC39, যে কমিটি JavaScript ভাষা ঠিক করে, তার সামনে ২০২৪ সালে একটি Signals প্রস্তাব এসেছে, যার লক্ষ্য framework-গুলোর জন্য একটি সাধারণ ভিত্তি। লেখার সময়ে (নভেম্বর ২০২৬) প্রস্তাবের পাতায় এটি Stage 1 লেখা, মানে এখনো প্রাথমিক আলোচনার ধাপ; ভাষায় আসবে কি না, কবে, তা নিশ্চিত নয়। লক্ষ করুন, প্রস্তাবে কোনো effect নেই, ইচ্ছা করেই: কখন effect চালানো হবে, সেই সময়সূচি framework-এর সিদ্ধান্ত।

৩ · Angular-এর নতুন চেহারা: ng new, standalone component আর @for

Angular শুরু হয় তার CLI দিয়ে। এটি শুধু প্রজেক্ট বানায় না: build, dev server, test, code generation আর version upgrade (ng update) সব একই টুলে। আমরা “বাজারঘর”-এর একটি ছোট client-only সংস্করণ বানালাম। সত্যিকারের run, Angular CLI 22.2.5 (ফাইলের তালিকা ছাঁটা):

$ npx @angular/cli@22.2.5 new ng-cart --defaults --skip-git --ssr=false \
    --routing=false --style=css --ai-config=none --skip-tests
CREATE ng-cart/angular.json (2231 bytes)
CREATE ng-cart/package.json (…)
…
CREATE ng-cart/src/main.ts (228 bytes)
CREATE ng-cart/src/app/app.ts (…)
CREATE ng-cart/src/app/app.config.ts (…)
- Installing packages (npm)...
✔ Packages installed successfully.

--ai-config option-টি লক্ষ করুন: CLI নিজেই জিজ্ঞেস করে কোন AI টুলের জন্য নির্দেশিকা ফাইল বানাবে। আমরা none দিয়েছি। তৈরি হওয়া package.json-এ zone.js নেই। angular.dev-এর zoneless পাতা বলে, Angular v21 থেকে zoneless হলো ডিফল্ট। এ নিয়ে অংশ ৫-এ আসছি।

এখন আসল কোড। কার্টের অবস্থা একটি service-এ, যাতে অনেক component একই কার্ট ভাগ করতে পারে:

import { Injectable, computed, signal } from '@angular/core';
import { Product } from './products';

@Injectable({ providedIn: 'root' })
export class CartService {
  private readonly items = signal<Product[]>([]);
  readonly count = computed(() => this.items().length);
  readonly total = computed(() =>
    this.items().reduce((sum, p) => sum + p.price, 0));

  add(p: Product) { this.items.update(list => [...list, p]); }
  clear() { this.items.set([]); }
}

import { Component, inject } from '@angular/core';
import { CartService } from './cart.service';
import { PRODUCTS } from './products';

@Component({
  selector: 'app-root',
  template: `
    <h1>বাজারঘর</h1>
    <p>কার্টে {{ cart.count() }}টি · মোট ৳{{ cart.total() }}</p>
    <ul>
      @for (p of products; track p.id) {
        <li>{{ p.name }} — ৳{{ p.price }}
          <button (click)="cart.add(p)">কার্টে যোগ</button></li>
      }
    </ul>
    @if (cart.count() > 0) {
      <button (click)="cart.clear()">কার্ট খালি</button>
    }
  `,
})
export class App {
  protected readonly cart = inject(CartService);
  protected readonly products = PRODUCTS;
}

লাইন ধরে পড়ি। @Component একটি decorator: class-এর ওপরে তথ্য বসায়, যেমন কোন HTML tag (app-root) আর কোন template. কোনো NgModule নেই; Angular 19 থেকে component ডিফল্টভাবে standalone, তাই standalone: true লিখতেও হয়নি। Template-এ {{ }} মান দেখায়, (click) event বাঁধে, আর [routerLink]-এর মতো চৌকো বন্ধনী property বাঁধে। cart.count() লক্ষ করুন: signal পড়তে function-এর মতো ডাকতে হয়, আর এই ডাকটিই Angular-কে জানিয়ে দেয় template কোন signal-এর ওপর নির্ভর করছে।

@for আর @if হলো Angular 17 (২০২৩) থেকে আসা built-in control flow. আগে লেখা হতো *ngFor আর *ngIf. আমাদের ইনস্টল করা @angular/common 22.2.4-এর type ফাইলে লেখা আছে: The `ngFor` directive is deprecated. Use the `@for` block instead. track এখানে React-এর key-এর কাজ করে (পর্ব ১১), তবে Angular এটি বাধ্যতামূলক করেছে। আমরা ইচ্ছা করে track p.id মুছে build চালালাম:

X [ERROR] NG5002: @for loop must have a "track" expression [plugin angular-compiler]

    src/app/app.ts:11:6:
      11 │       @for (p of products) {
         ╵       ~~~~~~~~~~~~~~~~~~~~~~

React-এ key ভুলে গেলে শুধু dev-এ একটি warning আসে; Angular-এ build-ই হয় না। এটি দুই দর্শনের একটি ছোট নমুনা: Angular ভুলের সুযোগ কমাতে নিয়ম কড়া করে।

$ npx ng build
❯ Building...
✔ Building...
Initial chunk files | Names         |  Raw size | Estimated transfer size
main-PERF65PE.js    | main          | 108.48 kB |                32.75 kB
styles-5INURTSO.css | styles        |   0 bytes |                 0 bytes

                    | Initial total | 108.48 kB |                32.75 kB

Application bundle generation complete. [1.345 seconds] - 2026-11-02T19:10:12.003Z

Output location: ~/bazarghar/ng-cart/dist/ng-cart

সত্যিকারের run (output-এর পথ ছাঁটা)। পুরো অ্যাপ একটি 108.48 kB-এর JavaScript ফাইল, যার “Estimated transfer size” 32.75 kB. আমাদের নিজের মাপে এই ফাইলের brotli আকার 32.7 kB এসেছে, তাই CLI-এর অনুমানটি brotli-র কাছাকাছি। ফাইলের নামে hash (PERF65PE) থাকে, যাতে ফাইল বদলালে নাম বদলায় আর cache নিরাপদে দীর্ঘ রাখা যায় (পর্ব ৭৯-এ বিস্তারিত)।

৪ · Dependency injection আর inject(): কেউ নিজে বানায় না, চেয়ে নেয়

পর্ব ২৯-এ Express-এর backend-এ dependency injection দেখেছেন: service নিজে repository বানায় না, বাইরে থেকে পায়। Angular এই ধারণাকে framework-এর কেন্দ্রে বসিয়েছে। হোটেলের রিসেপশনের কথা ভাবুন। অতিথি তোয়ালে চাইলে নিজে গুদামে যান না; রিসেপশনে বলেন। রিসেপশন জানে তোয়ালে কোথায় থাকে, একটি আছে কি না, না থাকলে নতুন আনবে। আর পরীক্ষার দিনে (test-এ) রিসেপশন চাইলে নকল তোয়ালেও দিতে পারে, অতিথির কিছু বদলাতে হয় না।

Angular-এ রিসেপশনের নাম injector. @Injectable({ providedIn: 'root' }) মানে “এই service-টি root injector দেবে, পুরো অ্যাপে একটিই”, অর্থাৎ একটি singleton. inject(CartService) মানে “রিসেপশন, আমাকে CartService দাও”। এই ডাক চলতে পারে শুধু নির্দিষ্ট সময়ে: constructor-এ, field-এর প্রাথমিক মানে, বা factory ফাংশনে। এর বাইরে ডাকলে Angular NG0203 error দেয়, যার বার্তা মোটামুটি এমন: inject() must be called from an injection context.

নিচের TypeScript ব্লক একটি ছোট injector-এর শিক্ষণ মডেল, প্রায় ২০ লাইনের মূল অংশ। আসল Angular-এ injector-এর স্তর অনেক বেশি (element, environment, platform), আর token হয় class নিজেই বা InjectionToken.

// শিক্ষণ মডেল: ছোট একটি dependency injection container (Angular-এর inject()-এর ধারণা)
type Token<T> = { name: string; make: () => T };
type Http = { get(url: string): string };
let active: Injector | null = null;          // এখন কোন injector জিনিস বানাচ্ছে

function inject<T>(t: Token<T>): T {
  if (!active) throw new Error(`inject(${t.name}) must run in an injection context`);
  return active.get(t);
}
class Injector {
  private made = new Map<Token<unknown>, unknown>();
  constructor(private label: string, private own = new Map<Token<unknown>, () => unknown>(),
              private up?: Injector) {}
  get<T>(t: Token<T>): T {
    if (this.made.has(t)) { console.log(`  ${this.label}: ${t.name} আগেই আছে`); return this.made.get(t) as T; }
    const make = this.own.get(t) ?? (this.up ? undefined : t.make);
    if (!make) { console.log(`  ${this.label}: ${t.name} নেই, ওপরে জিজ্ঞেস`); return this.up!.get(t); }
    console.log(`  ${this.label}: ${t.name} বানানো হচ্ছে`);
    const prev = active; active = this;
    try { const v = make() as T; this.made.set(t, v); return v; } finally { active = prev; }
  }
}
const HttpT: Token<Http> = { name: 'Http', make: () => ({ get: (u) => `GET ${u}` }) };
const CartT: Token<{ add(id: number): string }> = { name: 'Cart', make: () => {
  const http = inject(HttpT);                  // Cart নিজে Http বানায় না, চায়
  return { add: (id) => http.get(`/api/products/${id}`) };
} };
const root = new Injector('root');
console.log('১) Cart চাই:');      const c1 = root.get(CartT); console.log('  →', c1.add(4));
console.log('২) আবার Cart চাই:'); console.log('  একই object?', root.get(CartT) === c1);
const fakeHttp: Http = { get: (u) => `FAKE ${u}` };
const test = new Injector('test', new Map<Token<unknown>, () => unknown>(
  [[HttpT, () => fakeHttp], [CartT, CartT.make]]), root);
console.log('৩) test injector-এ Cart:'); console.log('  →', test.get(CartT).add(4));
try { inject(HttpT); } catch (e) { console.log('৪) বাইরে থেকে:', (e as Error).message); }

১) Cart চাই:
  root: Cart বানানো হচ্ছে
  root: Http বানানো হচ্ছে
  → GET /api/products/4
২) আবার Cart চাই:
  root: Cart আগেই আছে
  একই object? true
৩) test injector-এ Cart:
  test: Cart বানানো হচ্ছে
  test: Http বানানো হচ্ছে
  → FAKE /api/products/4
৪) বাইরে থেকে: inject(Http) must run in an injection context

1@Injectable({ providedIn: 'root' })2export class CartService {3  private readonly items = signal([]);4}5bootstrapApplication(App, appConfig);6class App {7  cart = inject(CartService);8}9class ProductList {10  cart = inject(CartService);11}

React-এ একই কাজ আপনি Context (পর্ব ১৭) বা Zustand-এর মতো store (পর্ব ১৮) দিয়ে করেন। Angular-এ এটি framework-এর অংশ, আর HttpClient, Router, form, সবই এভাবে inject করা হয়। লাভ: test-এ যেকোনো অংশ নকল দিয়ে বদলানো সহজ, আর বড় দলে সবাই একই পথে কাজ করে। খরচ: নতুনদের জন্য আরেকটি স্তরের ধারণা। নকশার তত্ত্ব Software Engineering কোর্সের dependency injection পর্বে।

৫ · Angular-এ router, HttpClient, form, zoneless আর SSR

এবার পূর্ণ সংস্করণ: ng new bazarghar-ng --ssr দিয়ে বানানো প্রজেক্ট, যাতে @angular/ssr আর একটি Express server ফাইল (src/server.ts) আগে থেকেই থাকে। আমরা তাতে তিনটি জিনিস যোগ করলাম: /api/products নামে একটি Express route, পণ্য-তালিকার component যা HttpClient দিয়ে এই API পড়ে, আর পণ্যের পাতা, যেখানে একটি reactive form-এর পরিমাণ ঘর।

export class ProductList {
  private readonly http = inject(HttpClient);
  protected readonly cart = inject(CartService);
  protected readonly products = toSignal(
    this.http.get<Product[]>('/api/products'), { initialValue: [] });
}

http.get একটি Observable ফেরত দেয়, যা RxJS library-র ধারণা: সময়ের সাথে আসা মানের ধারা। Angular-এর HTTP, router-এর event আর form-এর পরিবর্তন বহু বছর ধরে RxJS দিয়ে চলেছে, আর এর শেখার পথ খাড়া বলে পরিচিত। এখন Angular ধীরে ধীরে signal-এর দিকে যাচ্ছে; toSignal একটি Observable-কে signal বানিয়ে দেয়, তাই template-এ আবার সেই পরিচিত products(). RxJS এখনো আছে, বিশেষ করে জটিল async কাজে (খোঁজার ঘরে টাইপ থামার অপেক্ষা, পুরোনো অনুরোধ বাতিল)।

export class ProductPage {
  readonly id = input.required<string>();   // route param :id
  readonly product = computed(() => PRODUCTS.find(p => p.id === Number(this.id())));
  readonly qty = new FormControl(1, [Validators.min(1), Validators.max(10)]);
}

Router-এ { path: 'products/:id', component: ProductPage }, আর provideRouter(routes, withComponentInputBinding()) দিলে URL-এর :id সরাসরি component-এর input signal-এ চলে আসে। FormControl-এ validator দেওয়া, আর template-এ [formControl]="qty". মান ভুল হলে qty.invalid সত্য হয়। Client-এর এই যাচাই শুধু ব্যবহারকারীর সুবিধার জন্য; server-এ আবার যাচাই লাগবে, যা পর্ব ২১-এ দেখেছেন।

প্রথম চমক: host যাচাই

Build শেষে SSR server চালিয়ে curl করলাম। প্রথম চেষ্টায় পাতা আসেনি, server-এর log-এ এল (সত্যিকারের run):

ERROR: Bad Request ("http://localhost:47391/").
Header "host" with value "localhost:47391" is not allowed.

For more information, see https://angular.dev/best-practices/security#preventing-server-side-request-forgery-ssrf

নতুন প্রজেক্টের angular.json-এ "allowedHosts": [] থাকে, মানে কোনো host বিশ্বাস করা হয় না। কারণ server-এ render করার সময় Angular অনুরোধের Host header থেকে নিজের ঠিকানা বানায়, আর relative URL (যেমন /api/products) সেই ঠিকানায় পাঠায়। আক্রমণকারী ভুয়া Host দিলে server নিজেই ভেতরের কোনো ঠিকানায় অনুরোধ পাঠাতে পারত, যার নাম SSRF. আমরা "allowedHosts": ["localhost"] লিখলাম আর server-কে শুধু 127.0.0.1-এ শুনতে বললাম। তত্ত্ব আছে Cybersecurity কোর্সে।

$ npx ng build
Browser bundles
Initial chunk files  | Names            |  Raw size | Estimated transfer size
main-ZXR4WK2S.js     | main             | 316.32 kB |                86.19 kB
…
Server bundles
Initial chunk files  | Names            |  Raw size
server.mjs           | server           | 919.32 kB |
main.server.mjs      | main.server      | 361.61 kB |
…
Prerendered 0 static routes.
$ PORT=47391 node dist/bazarghar-ng/server/server.mjs
Node Express server listening on http://localhost:47391
GET /api/products

Router, HttpClient, form আর hydration যোগ হওয়ায় browser-এর JavaScript 108 kB থেকে 316 kB হয়েছে (অনুমিত transfer 86 kB হিসেবে)। curl দিয়ে আনা HTML থেকে একটি অংশ (ছাঁটা):

<app-root ng-version="22.2.4" ngh="1" ng-server-context="ssr"><header><a routerlink="/" href="/" jsaction="click:;">বাজারঘর</a> · কার্টে 0টি</header>…<li><a href="/products/1" jsaction="click:;">জামদানি শাড়ি</a> — ৳4500 <button jsaction="click:;">কার্টে যোগ</button></li>…
<script id="ng-state" type="application/json">{"e1178f7a…":{"b":[{"id":1,"name":"জামদানি শাড়ি","price":4500},…],"s":200,"st":"OK","u":"/api/products","rt":"json"},"__nghData__":[…]}</script>

তিনটি জিনিস পড়ুন। এক, পণ্যের তালিকা HTML-এই আছে: server নিজের /api/products ডেকে render করেছে, তাই server log-এ একবার GET /api/products. দুই, ng-state script-এ সেই API-র উত্তর জমা, যাকে বলে HTTP transfer cache. Edge-এ পাতা খুলে Playwright দিয়ে আমরা ব্রাউজারের অনুরোধ গুনেছি: hydration-এর পরে /api/-এ অনুরোধ ০টি. ব্রাউজার একই ডেটা আবার আনেনি। তিন, প্রতিটি বোতামে jsaction চিহ্ন, যা Angular-এর event replay ব্যবস্থার জন্য: hydration শেষ হওয়ার আগে ক্লিক এলে ধরে রেখে পরে চালানো। Hydration-এর মূল সমস্যা পর্ব ৫৬-এ।

একই run-এ দুটি বোতামে ক্লিকের পরে header-এ “কার্টে 2টি”, তারপর link-এ চাপলে পাতা না বদলেই /products/2-এ “নকশিকাঁথা”, আর পরিমাণ ঘরে 0 লিখলে সতর্কবার্তা, 3 লিখলে সতর্কবার্তা উধাও। Browser console ফাঁকা ছিল।

Zone.js থেকে zoneless

পুরোনো Angular-এ zone.js ব্রাউজারের প্রায় সব async API (setTimeout, event, Promise) মুড়ে রাখত, যাতে যেকোনো কিছু ঘটলেই Angular পুরো component গাছ পরীক্ষা করতে পারে। সহজ, কিন্তু ভারী আর অনেক সময় অপ্রয়োজনীয় কাজ। এখন change detection শুরু হয় নির্দিষ্ট সংকেতে: template-এ পড়া signal বদলালে, template-এর event handler চললে, বা markForCheck ডাকলে। Angular v21 থেকে নতুন অ্যাপে এটিই ডিফল্ট, যার নাম zoneless. পুরোনো অ্যাপ provideZoneChangeDetection() দিয়ে আগের আচরণে থাকতে পারে।

একটি সূক্ষ্ম পর্যবেক্ষণ, এক local run থেকে: client-only কার্টে Playwright দিয়ে ক্লিকের ঠিক পরেই লেখা পড়লে React আর Svelte নতুন সংখ্যা দেখিয়েছে, কিন্তু Angular তখনো আগের সংখ্যা দেখিয়েছে। একটি animation frame অপেক্ষা করার পরে তিনটিই একই, সঠিক। কারণ zoneless Angular আপডেট সঙ্গে সঙ্গে করে না, পরের সুযোগের জন্য সূচিতে রাখে, আর একাধিক বদল একসাথে করে। ব্যবহারকারী পার্থক্য টের পান না, কিন্তু test লেখার সময় এটি জানা দরকার: DOM পড়ার আগে Angular-কে স্থির হতে দিন (Angular-এর test টুলে fixture.whenStable() দিয়ে)।

৬ · Svelte 5: compiler, যে নিজেই DOM-আপডেটের কোড লেখে

Svelte-এ একটি component হলো .svelte ফাইল: ওপরে <script>, নিচে সাধারণ HTML-এর মতো markup, আর চাইলে <style>. একই কার্ট, Vite-এর svelte-ts template দিয়ে বানানো:

<script lang="ts">
  import { PRODUCTS, type Product } from './lib/products';

  let items = $state<Product[]>([]);
  let count = $derived(items.length);
  let total = $derived(items.reduce((sum, p) => sum + p.price, 0));

  function add(p: Product) { items.push(p); }
</script>

<h1>বাজারঘর</h1>
<p>কার্টে {count}টি · মোট ৳{total}</p>
<ul>
  {#each PRODUCTS as p (p.id)}
    <li>{p.name} — ৳{p.price}
      <button onclick={() => add(p)}>কার্টে যোগ</button></li>
  {/each}
</ul>
{#if count > 0}
  <button onclick={() => (items = [])}>কার্ট খালি</button>
{/if}

$state, $derived, $effect আর $props-কে Svelte বলে rune: $ দিয়ে শুরু হওয়া বিশেষ চিহ্ন, যা দেখতে function-এর মতো কিন্তু আসলে compiler-এর জন্য নির্দেশ। এগুলো import করতে হয় না। items.push(p) লক্ষ করুন: React-এ এভাবে array বদলালে কিছুই ঘটত না (পর্ব ১০), কিন্তু Svelte 5-এর $state array আর object-কে JavaScript-এর Proxy দিয়ে মুড়ে রাখে, তাই ভেতরের বদলও ধরা পড়ে। (p.id) হলো key. Event-এর জন্য সাধারণ HTML attribute onclick; Svelte 4-এর on:click পুরোনো ধরন।

Component-এ বাইরে থেকে মান আসে $props দিয়ে: let { product } = $props();. আর $effect হলো বাইরের দুনিয়ার সাথে যোগাযোগের জন্য, যেমন একটি chart library-কে নতুন ডেটা দেওয়া। Svelte-এর docs স্পষ্ট সতর্ক করে: একটি state থেকে আরেকটি হিসাব করতে $effect নয়, $derived লিখুন। React-এর “useEffect-এ derived state রাখবেন না” নিয়মের (পর্ব ১৩) সাথে হুবহু মিল।

Compiler আসলে কী লেখে

কথা নয়, আসল আউটপুট দেখি। ছোট একটি component Svelte-এর নিজের compile ফাংশনে দিলাম। সত্যিকারের run, Svelte 5.57.3:

// ইনপুট: let count = $state(0);
//        <p>কার্টে {count}টি</p>
//        <button onclick={() => count++}>কার্টে যোগ</button>
import 'svelte/internal/disclose-version';
import * as $ from 'svelte/internal/client';

var root = $.from_html(`<p> </p> <button>কার্টে যোগ</button>`, 1);

export default function Cart($$anchor) {
	let count = $.state(0);
	var fragment = root();
	var p = $.first_child(fragment);
	var text = $.only_child(p);
	var button = $.sibling(p, 2);

	$.template_effect(() => $.set_text(text, `কার্টে ${$.get(count) ?? ''}টি`));
	$.delegated('click', button, () => $.update(count));
	$.append($$anchor, fragment);
}

$.delegate(['click']);

পুরো গল্পটি এই কয়েক লাইনে। Markup একবার HTML string থেকে তৈরি হয় from_html দিয়ে। Compiler আগেই জানে কোন text node বদলাতে পারে, তাই সরাসরি তার reference রাখে, নাম text. template_effect হলো সেই signal-effect, যা অংশ ২-এ বানিয়েছিলাম; ভেতরে $.get(count) পড়ে নির্ভরতা জানায়। Click-এর জন্য প্রতিটি বোতামে আলাদা listener নয়: $.delegate(['click']) root-এ একটি listener বসায়, যাকে বলে event delegation. কোনো virtual DOM নেই, কোনো diff নেই।

নিচের ব্লকে একই ধারণার একটি ছোট শিক্ষণ মডেল: একটি “compiler”, যা template string পড়ে DOM-আপডেটের কোড লেখে, তারপর সেই কোড চালানো হয়।

// শিক্ষণ মডেল: ছোট একটি "compiler" — template থেকে DOM-আপডেটের কোড বানায়
function compile(tpl) {
  const [, tag, body] = tpl.match(/^<(\w+)>(.*)<\/\1>$/);
  const parts = body.split(/\{(\w+)\}/);          // লেখা, নাম, লেখা, নাম…
  const deps = parts.filter((_, i) => i % 2 === 1);
  const text = parts.map((p, i) => (i % 2 ? '${s.' + p + '}' : p)).join('');
  return [
    `const el = doc.create('${tag}');`,
    `el.textContent = \`${text}\`;`,
    `return (changed) => {`,
    `  if (${deps.map((d) => `changed.has('${d}')`).join(' || ')}) el.textContent = \`${text}\`;`,
    `};`,
  ].join('\n');
}
const doc = { writes: 0, create(tag) {
  let t = '';
  return { get textContent() { return t; },
           set textContent(v) { t = v; doc.writes++; console.log(`  DOM লেখা: <${tag}> ${v}`); } };
} };

const code = compile('<p>কার্টে {count}টি · মোট ৳{total}</p>');
console.log('--- build-এর সময় বানানো কোড ---\n' + code);
const s = { count: 0, total: 0, user: 'রহিম' };
console.log('--- চালানো ---');
const updateCart = new Function('doc', 's', code)(doc, s);
const updateHello = new Function('doc', 's', compile('<h2>স্বাগতম {user}</h2>'))(doc, s);
function set(patch) {                            // কোন অংশ কোন নামের ওপর নির্ভর করে, compiler আগেই জানে
  Object.assign(s, patch);
  const changed = new Set(Object.keys(patch));
  updateCart(changed); updateHello(changed);
}
console.log('count আর total একসাথে বদল:'); set({ count: 1, total: 4500 });
console.log('user বদল:'); set({ user: 'করিম' });
console.log('মোট DOM লেখা:', doc.writes);

--- build-এর সময় বানানো কোড ---
const el = doc.create('p');
el.textContent = `কার্টে ${s.count}টি · মোট ৳${s.total}`;
return (changed) => {
  if (changed.has('count') || changed.has('total')) el.textContent = `কার্টে ${s.count}টি · মোট ৳${s.total}`;
};
--- চালানো ---
  DOM লেখা: <p> কার্টে 0টি · মোট ৳0
  DOM লেখা: <h2> স্বাগতম রহিম
count আর total একসাথে বদল:
  DOM লেখা: <p> কার্টে 1টি · মোট ৳4500
user বদল:
  DOM লেখা: <h2> স্বাগতম করিম
মোট DOM লেখা: 4

নিজে দেখুন: শুধু বদলানো node

Framework ছাড়া সাধারণ DOM দিয়ে fine-grained আপডেট কেমন দেখায়, নিচের live ব্লকে দেখুন। MutationObserver প্রতিটি DOM বদল console-এ লেখে। পাতা খোলার সময় script নিজেই দুটি বোতামে ক্লিক করে; তারপর আপনি আরও চাপুন আর দেখুন, পণ্যের তালিকার কোনো node কখনো বদলায় না।

<p>কার্টে <b id="count">0</b>টি · মোট ৳<b id="total">0</b></p>
<ul id="list"></ul>
<script>
const products = [['জামদানি শাড়ি', 4500], ['নকশিকাঁথা', 2800], ['পাটের ব্যাগ', 450]];
let count = 0, total = 0;
const countText = document.getElementById('count').firstChild;   // একটি text node
const totalText = document.getElementById('total').firstChild;
const list = document.getElementById('list');
for (const [name, price] of products) {
  const li = document.createElement('li');
  li.textContent = `${name} — ৳${price} `;
  const btn = document.createElement('button');
  btn.textContent = 'কার্টে যোগ';
  btn.onclick = () => {                // শুধু দুটি text node বদলায়
    count += 1; total += price;
    countText.data = count; totalText.data = total;
  };
  li.append(btn); list.append(li);
}
new MutationObserver((recs) => recs.forEach((r) =>
  console.log('বদলাল:', r.target.parentNode.id, '→', r.target.data)
)).observe(document.body, { characterData: true, subtree: true, childList: true });
list.querySelectorAll('button')[0].click();
setTimeout(() => list.querySelectorAll('button')[2].click(), 0);
</script>

বদলাল: count → 1
বদলাল: total → 4500
বদলাল: count → 2
বদলাল: total → 4950

৭ · SvelteKit: file routing, load, form action আর adapter

Next.js যেমন React-এর জন্য, SvelteKit তেমনি Svelte-এর জন্য full-stack framework: routing, SSR, ডেটা আনা, form, আর বিভিন্ন জায়গায় deploy. প্রজেক্ট বানানোর অফিসিয়াল টুল এখন sv. সত্যিকারের run:

$ npx sv@1.2.0 create bazarghar-kit --template minimal --types ts \
    --add sveltekit-adapter="adapter:node" --install npm
┌  Welcome to the Svelte CLI! (v1.2.0)
│
◆  Project created
│
◆  Successfully setup add-ons: sveltekit-adapter
…
◆  Successfully installed dependencies with npm
…
└  You're all set!

SvelteKit 3-এ কয়েকটি বড় বদল এসেছে, যা অনেক টিউটোরিয়াল আর AI এখনো জানে না। অফিসিয়াল migration guide আর আমাদের তৈরি প্রজেক্ট দুটিই দেখায়: svelte.config.js আর নেই, config যায় vite.config.ts-এ sveltekit({ adapter: adapter() })-এর ভেতরে; $lib-এর বদলে #lib, যা package.json-এর imports-এ লেখা; আর $app/stores সরিয়ে দেওয়া হয়েছে, এখন $app/state.

Routing হয় folder দিয়ে (file-based routing), Next.js-এর মতো, তবে ফাইলের নামে + চিহ্ন:

src/routes/
├── +layout.svelte                  সব পাতার কাঠামো
├── +page.svelte                    /  (পণ্যের তালিকা)
├── +page.server.ts                 /  -এর load আর action, শুধু server-এ
├── products/[id]/
│   ├── +page.ts                    load, server আর browser দুই জায়গায়
│   └── +page.svelte                /products/1
└── api/products/[id]/+server.ts    GET /api/products/1 (JSON)

import { fail } from '@sveltejs/kit';
import { PRODUCTS } from '#lib/server/products.ts';
import type { Actions, PageServerLoad } from './$types';

export const load: PageServerLoad = ({ cookies }) => {
  const ids: number[] = JSON.parse(cookies.get('cart') ?? '[]');
  console.log(`load: cart=${JSON.stringify(ids)}`);
  return { products: PRODUCTS, cartCount: ids.length };
};

export const actions: Actions = {
  add: async ({ request, cookies }) => {
    const id = Number((await request.formData()).get('id'));
    if (!PRODUCTS.some(p => p.id === id)) {
      return fail(400, { error: 'এমন পণ্য নেই' });
    }
    const ids: number[] = JSON.parse(cookies.get('cart') ?? '[]');
    ids.push(id);
    cookies.set('cart', JSON.stringify(ids), { path: '/', httpOnly: true });
    console.log(`action add: id=${id}`);
    return { added: id };
  },
};

<script lang="ts">
  import { enhance } from '$app/forms';
  import type { PageProps } from './$types';

  let { data, form }: PageProps = $props();
</script>

<h1>বাজারঘর</h1>
<p>কার্টে {data.cartCount}টি</p>
{#if form?.error}<p role="alert">{form.error}</p>{/if}
<ul>
  {#each data.products as p (p.id)}
    <li>
      <a href="/products/{p.id}">{p.name}</a> — ৳{p.price}
      <form method="POST" action="?/add" use:enhance>
        <input type="hidden" name="id" value={p.id} />
        <button>কার্টে যোগ</button>
      </form>
    </li>
  {/each}
</ul>

load ফাংশন পাতার ডেটা আনে; যা ফেরত দেয়, তা component-এ data হিসেবে আসে। +page.server.ts-এর load শুধু server-এ চলে, তাই cookie, database বা secret এখানে নিরাপদ। +page.ts-এর load (পণ্যের পাতায়) প্রথম লোডে server-এ, পরের navigation-এ browser-এ চলে; তাই সেখানে কখনো secret রাখবেন না। Form action হলো সাধারণ HTML form-এর POST গ্রহণ করার server ফাংশন। action="?/add" মানে add নামের action. fail(400, …) যাচাই ব্যর্থ হলে ডেটাসহ ফেরত পাঠায়, আর পাতায় তা form হিসেবে আসে। React-এর Server Action (পর্ব ৫৪)-এর সাথে মিল লক্ষ করুন, যদিও SvelteKit-এর action সাধারণ HTTP POST, যা আপনি curl দিয়েও পাঠাতে পারেন।

আসল server, আসল অনুরোধ

vite build-এর পরে node build দিয়ে server চালালাম। প্রথম curl POST-এ এল (সত্যিকারের run):

$ curl -si -X POST -H "Origin: http://127.0.0.1:47388" -d id=1 "127.0.0.1:47388/?/add"
HTTP/1.1 403 Forbidden
content-type: application/json

{"message":"Cross-site POST form submissions are forbidden"}

এটি SvelteKit-এর CSRF পাহারা: form POST-এর Origin header নিজের ঠিকানার সাথে না মিললে 403. কিন্তু আমরা তো নিজের ঠিকানাই দিয়েছি! কারণ খুঁজতে adapter-node-এর উৎস কোড পড়লাম: অন্য কিছু বলা না থাকলে এটি নিজের protocol ধরে নেয় https, কারণ production-এ সাধারণত সামনে একটি TLS-যুক্ত proxy থাকে। Local-এ http দিয়ে চালালে তাই অমিল। সমাধান: proxy যে header পাঠায় (PROTOCOL_HEADER=x-forwarded-proto) সেটি বলে দেওয়া, বা paths.origin ঠিক করা। ভুয়া Origin: http://evil.example দিলে একইভাবে 403 এসেছে, যা আমরা চাই। Cookie আর CSRF-এর তত্ত্ব Cybersecurity কোর্সে।

ঠিক Origin দিয়ে আবার (সত্যিকারের run, JSON চাওয়া হয়েছে যেমন use:enhance চায়):

--- add 1
{"type":"success","status":200,"location":"/","data":"[{\"added\":1},1]"} [200]
--- add 4
{"type":"success","status":200,"location":"/","data":"[{\"added\":1},4]"} [200]
--- invalid id
{"type":"failure","status":400,"location":"/","data":"[{\"error\":1},\"এমন পণ্য নেই\"]"} [400]

ভুল id-তে উত্তরের HTTP status 400; migration guide অনুযায়ী SvelteKit 3 থেকে enhance করা action-এর উত্তরে fail(...)-এর status-ই যায়, আগে সবসময় 200 যেত। data-র অদ্ভুত চেহারাটি devalue নামের একটি serialization ধরন, যা Date বা Map-এর মতো মানও পাঠাতে পারে।

এবার Edge-এ, Playwright দিয়ে, একবার JavaScript চালু আর একবার বন্ধ রেখে প্রথম পণ্যে “কার্টে যোগ” চাপা হলো (সত্যিকারের run, অনুরোধের তালিকা ছাঁটা):

--- JS on | start: কার্টে 0টি
after add: কার্টে 1টি | url: /
requests: ['POST /?/add', 'GET /__data.json?x-sveltekit-trailing-slash=1&x-sveltekit-invalidated=01']
--- JS off | start: কার্টে 0টি
after add: কার্টে 1টি | url: /?/add
server log: … load: cart=[] | action add: id=1 | load: cart=[1] | load: cart=[] | action add: id=1 | load: cart=[1]

JavaScript চালু থাকলে use:enhance form-টি fetch দিয়ে পাঠিয়েছে, তারপর __data.json থেকে শুধু load-এর নতুন ডেটা এনেছে; পাতা reload হয়নি, URL বদলায়নি। JavaScript বন্ধ থাকলেও কাজ হয়েছে: ব্রাউজার সাধারণ form POST করেছে, server action চালিয়ে আবার load চালিয়ে পুরো পাতা পাঠিয়েছে। এটিই progressive enhancement, আর ধীর নেটওয়ার্কে বা JavaScript আসার আগের মুহূর্তে এর মূল্য অনেক।

Adapter: কোথায় চলবে

Adapter build-এর আউটপুটকে নির্দিষ্ট জায়গার জন্য সাজায়: Node server (adapter-node), শুধু static ফাইল (adapter-static), বা বিভিন্ন hosting platform-এর নিজস্ব adapter. আমাদের একই প্রজেক্টে adapter বদলে adapter-static 4.0.1 দিলাম। সত্যিকারের run, দুই চেষ্টা (ছাঁটা):

@sveltejs/adapter-static: all routes must be fully prerenderable, but found the following routes that are dynamic:
  - src\routes/
  - src\routes/api/products/[id]
  - src\routes/products/[id]
…
error during build:
[Error: Encountered dynamic routes]

# root +layout.ts-এ export const prerender = true যোগ করার পরে:
Cannot prerender pages with actions
https://svelte.dev/e/kit/prerender_actions
500 GET /
Failed to prerender `/`

Build নিজেই থামিয়ে দিয়েছে, আর এটি ভালো। Static hosting-এ কোনো server নেই, তাই form action চালানোর কেউ নেই, আর cookie পড়া load-ও build-এর সময়ে অর্থহীন। পর্ব ৫৫-এর ভাষায়: যে পাতা প্রতিটি ব্যবহারকারীর জন্য আলাদা, সেটি prerender করা যায় না। Static adapter সাজে ব্লগ, docs বা মার্কেটিং পাতায়; কার্ট-চেকআউটের জন্য Node বা অন্য server-চালিত adapter লাগবে।

৮ · একই “বাজারঘর”, তিন framework: কোড, bundle আর মানসিক মডেল

তুলনা ন্যায্য রাখতে তিনটি অ্যাপ হুবহু একই কাজ করে: ছয়টি পণ্যের তালিকা, প্রতিটিতে “কার্টে যোগ”, ওপরে সংখ্যা আর মোট দাম, কার্ট খালি করার বোতাম। একই products.ts, কোনো router বা CSS নেই, client-only. React আর Svelte Vite 8.3.5-এর অফিসিয়াল template থেকে (react-ts, svelte-ts), Angular ng new থেকে। তিনটিই Edge-এ Playwright দিয়ে চালিয়ে যাচাই করা: দুই ক্লিকে “কার্টে 2টি · মোট ৳4950”, খালি করলে 0. Bundle মাপা হয়েছে আমাদের নিজের script-এ, Node-এর zlib দিয়ে (gzip level 9 আর brotli দুটিই)।

$ node measure.mjs
angular  js raw 108.5 kB  gzip 36.3 kB  brotli 32.7 kB
svelte   js raw 34.5 kB  gzip 13.5 kB  brotli 12.2 kB
react    js raw 220.4 kB  gzip 68.2 kB  brotli 58.7 kB
angular  non-blank lines 23 + 11 = 34
svelte   non-blank lines 18 = 18
react    non-blank lines 21 = 21

সংখ্যাগুলো পড়ার সময় সাবধান থাকুন। এগুলো একটি ছোট অ্যাপের একটি run, সাধারণ রায় নয়। ছোট অ্যাপে মাপের বেশিরভাগই framework-এর নিজের runtime: React-এর 68 kB-এর প্রায় সবটাই react-dom, আমাদের ২১ লাইনের নয়। অ্যাপ বড় হলে ছবি বদলায়। Svelte-এ প্রতিটি component-এর জন্য compiler আলাদা কোড লেখে, তাই component বাড়ার সাথে কোড বাড়ে; React আর Angular-এ runtime একবারই, component-এর কোড তুলনায় ছোট। কোথায় গিয়ে রেখা দুটি কাটাকাটি করে, তা অ্যাপের ধরনের ওপর নির্ভর করে, আর এ নিয়ে সম্প্রদায়ে মতভেদ আছে। Angular-এর ৩৪ লাইনে আলাদা service ফাইল আছে, কারণ এটি Angular-এর স্বাভাবিক ধরন; চাইলে signal component-এর ভেতরেও রাখা যেত। আর মনে রাখুন, Svelte-ও “runtime-হীন” নয়: আমাদের run-এ 34.5 kB, যার বড় অংশ svelte/internal.

Router, HTTP আর SSR যোগ করলে কী হয়, আমাদের অন্য দুটি build-ও দেখায়: Angular-এর SSR সংস্করণে browser-এর JavaScript 316.32 kB raw, CLI-এর অনুমিত transfer 86.19 kB. SvelteKit প্রজেক্টে দুটি পাতা আর একটি API মিলিয়ে Vite-এর তালিকার সব client chunk যোগ করলে প্রায় 101.8 kB raw, gzip প্রায় 40.5 kB, যা route ধরে ভাগ হয়ে নামে। আবারও, একই কাজের হুবহু তুলনা নয়।

মানসিক মডেল

৯ · কে ব্যবহার করে, আর কখন কোনটি বেছে নেবেন

Angular দীর্ঘদিন ধরে বড় প্রতিষ্ঠান আর বড় দলের পছন্দ হিসেবে পরিচিত: ব্যাংক, বীমা, সরকারি বা প্রতিষ্ঠানের ভেতরের ড্যাশবোর্ড, যেখানে অনেক বছর ধরে অনেক মানুষ একই কোডে কাজ করেন। Angular দল জানায় Google-এর ভেতরে অনেক অ্যাপ এতে চলে। এর পেছনে কারণ আছে: একটি পরিষ্কার release নীতি। angular.dev-এর release পাতা অনুযায়ী প্রতিটি major version মোট প্রায় ২৪ মাস support পায় (১২ মাস active, ১২ মাস LTS), আর v22 থেকে major আসবে বছরে একবার; আগে ছয় মাসে একবার আসত। ng update অনেক বদল নিজে থেকে কোডে বসিয়ে দেয়। Svelte তুলনায় ছোট দল, স্টার্টআপ, সংবাদমাধ্যমের interactive পাতা আর এমন জায়গায় জনপ্রিয় বলে শোনা যায়, যেখানে ছোট bundle আর দ্রুত লেখা গুরুত্বপূর্ণ। এসব ধারণা জনশ্রুতি আর জরিপের সাধারণ চিত্র; আমরা কোনো বাজার-ভাগের সংখ্যা দিচ্ছি না, কারণ উৎসভেদে সংখ্যা অনেক আলাদা।

বাংলাদেশে বা অন্য কোথাও কোন framework-এর চাহিদা কত, তার নির্ভরযোগ্য সংখ্যা আমরা দিচ্ছি না, আর কোনোটিকে “বেশি চাহিদার” বলেও দাবি করছি না। চাহিদা জায়গা আর সময়ভেদে বদলায়; সিদ্ধান্তের আগে নিজের শহরের চাকরির বিজ্ঞাপন আর নিজের দলের প্রয়োজন নিজে যাচাই করুন।

শেষ সারিটিই প্রায়ই সবচেয়ে গুরুত্বপূর্ণ। Framework হলো একটি দীর্ঘমেয়াদি দলগত সিদ্ধান্ত, আর ভালো দল যেকোনোটিতে ভালো অ্যাপ বানায়। Stack বাছাইয়ের পূর্ণ ছক পর্ব ৮৫-তে। পরের পর্বগুলোতে (৬৮ থেকে ৭১) আমরা backend-এর দিকে যাব: Django, FastAPI, Laravel, Spring Boot আর Rails.

১০ · AI-এর যুগে: পুরোনো Angular আর পুরোনো Svelte থেকে সাবধান

Angular আর Svelte দুটিই গত তিন বছরে চেহারা বদলেছে, আর AI-এর শেখার ডেটার বড় অংশ পুরোনো যুগের। তাই AI প্রায়ই এমন কোড দেয়, যা চলে, কিন্তু আজকের পথ নয়, বা SvelteKit 3-এ আর চলেই না। মজার বিষয়: Angular CLI আর sv দুটিই এখন AI টুলের জন্য নির্দেশিকা ফাইল বানানোর option দেয় (--ai-config, ai-tools add-on), কারণ framework দলগুলো নিজেরাই এই সমস্যা জানে।

AI-এর Angular বা Svelte কোড নেওয়ার আগে

• ng build বা vite build আর svelte-check কোনো error বা deprecated warning ছাড়া চলেছে
• প্রতিটি API আমার version-এর angular.dev বা svelte.dev-এ আছে; SvelteKit 3-এর migration guide-এর সাথে মিলিয়েছি
• নতুন package নেই, বা থাকলে npm-এ সত্যিই আছে আর bundle কতটা বাড়াল মেপেছি
• Secret শুধু server-only ফাইলে; build-এর client JavaScript-এ খুঁজে দেখেছি
• CSRF, allowedHosts বা অন্য নিরাপত্তা যাচাই বন্ধ করা হয়নি
• Diff পড়েছি, আর অন্তত একটি test বা ব্রাউজারে হাতে চালিয়ে আচরণ দেখেছি