สร้าง Real Interfaces ด้วย Svelte และ SvelteKit
Svelte ใช้วิธีการที่แตกต่างจากพื้นฐานเมื่อเทียบกับ React และ Vue — แทนที่จะส่ง runtime ไปยัง browser คอมไพล์ components ของคุณเป็น vanilla JavaScript ที่มีประสิทธิภาพสูงในเวลา build โผลที่ได้คือ bundles ที่เล็กกว่า เวลา load ที่เร็วขึ้น และ boilerplate ที่น้อยลง SvelteKit ซึ่งเป็น application framework อย่างเป็นทางการ เพิ่มเติม file-based routing server-side rendering form actions และ deployment adapters เพื่อให้คุณสามารถปล่อย production-grade apps บนแพลตฟอร์มใดก็ได้ Track นี้ครอบคลุมทั้งสอง ตั้งแต่ component แรกไปจนถึง full-stack architecture
สิ่งที่คุณจะได้เรียนรู้
คุณจะเริ่มต้นด้วย component model ของ Svelte — props template syntax conditionals loops และ two-way binding — จากนั้นไปสู่ reactivity system lifecycle functions และ store primitives writable readable derived และ custom stores ในด้าน UI คุณจะทำงานกับ slots Context API CSS transitions animations และ Svelte Motion บท SvelteKit ครอบคลุม routing data loading SSR และ prerendering form actions API routes hooks error handling advanced layouts auth patterns และ deployment adapters Track นี้ยังครอบคลุม Svelte 5 rune system testing ด้วย unit tests และ Playwright E2E third-party library integration และ SvelteKit security practices
Learning Path
หลักสูตร 41 หลักสูตรก้าวหน้าจาก A1 ผ่าน C1 หลักสูตรเจ็ดหลักสูตรแรกสร้างรากฐาน components props events และ template syntax B1 แนะนำ stores slots transitions และ SvelteKit pages และ data-loading patterns แรกของคุณ B2 — บล็อกที่ใหญ่ที่สุด — ทำงานผ่าน form actions API routes hooks advanced reactivity Svelte Actions custom animations auth patterns adapters Svelte 5 runes testing และ security Track ปิดท้ายที่ C1 ด้วย advanced runes advanced component patterns SvelteKit streaming performance optimization large-scale state management และ capstone full-stack SvelteKit application
วิธีการทำงาน
แต่ละหลักสูตรแบ่งออกเป็นบทเรียนที่สั้นและเน้นไปที่เป้าหมายซึ่งคุณสำเร็จในตัวแก้ไขโค้ด built-in ที่มี real-time feedback AI tutor อยู่เสมอเมื่อคุณติดขัด และแต่ละแนวคิดได้รับการเสริมแรงด้วยแบบฝึกหัด hands-on ก่อนที่คุณจะย้ายไปที่หัวข้อถัดไป