Svelte Deep Dive

คอร์สแบบ standalone ระดับ intermediate→advanced ว่าด้วย Svelte 5 ตั้งแต่ compiler model และ runes reactivity ไปจนถึง components & snippets, bindings และ transitions, stores และ full-stack SvelteKit — สอนผ่าน code ที่ annotate และไดอะแกรมที่แสดงว่า compiler ทำอะไรและทำไม bundle ถึงเล็ก

เริ่มที่นี่ ข้ามไปที่ Runes

สิ่งที่คุณจะได้เรียน

Foundations & Mental Model

Svelte ในฐานะ compiler, .svelte component, runes reactivity และ template syntax เริ่ม →

Reactivity with Runes

$state, $derived, $effect, $props & $bindable และ advanced runes เรียน →

Components & Composition

snippets & render, การส่ง UI, context และ component lifecycle ประกอบ →

Bindings, Actions & Transitions

two-way binding, use: action, transitions & animations และ form bind →

State Management & Stores

store contract, built-in store, runes vs stores และ cross-component state จัดการ →

SvelteKit: Full-Stack Svelte

routing, load function, form action และ server endpoint build →

Tooling, Testing & Production

Vite & svelte-check, TypeScript, testing และ performance & deployment ship →

คอร์สนี้ทำงานยังไง

เข้าใจ model ก่อน แล้วค่อยดู code

ทุกหัวข้อเริ่มจาก model — compiler, fine-grained reactivity, store contract — พอเข้าใจแล้วความ magic ของ Svelte จะกลายเป็นกลไกที่คุณเข้าใจได้

Svelte 5 ที่ verify แล้ว

เขียนบน Svelte 5 และตรวจสอบกับ official docs — runes ($state/$derived/$effect/$props), snippets ({@render}) และ event แบบ onclick ถูกสอนตามที่มีอยู่จริงวันนี้ ไม่ใช่แบบ Svelte 4

เน้นการออกแบบ ไม่ใช่แค่ syntax

ไม่ใช่แค่ “นี่คือ $effect” แต่เป็น “ทำไมคุณอาจไม่ต้องใช้ $effect และควร derive อะไรแทน” คุณจะ reason เรื่อง reactivity และ data flow ได้อย่างมั่นใจ

ไดอะแกรมที่อธิบายได้

compile step, reactivity graph, snippet rendering และ SvelteKit load flow เป็นไดอะแกรม Mermaid ที่รองรับธีม สองภาษา (English / ไทย) พร้อมบันทึกความคืบหน้า quiz