Videos → Elysia

แนะนำ BETH Stack และ Elysia Framework0:00

โอเค ก็ ฮัลโหลๆ สวัสดีครับ

โอเคฮะ ถ้าหากว่าใครเคยตาม YouTube แบบพวก tech stack พวก Theo หรือว่า ThePrimeagen ก็น่าจะพอคุ้นๆ กับวิดีโอนี้อยู่ ฮัลโหลๆ โอ้ มันต้องพูดใกล้มากเลยเนาะ

Elysia: TypeScript Web Framework ที่เร็วกว่า Express 17 เท่า0:24

คือล่าสุดเมื่อประมาณ 2-3 วันที่แล้วอ่ะ มีคนทำ tech stack อันนึงชื่อว่า BETH Stack ขึ้นมา ซึ่งอันนี้เป็น- ถ้าหากว่าเข้าไปใน Twitter อ่ะ คนค่อนข้างรู้จักเยอะอยู่ ทีนี้ หลักๆ มันจะมี Stack อยู่อันนึงที่ชื่อว่า Elysia ซึ่ง Elysia เนี่ยมันคือ เหมือนกับเป็น web framework เป็น TypeScript web framework ที่มันเร็วมากๆ อยู่ตัวนึง รันบน Bun ถ้าใครไม่รู้จักก็ คิดสภาพง่ายๆ ว่า

สมมุติเหมือนเราเขียนโค้ดเป็นคล้ายๆ Express แต่ว่ามันเร็วกว่า Express อ่ะ แบบ 17 เท่า โดยที่เราแค่รัน แค่เขียนคล้ายๆ กับ Express อ่ะ มันเร็วขึ้นกว่าเดิมแบบ 17 เท่าเลย ทั้งหมดเนี่ย มันเขียนบน TypeScript แล้วถ้าหากว่าไปเขียนเป็น multi-thread เนี่ย ทำเป็น multi-process เนี่ย มันแอบที่จะเร็วเกือบเท่าตัว Rust Actix หรือว่าเร็วกว่า Go Fiber หรือ Gin ซึ่งถือว่าเร็วมากๆ ในการที่เอา TypeScript เนี่ย มารันเป็น web server ใช่มั้ยฮะ

ความลับของความเร็ว: Bun Runtime และ Static Code Analysis1:14

ซึ่งแบบว่า โอเค 17 เท่า 20 เท่า มันฟังเร็วแบบแปลกมากๆ เลยใช่มั้ย ทุกอย่างเนี่ยมันเกิดขึ้นได้ด้วยการที่ผมเขียน 2 อย่าง

ก็คือ framework ตัวเนี้ยมันเอาไปรันบน Bun Bun เนี่ยมันเป็น runtime ตัวนึงที่ค่อนข้างเร็วมากๆ เขาว่าในอนาคตเนี่ย เค้าจะพยายามเอามาแทนที่ Node อยู่ แต่ทีนี้เนี่ย อีกอันนึงก็คือเรามี algorithm ที่ชื่อว่า static code analysis แล้วก็ dynamic code injection เหมือนกับเราอ่านโค้ดของคนที่เขียนเนี่ย แล้วมันสร้างโค้ดขึ้นมาใหม่ โดยที่ตัด overhead อย่างอื่นออก

Developer Experience กับ Elysia: ง่ายต่อการใช้งาน1:46

แล้วตัวเนี้ย วันนี้จะไม่ได้มาพูดถึงเรื่องแบบว่า ทำไมมันถึงเร็ว ทำไมมันถึง อย่างนู้นอย่างนี้ แต่เราจะมาพูดถึงเรื่องว่าทำไมคนถึงชอบใช้ Elysia แล้วก็เรื่อง developer experience เป็นยังไงเนาะ

Setup Authentication ง่ายๆ ด้วย Elysia Elf1:56

ก็ในนี้มีใครเคยเขียน backend เนาะ ก็จะรู้ว่า ปกติเนี่ย เวลาเราเขียน authentication เนี่ย

เราจะใช้เวลา set up ค่อนข้างนาน เช่น 2 ชั่วโมง 3 ชั่วโมง แต่ใน Elysia เนี่ย ถ้าใครเคยเขียน Elysia ตอนนี้จะมี experimental project อยู่อันนึง ชื่อว่า Elysia Elf หลักๆ ก็คือ มันทำให้เราสามารถ set up project Elysia แบบว่าทุกอย่างเนี่ย ง่ายมากๆ แค่เราพิมพ์คำสั่งไม่กี่คำสั่ง เดี๋ยวเราลองมาดูกันเนาะ ว่าเป็นยังไงเนาะ

Demo: สร้าง Project Elysia ด้วย Bun CLI2:21

ก็เดี๋ยวเราขออนุญาตวางไมค์ แล้วก็เพิ่มขนาดจอนิดนึง

โอเค

โอเค ก็ วิธีการสร้างโปรเจกต์ Elysia เนาะ เราพิมพ์ว่า bun create elysia แล้วก็ชื่อโปรเจกต์ที่เราต้องการ ผมตั้งชื่อโปรเจกต์เป็น 08 ละกัน

หลักๆ ก็จะเป็นประมาณนี้ เราพิมพ์ว่า bun create แล้วก็ได้โปรเจกต์มา ทีนี้เรา cd เข้าไป ถ้าเราไปดูที่โค้ดตรงนี้เนี่ย เราจะมีโค้ดหน้าตาเป็นประมาณนี้ src/index ปุ๊บ อันนี้คือ server Elysia 1 อัน หลักๆ ก็คือเราพิมพ์ว่า โอเค .get แล้วก็บอกว่า method path เนี้ยสามารถทำอะไรได้บ้าง เหมือน Express เลย คิดสภาพแบบเหมือน Express เลย แต่เราไม่มี res ไม่มี req ไม่มี request response แค่ส่งค่ากลับไป แล้วมันก็จะได้เป็น server ขึ้นมา

เพิ่ม GraphQL Plugin ด้วย Elysia Elf3:14

ทีนี้เนี่ย เดี๋ยวเราลองมา setup แบบว่า authentication ดูละกันเนาะ อย่างแรกก็คือเราสร้าง Redis stack ขึ้นมา

แล้วก็เดี๋ยวเราเอา Docker มา run จริงๆ น่าจะ run ไปแล้วมั้ง เอา Docker มา run Postgres ขึ้นมา เอาไว้เป็นตัวเก็บ authentication ละกันเนาะ ทีนี้เห็นว่าผมเพิ่งสร้างโปรเจกต์ใหม่ใช่มั้ย ทีนี้มันจะมี experimental อันนึง ที่ถ้าใครเคยเขียน Laravel หรือ Ruby on Rails มันจะมี CLI สำหรับการ generate โปรเจกต์ต่างๆ ตัว Elysia เนี่ยมันก็มีเหมือนกัน ชื่อ elf ทีนี้เนี่ย เวลาเราพิมพ์คำสั่งนี้เข้าไป ผมพิมพ์คำว่า elf add อันนี้จะเป็น plugin ทั้งหมดที่เราสามารถใช้ได้ อยากได้อะไร อย่างเช่น สมมุติอยากได้ GraphQL อยากได้ static plugin อยากได้ swagger plugin เรา enter ปุ๊บ แล้วก็ตอบคำถามไม่กี่คำถาม แล้วมันก็จะได้เป็นตัว โค้ดด้านหลังเนี่ย

มันก็จะอัพเดตมาให้ว่า เราเพิ่ม plugin อะไรเข้ามาแล้วบ้าง อย่างงี้เนี่ย เราก็เพิ่มบอกว่า เราอยากได้ plugin เป็น GraphQL เราก็จะแบบ extend ทุกอย่างมาให้หมดเลย ทีนี้เนี่ย เดี๋ยวเราลอง run server ดูก่อนนะ pnpm pnpm dev ปุ๊บ run server ที่ port 3000 ไปที่ localhost 3000 swagger ปุ๊บ มันก็จะมี path swagger มาให้หมดเลย

อันนี้ก็คือเราไม่จำเป็นที่จะต้อง มานั่งเขียน API เองว่ามันอยากมีอะไรได้บ้าง

สร้าง Authentication ด้วย Elysia Elf และ Prisma ORM4:28

ทีนี้เนี่ย ความเจ๋งก็คือ Elysia เนี่ยมันแอบมีของที่โกงอย่างนึง ก็คือสมมุติเราอยากได้ authentication เราพิมพ์ elf generate auth แล้วบอกว่าอยากได้ ORM เป็นอะไร ผมเอาเป็น Prisma ละกัน แล้วก็เก็บ Redis สำหรับการเก็บ session เนาะ ทีนี้เนี่ย ถ้าใครเคยใช้ Prisma เนี่ย มันเหมือนกับเป็น ORM ของ TypeScript ที่ทำให้เราสามารถเขียนโค้ด แบบง่ายมากๆ ในการจัดการกับ database

ผมเอาเป็นว่า ผมเอา database เป็น Postgres แล้วก็ตั้ง URL เป็นประมาณอย่างนี้ละกัน

database URL ต้องการที่จะ migrate database มั้ย yes ปุ๊บ ทีนี้ที่เหลือเนี่ย ตัวนี้มันก็จะจัดการเรื่อง migrate data ให้ ทั้งหมดเลย แล้วมันก็จะถามว่าผมอยากได้ OAuth provider มั้ย

โอเค ก็ Postgres แล้วก็ เมื่อกี้ผมลืม migrate database แต่ไม่เป็นไร file location โอเค ทั้งหมดเรียบร้อยแล้ว ผมพิมพ์แค่นี้ แล้วผมรัน เพียงแค่รัน pnpm dev เข้า Swagger มี path เพิ่มมาให้ เป็น auth เป็นเรื่อง authentication ทั้งหมดเลย library ทั้งหมดตัวนี้ มันจะสร้างไฟล์ auth.ts ซึ่งไฟล์ตัวนี้ มันจะเหมือนกับเป็น boilerplate ว่าเราสามารถจัดการเรื่อง session ยังไงบ้าง เช่น ผมบอกว่า อยากได้ auth แล้วก็ทำ sign in ทำ sign out authentication ทุกอย่างหมดเลย

Demo: Sign Up และ Sign In ผ่าน Swagger UI5:44

ทีนี้เดี๋ยวผมลองสร้าง user ดูละกันเนาะ อันนึง เอาเป็น sign up ปึ๊บ เอาเป็น saltyaom ละกัน

saltyaom98 ละกัน ประมาณนี้ password 12345678 execute แล้วก็ได้ user เนาะ ทีนี้ผมลอง sign in โอเค แน่นอนว่า Swagger ค่อนข้างมีประโยชน์แหละ timer ดับไปละ

End-to-End Type Safety ด้วย Elysia และ Eden Treaty6:06

ความเจ๋งของมันก็คือ Elysia เนี่ย มันสามารถทำสิ่งที่เรียก end-to-end type safety ได้ ถ้าใครเคยเขียน tRPC เนี่ย แน่นอนว่าเราสามารถเอา type ที่ server มาใช้บน client ได้ใช่มั้ย ซึ่ง Elysia เนี่ยมันก็สามารถทำได้เหมือนกัน แต่มันเป็น restful สมมุติว่าผมมี server ตัวนึง ผมเพิ่ม folder ตัวนึง ชื่อว่า identity

ตัวนี้เป็นโปรเจคที่ setup มาอยู่แล้ว เอาเป็นว่าเป็น Next.js ธรรมดาละกัน แล้วก็ใช้แบบง่ายๆ ก็คือมันเป็นโปรเจค Next.js ธรรมดาอันนึง แต่ว่าทีนี้เนี่ย เราจะเห็นว่า มัน import type มาจาก server ตัวนี้ คำถามก็คือ server ตัวนี้ มันจะมาจาก type ตรงนี้ ผมก็บอกว่า โอเค เราอยากได้ module

อยากให้มันเพิ่ม type มาเป็น source

เพิ่มมาเป็น src/index.ts แล้วก็ผมบอกว่าผม export type ของ server ตัวนี้มา

export type App = typeof app

ทีนี้เนี่ย ผมก็สามารถเอา type ของ server ตัวนี้ มาใช้บน client ได้

Demo: Type Safety ระหว่าง Server (Elysia) และ Client (Next.js)7:11

แล้วก็ผมขอทำการย้อนกลับไปตรงนี้ แล้วก็ไปรันที่ identity

รัน server Elysia คู่กันเนาะ แล้วก็รัน server Next.js ตัวนี้คู่กัน ไปที่ localhost 3001

โอเค ทีนี้จะสังเกตเห็นว่า ตรงนี้เราไปดูที่ server ตรงนี้นะ โอเค เดี๋ยว reload แป๊บนึง reload รอบนึง แล้วก็ไปดูที่ server ตัวนี้ server ตัวนี้ API เนี่ย มันมาจากการที่เรา import type จาก server ใช่มั้ย แล้วก็ผ่านเข้าไป function ตัวนึงชื่อ edenTreaty ตัวนี้เหมือนกับเป็น tRPC สำหรับการ connect client กับ server โดยที่เราสามารถทำ type ได้ เช่นสมมุติ ใน server เนี่ย ผมบอกว่าผมมี API index แล้วก็ auth ใช่มั้ย ใน auth เนี่ยมีอะไรบ้าง เราก็สามารถกดดูได้เลย แล้วก็บอกว่า สมมุติเรา อยาก sign in ใช่มั้ย แล้วก็เรียก post แล้วก็บอกว่า

มันมี parameter อะไรบ้างที่เราสามารถใส่เข้าไปได้ ตรงนี้ทั้งหมด type safe แล้วถ้าสมมุติว่ามีการ เปลี่ยนแปลงบน server เนี่ย บน client ก็จะเปลี่ยน ตามไปด้วย ทีนี้เดี๋ยวผมลองสร้าง API endpoint

Demo: สร้าง API Endpoint ใหม่และ Type Safety บน Client8:11

อันใหม่ดู แล้วดูว่ามันมีเพิ่มมั้ยนะ ตอนนี้เรามี auth แล้ว index เนาะ เพราะฉะนั้นเดี๋ยวเราลองสร้าง endpoint อีกตัวนึงขึ้นมาดู หน้าตาเป็นประมาณนี้ ผมแอบมีโพย เผื่อกันไม่ทัน เพราะฉะนั้นผมเก็บ อันนี้มา แล้วก็รัน เพิ่ม method ชื่อ get ไปที่ path /nendodroid/skadi แล้วก็จะได้ JSON ตัวนี้ขึ้นมาเนาะ ทีนี้เราไปที่ client อีกรอบนึง เราพิมพ์คำว่า api . ปุ๊บ จะเห็นว่ามันมี path เพิ่มขึ้นมา เป็น nendodroid เหมือนเมื่อกี้ แล้วก็ .skadi แล้วก็ method ที่เราต้องการ save ปุ๊บ เราเอาเมาส์ไปทาบที่ data จะเห็นว่า

type ทั้งหมดเนี่ย มันมาจากฝั่ง server หมดเลย เช่นผมบอกว่า โอเค มี id มี name มี type ปุ๊บ ทั้งหมดเนี่ยก็จะมาอยู่ตรงนี้เนาะ เพราะฉะนั้น

เพิ่ม Static Plugin สำหรับการ Serve ไฟล์ Static8:50

เดี๋ยวผมลองรันบนตัวนี้ดู save แล้วรันปุ๊บ โอเค

อันนี้ขาดไปนิดนึง ก็คือภาพเนี่ยมันไม่มีอยู่เนาะ เพราะฉะนั้นเดี๋ยวผมจะเพิ่มภาพเข้ามา ก็คือเราไปที่ server Elysia เนาะ แล้วก็เราพิมพ์คำว่า elf add เอาเป็น static plugin แล้วกันเนาะ ปุ๊บ ทีนี้ก็จะเพิ่ม

static plugin เข้ามา ทีนี้เราก็ต้องเพิ่ม folder ของตัวนี้ ไปที่ public แล้วก็เพิ่มภาพเข้ามา reveal in finder ปุ๊บ copy ภาพตรงนี้มา แล้วก็เอามาใส่ในตรงนี้ ปุ๊บ ตรงนี้เนี่ย มันจะมาจากการที่เราบอกว่า โอเค API ใช่มั้ย เนี่ย เรามาจากการที่เราเรียก static plugin ตัวนี้ default ของมันคือ folder ที่ชื่อ public เพราะฉะนั้นถ้าเราลองมาโหลด reload อีกรอบดูก็จะเห็นว่า ปุ๊บ อ้าว เกิดอะไรขึ้นเอ่ย อ๋อ เราลืมรัน server เนาะ เพราะฉะนั้นเราก็ไปที่ server ตัวนี้ รันปุ๊บ ไม่ได้ แล้วมันก็จะได้ โอเค

สรุป Elysia: ง่าย เร็ว และ Type Safe9:51

ไม่เป็นไร โอเค ไม่เป็นไร ภาพ อีกอย่างนึงที่อยาก ให้ดูก็คือ มันจะสามารถ sign in sign out ได้ ก็คือตรงนี้เนี่ย ถ้าใครเคยเขียนเป็น React เนาะ มันก็จะสามารถทำ form authentication ได้ แต่ว่า ตัวนี้ ถ้าหากว่าเราเอา React Query เนี่ย ไปใส่ใน พวก edenTreaty เนี่ย มันก็จะขึ้นมาว่า โอเค เรา สามารถใส่ type อะไรได้บ้าง หลักๆ ก็เป็นประมาณ เท่านี้ฮะ ขอบคุณมากครับ วู้ พอดีเป๊ะครับ ขอเสียงปรบมือให้พี่ออมหน่อยครับ