มาลองเล่น Svelte และ SvelteKit กัน

☕️ สนับสนุนช่องเราด้วยการสมัครสมาชิกช่องทางนี้ได้เลย
   / @mikelopster  

ลองไมค์ สัปดาห์นี้ เราจะมาเล่น Svelte อีกหนึ่ง Frontend Framework ที่ถือว่าเป็นที่นิยมอีกหนึ่งตัวกัน โดยในหัวข้อนี้เราจะแนะนำการทำเว็บด้วย Svelte และ SvelteKit (Web framework ที่ใช้งาน Svelte) ไปพร้อมๆกันว่ามันคืออะไร และใช้งานยังไงกันบ้าง

โดยในหัวข้อนี้เราจะพูดถึง
1. รู้จักกับ Svelte ว่ามันคืออะไร มีไอเดียแตกต่างกับ Framework อย่าง React, Vue อย่างไรบ้าง
2. เรียนรู้พื้นฐานของ Svelte Component ตั้งแต่การทำตัวแปร Reactive จนถึง Data-binding
3. รู้จักกับ SvelteKit ว่ามีความสำคัญต่อ Svelte อย่างไร
4. มาลองสร้างเว็บ Blog อย่างง่ายด้วย SvelteKit กัน

หัวข้อ
00:00 แนะนำ Session
01:56 แนะนำ Svelte / จุดแข็งของ Svelte
10:48 แนะนำ SvelteKit เพิ่มเติม
12:20 เราจะทำอะไรกันบ้างใน Session นี้
13:02 เริ่มต้น Svelte ด้วย Vite
15:42 Svelte - พื้นฐาน Component / ตัวแปร Reactive
19:00 Svelte - การ import Component / การส่งผ่าน Property
22:03 Svelte - ผูก Event และเปลี่ยนค่าตัวแปร Reactive
24:12 Svelte - ผูก Data กับ input (data-binding)
25:19 Svelte - การทำ Condition (if else block)
26:29 Svelte - การใช้ Await block กับการ get data ผ่าน API
30:49 Svelte - วน loop data ด้วย each block
32:13 Svelte - เพิ่มเติมเรื่อง data binding
32:33 Svelte - แนะนำ lifecycle
34:37 Svelte - แนะนำ Store
36:48 สรุปทั้งหมดของ Svelte
38:10 เริ่มต้น SvelteKit - เล่าโจทย์
41:02 create project SvelteKit
43:46 SvelteKit - แนะนำ Route (Page component)
44:59 SvelteKit - แนะนำ Layout
46:41 SvelteKit - การทำ parameter Route
47:52 SvelteKit - การทำ Server Route (Loading data) / ส่ง param ไปยัง Page component
50:57 SvelteKit - ดึงข้อมูลด้วย Server Route
58:17 SvelteKit - การดึงข้อมูลจาก ENV
1:00:12 SvelteKit - แนะนำ page.js (ตัวคั่นกลางระหว่าง Client / Server ของ Page)
1:02:38 SvelteKit - การใช้งาน page.js กับ Page Option (แนะนำ CSR, SSR)
1:04:15 SvelteKit - เพิ่มหน้า Edit Blog และผูก Form action
1:12:45 SvelteKit - เพิ่มหน้า Login
1:17:27 SvelteKit - เพิ่มเขียน jwt token เข้า cookie
1:22:34 SvelteKit - แนะนำ Hook / แกะข้อมูลจาก token ด้วย jwt
1:26:38 SvelteKit - เพิ่ม Hook ส่งข้อมูล user ไปหน้าปลายทาง
1:28:35 SvelteKit - กั้นสิทธิให้หน้า Edit เข้าได้เฉพาะคน Login เท่านั้น
1:30:55 SvelteKit - แนะนำการทำ API (server.js)
1:32:41 สรุป Session ทั้งหมด
1:34:11 ส่งท้ายก่อนจบ

ฉบับ Document
https://mikelopster.dev/posts/svelte-...

ใครมีข้อสงสัยเพิ่มเติม มาพูดคุยแลกเปลี่ยนความรู้กันได้ที่
Facebook page:   / mikelopster.dev   กันได้เลย

พิกัดของด้านหลัง : https://shope.ee/8A54c8cfkf

Enjoy ครับ 😘