Svelte va SvelteKit nima va ular React dan nimasi bilan farq qiladi

Qisqa javob

Svelte — React yoki Vue kabi interfeys yaratish vositasi. Asosiy farqi: ishning katta qismi yig‘ish (build) bosqichida bajariladi. Kompilyator komponentlaringizni o‘qiydi va DOM ni nuqtaviy yangilaydigan oddiy JavaScript yaratadi. Brauzerda virtual DOM ham, daraxtlarni solishtirish ham yo‘q.

SvelteKit — Svelte ustidagi freymvork, taxminan React uchun Next.js qanday bo‘lsa, shunday. U routing, server tomonda render qilish, ma’lumot yuklash, formalarni qayta ishlash va turli hostinglar uchun yig‘ishni o‘z zimmasiga oladi.

Runtime o‘rniga kompilyator

React brauzerga kutubxona yuboradi: u har bir holat o‘zgarishida komponentni qayta chizadi va natijani oldingisi bilan solishtiradi. Svelte esa razmetkaning qaysi qismlari qaysi o‘zgaruvchilarga bog‘liqligini oldindan biladi va faqat ularni yangilaydigan kod yozadi.

Amalda bu nimani beradi:

• kichik va o‘rta ilovalarda bandl kichikroq — katta runtime yo‘q;
• qo‘lda optimallashtirish kamroq: ortiqcha renderlardan qochish uchun useMemo va useCallback analoglari kerak emas;
• komponentlar HTML ga yaqin: razmetka, <script> va <style> bitta .svelte faylida, uslublar standart bo‘yicha izolyatsiyalangan.

Runes bilan reaktivlik

Svelte ning joriy versiyalarida reaktivlik runes — $ belgisi bilan boshlanuvchi maxsus funksiyalar orqali yoziladi:

<script>
  let count = $state(0);
  let double = $derived(count * 2);

  $effect(() => {
    console.log('count o‘zgardi:', count);
  });
</script>

<button onclick={() => count++}>
  {count} × 2 = {double}
</button>

• $state — reaktiv qiymat, uni oddiy o‘zlashtirish bilan o‘zgartirasiz;
• $derived — hisoblanadigan qiymat, o‘zi qayta hisoblanadi;
• $effect — bog‘liqliklar o‘zgarganda ishga tushadigan qo‘shimcha effekt;
• $props — komponent props larini olish.

Taqqoslash uchun: React da xuddi shu narsa uchun useState kerak, effekt bog‘liqliklarini esa qo‘lda sanab o‘tasiz.

SvelteKit nima qo‘shadi

• Fayllarga asoslangan routing: src/routes/blog/[slug] papkasi /blog/:slug sahifasiga aylanadi.
• SSR, statik generatsiya va SPA — rejimni har bir sahifa uchun tanlash mumkin.
• load funksiyalari — ma’lumotni serverda yoki klientda olish uchun.
• Form actions — brauzerda JavaScript bo‘lmasa ham ishlaydigan server tomonidagi formalar.
• Adapterlar — Node.js, statik hosting va serverless platformalarga deploy uchun.

React bilan taqqoslash

Bandl hajmidagi farq yengil sahifalarda ko‘proq seziladi. Katta ilovalarda vaznni ko‘pincha freymvork emas, sizning kodingiz va uchinchi tomon kutubxonalari belgilaydi.

Svelte ni qachon tanlash kerak

Svelte o‘rinli, agar:

• zaif qurilmalar va sekin internetda yuklanish tezligi muhim bo‘lsa;
• loyiha lending, kontent sayt, vidjet yoki boshqa saytga joylanadigan interfeys bo‘lsa;
• jamoa kichik va Svelte ni biladi yoki o‘rganishga tayyor bo‘lsa;
• React ga xos kutubxonalar (murakkab jadvallar, muharrirlar, dizayn-tizimlar) kerak bo‘lmasa.

React ishonchliroq, agar:

• loyiha katta va uzoq muddatli bo‘lib, jamoa tarkibi o‘zgarib tursa;
• React Native da mobil versiya kerak bo‘lsa;
• React ekotizimidagi tayyor komponent va integratsiyalarga tayansangiz.

Tanlashdagi keng tarqalgan xatolar

• Kerakli kutubxonalarni tekshirmay, faqat benchmarklarga qarab freymvork tanlash.
• Yollashni unutish: bir yildan keyin loyihani yangi odamlar qo‘llab-quvvatlaydi.
• Svelte ning eski sintaksisini ($: va export let) migratsiya rejasisiz runes bilan aralashtirish.