มาลองเล่น 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 ครับ 😘