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

Deno Mar 3, 2023

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

Deno — A modern runtime for JavaScript and TypeScript
Deno is a simple, modern runtime for JavaScript and TypeScript that uses V8 and is built in Rust.

ข้อดีของ 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 ในการเขียน)

Deno - Visual Studio Marketplace
Extension for Visual Studio Code - A language server client for Deno.

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 ❤️

อ่านเพิ่มเติม

Getting Started | Manual | Deno
In this chapter we’ll discuss:
Examples | Manual | Deno
In this chapter you can find some example programs that you can use to learnmore about the runtime.
How to get started with Deno Tutorial
A comprehensive Deno tutorial for beginners. Learn what makes Deno unique in comparison to Node.js…
The Deno Handbook: A TypeScript Runtime Tutorial with Code Examples
I explore new projects every week, and it’s rare that one grabs my attention as much as Deno [https://deno.land/] did. In this post I want to get you up to speed with Deno quickly. We’ll compare it with Node.js, and build your first REST API with it. Table of contents

Tags

Chai Phonbopit

เป็น Web Dev ทำงานมา 10 ปีหน่อยๆ ด้วยภาษา JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจ Web3, Crypto และ Blockchain เขียนบล็อกที่ https://devahoy.com