แนะนำ — ทำไม Svelte ถึงน่าสนใจสำหรับ React Developer

คุณรู้จัก React อยู่แล้ว คุณเข้าใจ component, props, state และ render cycle Svelte สร้างขึ้นบนแนวคิดเดียวกันแต่แก้ปัญหาต่างออกไป — ในฐานะ compiler ไม่ใช่ runtime library คอร์สนี้จะแสดงให้คุณเห็นอย่างชัดเจนว่าอะไรเปลี่ยนไป อะไรยังคุ้นเคย และวิธีนำ React intuition ของคุณมาใช้กับ Svelte 5

Svelte คือ compiler ไม่ใช่ runtime

React ส่ง JavaScript runtime (~45 kB gzip สำหรับ React + ReactDOM) ที่รันใน browser และจัดการ virtual DOM tree ทุกครั้งที่เรียก setState จะเกิด reconciliation pass: React diff vDOM ใหม่กับอันก่อนหน้าแล้ว patch real DOM

Svelte ทำงานที่ build time ไฟล์ .svelte ของคุณถูก compile เป็น JavaScript ที่กระชับและปราศจาก framework ที่คุยกับ DOM โดยตรง ไม่มี virtual DOM ให้ diff ไม่มี reconciler ที่ต้องส่งไป ผลลัพธ์คือ document.createElement และ element.textContent = ล้วนๆ — สิ่งที่ browser ต้องการน้อยที่สุด

ผลที่เกิดขึ้นจริง:

Bundle ขนาดเล็กลง Svelte app แทบไม่มี framework overhead เลย “Hello World” Svelte component compile ออกมาได้เพียงไม่กี่ร้อย bytes
อัปเดตเร็วขึ้น แทนที่จะ diff vDOM tree โค้ด Svelte ที่ compile แล้วจะอัปเดต DOM node เฉพาะที่เปลี่ยนจริงๆ โดยตรง
ไม่ต้อง import React component ของคุณเป็น standalone compiled module

Boilerplate น้อยลง

React ต้องการการประกาศ state อย่างชัดเจน (useState) และ setter function แยกต่างหากสำหรับทุก reactive state ใน Svelte 5 คุณประกาศ reactive state ด้วย $state() และ mutate ด้วยการ assign ตรงๆ — compiler จะ instrument การ mutation ให้คุณเอง

function Greeting() {
  const [name, setName] = React.useState('World');
  return (
    <div>
      <input value={name} onChange={e => setName(e.target.value)} />
      <p>Hello, {name}!</p>
    </div>
  );
}

<script>
  let name = $state('World');
</script>

<input bind:value={name} />
<p>Hello, {name}!</p>

สังเกตสิ่งที่หายไปในเวอร์ชัน Svelte:

ไม่ต้อง import useState, ไม่มี setter function (setName)
name ถูกประกาศครั้งเดียวด้วย $state() — แค่ assign ค่าใหม่ก็เพียงพอที่จะ trigger re-render
bind:value จัดการ two-way sync ระหว่าง input กับตัวแปรให้เอง (ไม่ต้องต่อสาย onChange)

Scoped styles ในตัว

React ไม่มีความเห็นเกี่ยวกับ CSS ทีมต่างๆ ใช้ CSS Modules, styled-components, Tailwind หรือผสมกัน Svelte ส่ง scoped styles มาเป็น first-class language feature: <style> block ภายในไฟล์ .svelte จะ ถูก scope โดยอัตโนมัติ ให้กับ component นั้น ไม่ต้องการ tooling เพิ่มเติม ไม่มีการตั้งค่า class name mangling ไม่มี runtime overhead

<style>
  /* This rule only affects <p> tags inside THIS component */
  p { color: steelblue; font-size: 1.2rem; }
</style>

ตอน compile Svelte สร้าง attribute เฉพาะ (เช่น svelte-abc123) และเขียน selector ใหม่เป็น p[svelte-abc123] styles ภายนอกไม่รั่วเข้ามา styles ของคุณก็ไม่รั่วออกไป

ภาพรวมของคอร์ส

โมดูล	หัวข้อ
แนะนำ	Compiler model, reactivity พื้นฐาน, scoped styles
Components	Props, events, slots/snippets, lifecycle
Reactivity	`$state`, `$derived`, `$effect`, stores
Bindings	`bind:value`, `bind:checked`, `bind:this`
Control Flow	`{#if}`, `{#each}`, `{#await}`, `{#key}`
Styling	Scoped styles, global styles, CSS variables, transitions
Routing	SvelteKit pages, layouts, load functions
Advanced	Context API, actions, custom stores, TypeScript

Component Svelte 5 ตัวแรกของคุณ

function App() {
  const [name, setName] = React.useState('React developer');
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <input value={name} onChange={e => setName(e.target.value)} />
      <p>Hello, {name}!</p>
      <button onClick={() => setCount(c => c + 1)}>
        Clicked {count} {count === 1 ? 'time' : 'times'}
      </button>
    </div>
  );
}

<script>
  let name = $state('Svelte developer');
  let count = $state(0);
</script>

<input bind:value={name} />
<p>Hello, {name}!</p>
<button onclick={() => count++}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

ลองเล่นดูเลย

Playground ด้านล่างนี้เป็น Svelte 5 component ที่สมบูรณ์และแก้ไขได้ เปลี่ยนชื่อ กดปุ่ม ปรับแต่ง style — ทุกอย่างรันใน browser ของคุณ

SvelteOpen in Svelte Playground ↗ (copies code)

<script>
  let name = $state('React developer');
  let count = $state(0);

  let greeting = $derived('Hello, ' + name + '!');
</script>

<div class="card">
  <label>
    Your name
    <input bind:value={name} placeholder="Type your name…" />
  </label>

  <p class="greeting">{greeting}</p>

  <button onclick={() => count++}>
    You clicked {count} {count === 1 ? 'time' : 'times'}
  </button>
</div>

<style>
  .card {
    font-family: sans-serif;
    max-width: 320px;
    padding: 1.5rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
  }
  input {
    padding: 0.4rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
  }
  .greeting {
    font-size: 1.25rem;
    font-weight: bold;
    color: #ff3e00;
    margin: 0;
  }
  button {
    padding: 0.5rem 1rem;
    background: #ff3e00;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
  }
  button:hover { background: #cc3200; }
</style>

🔀 React runtime vs Svelte compiler

Runtime model — React ส่ง JavaScript runtime library ที่รันใน browser ของทุกคน Svelte compile component เป็น vanilla JS ตอน build time ไม่มี framework code ถูกส่งไป
Virtual DOM — React สร้าง virtual DOM tree ในทุก render และ diff เพื่อหาการเปลี่ยนแปลง Svelte สร้าง DOM mutation โดยตรง (element.textContent = value) ไม่มีขั้นตอน diffing
Boilerplate — React ต้องการ useState และ setter สำหรับทุก reactive value Svelte 5 ใช้การ assign $state() compiler จัดการ reactivity wiring อัตโนมัติ
Styles — React ไม่มี scoping ในตัว ทีมต้องเพิ่ม CSS Modules, styled-components หรือ Tailwind Svelte scope <style> block ให้กับ component อัตโนมัติโดยไม่ต้องตั้งค่าอะไร
Bundle size — React + ReactDOM คือ ~45 kB gzip ก่อน app code ของคุณ Svelte component compile เป็น JavaScript ไม่กี่ร้อย bytes ที่ไม่มี framework ขนาด app รวมโตขึ้นแค่ตาม code ของคุณเอง