Svelte Foundations & Mental Model

ไอเดียในประโยคเดียว

Svelte คือ compiler ที่อ่าน component ของคุณตอน build time แล้ว generate JavaScript เล็ก ๆ แบบ imperative ที่อัปเดต DOM แบบเจาะจง — ไม่มี virtual DOM และไม่มี framework runtime มานั่ง diff UI ทุกครั้งที่มีการเปลี่ยนแปลง “framework” แทบจะหายไปในผลลัพธ์

ทุกฟีเจอร์ของ Svelte — runes, snippets, scoped styles, transitions — เป็นผลมาจากสิ่งนี้: เพราะ Svelte compile code ของคุณ compiler จึงเปลี่ยน count++ ให้กลายเป็นการอัปเดต DOM เท่าที่การเปลี่ยนแปลงนั้นต้องการพอดี และส่งอย่างอื่นไปแทบไม่มีเลย

โมดูลนี้ครอบคลุมอะไรบ้าง

บทเรียน	สิ่งที่คุณจะได้เรียน
Why Svelte, the compiler	compile model, ไม่มี virtual DOM และ bundle เล็ก
The component anatomy	ไฟล์ `.svelte`: script, markup และ scoped styles
Runes & reactivity	runes ขับเคลื่อน reactivity ที่ compiler generate อย่างไร (Svelte 5)
Template syntax	interpolation, `{#if}`/`{#each}`/`{#await}` และการ render

เลนส์สำหรับทั้งคอร์ส

สองไอเดียนี้อธิบายเกือบทุกอย่างที่ Svelte ทำ:

flowchart TB
  compile["Compiler: analyze components at build time"] --> gen["Generate surgical DOM updates
(no virtual DOM)"]
  runes["Runes: mark what is reactive
($state, $derived, $effect)"] --> gen
  gen --> small["Tiny, fast output"]

สองไอเดียที่ทุกอย่างต่อยอดมา

เพราะ Svelte เป็น compiler จึงรู้ตั้งแต่ build time ว่าส่วนไหนของ DOM ขึ้นกับ state ตัวไหน — จึงเขียน code อัปเดตที่แม่นยำแทนที่จะส่ง diffing runtime ไป
เพราะ reactivity ถูกประกาศด้วย runes compiler เลยไล่ dependency graph แบบ static ได้ และอัปเดตเฉพาะสิ่งที่เปลี่ยน ไม่ว่าจะอยู่ตรงไหน

จับสองอย่างนี้ไว้ แล้ว Svelte จะเลิกดูเหมือนเวทมนตร์ และเริ่มดูเหมือน code generator ที่เก่งมาก