สวัสดี Deno - ลองเขียนเว็บด้วย Deno กันดีกว่า

Deno Mar 3, 2023

Deno คืออะไร? Deno เป็น JavaScript Runtime ที่คล้ายๆ Node.js (คนสร้าง Node.js มาสร้าง Deno ด้วยแนวคิดที่ดีกว่าเดิม) ไม่ใช่แค่ JavaScript Runtime แต่ตัวเว็บบอกไว้ว่า Deno คือ JavaScript, TypeScript, และ WebAssembly Runtime เลยแหละ

ข้อดีของ Deno คือ

single executable (deno)
รองรับ TypeScript โดยไม่ต้องตั้งค่าอะไรเพิ่มเลย
มีพวก format, linter มาให้เลย
เรื่องความปลอดภัย (ไม่สามารถเข้าถึงไฟล์, network หรือค่าต่างๆได้ ถ้าเราไม่ได้เปิด)
รองรับ npm ของ Node.js ด้วยนะ

สำหรับบทความนี้ เราไปลองดู Deno เบื้องต้นกันดีกว่าครับ ซึ่งหากใครเคยเขียน Node.js มาก่อน รับรองว่าเรียนรู้ได้ง่ายมาก เพราะเกือบจะเหมือน Node.js เลยก็ว่าได้

ณ วันที่เขียนบทความ คือ Deno v.1.31.1 ครับ

การติดตั้ง Deno

หากใครใช้ Linux หรือ Mac OS ก็สามารถใช้ Command Line นี้ได้เลย

curl -fsSL https://deno.land/x/install/install.sh | sh

ถ้าใช้ Homebrew ก็ง่ายๆแบบนี้

brew install deno

ส่วน Windows ใช้ Power Shell หรือ Scoop ก็ติดตั้งแบบนี้

irm https://deno.land/install.ps1 | iex

# Scoop
scoop install deno

เมื่อติดตั้งเรียบร้อยแล้ว ทดสอบดูว่าได้ version info หรือไม่

deno --version

จะได้ผลลัพธ์แบบนี้ (ขึ้นอยู่กับเวอร์ชั่นของแต่ละคน)

deno 1.31.1 (release, aarch64-apple-darwin)
v8 11.0.226.13
typescript 4.9.4

VS Code Extensions

ส่วนของ Extension ใน VS Code จะใช้ตัวนี้ (เนื่องจากคิดว่าเกิน 80% น่าจะใช้ VS Code ในการเขียน)

Hello World Deno

สร้างไฟล์ hello.ts ขึ้นมา (จริงๆ มันก็คือ TypeScript ธรรมดาเลย)

console.log("Hello Deno!");

จากนั้น เราก็สั่งรันโปรแกรมผ่าน Terminal ได้แบบนี้

deno hello.ts

นอกจากนี้ เรายังสามารถให้ deno ทำการรัน (execute) ไฟล์จาก url ได้ด้วย แบบนี้

deno run https://deno.land/std@0.178.0/examples/colors.ts

Fetch Data

อีกตัวอย่างนึงง่ายๆ คือการ ดึงข้อมูล Github API ด้วยการใช้ fetch ข้อมูล Github User (ของผมเอง) ตัว Deno รองรับการใช้ await on top ด้วย โดยไม่จำเป็นต้องอยู่ภายใน async function แบบนี้

const res = await fetch("https://api.github.com/users/phonbopit");
const data = await res.json();
console.log(data);

จะเห็นว่า deno จะไม่ให้เรารัน เพื่อส่ง request ออก ถ้าไม่ได้อนุญาต ฉะนั้นเราก็ต้องใส่ --allow-net เข้าไปด้วย

┌ ⚠️  Deno requests net access to "api.github.com".
├ Requested by `fetch()` API
├ Run again with --allow-net to bypass this prompt.
└ Allow? [y/n/A] (y = yes, allow; n = no, deny; A = allow all net permissions) >

เราสามารถกด y เพื่ออนุญาต สำหรับคำสั่งนี้

หรือรันคำสั่งใหม่ ด้วยการส่ง option ไปด้วย แบบนี้

deno run --allow-net hello_fetch.ts

ก็จะได้ผลลัพธ์เป็น Github Profile ของผม นั่นเอง

{
  login: "Phonbopit",
  id: 1855019,
  ...
  ...
  ...,
  name: "Chai Phonbopit",
  company: "@Devahoy",
  blog: "https://devahoy.com",
  location: "Bangkok, Thailand",
  email: null,
  hireable: null,
  bio: "Frontend Dev who currently learning Rust and Solidity.",
  twitter_username: "phonbopit",
  public_repos: 721,
  public_gists: 53,
  followers: 404,
  following: 178,
  created_at: "2012-06-15T19:18:33Z",
  updated_at: "2023-02-08T15:39:16Z"
}

หวังว่าจะได้ไอเดีย ในการเรียนรู้ Deno นะครับ ลองไปฝึก และเรียนรู้เพิ่มเติมดูนะครับ

Happy Coding ❤️