deno desktop เปลี่ยนเว็บแอปให้เป็นโปรแกรม desktop ด้วยคำสั่งเดียว ไม่ต้องแตะโค้ดเดิม

Deno คือ runtime สำหรับรันโค้ด JavaScript และ TypeScript และในเวอร์ชันใหม่ v2.9.0 มันเพิ่งได้คำสั่งใหม่ชื่อ deno desktop ที่ทำหน้าที่ตรงไปตรงมามาก คือเปลี่ยนเว็บแอปที่เรามีอยู่แล้ว ตั้งแต่โค้ดไฟล์เดียวไปจนถึงเว็บแอปเต็มตัว ให้กลายเป็นโปรแกรม desktop ที่ดับเบิลคลิกเปิดได้เหมือนแอปทั่วไป จุดที่น่าสนใจคือมันไม่ขอให้เราแก้โค้ดเดิมสักบรรทัด และไม่ต้องไปเรียนภาษาใหม่อย่าง Rust ก่อน

จุดนี้สำคัญสำหรับคนสายเว็บ เพราะที่ผ่านมาการทำเว็บให้กลายเป็นแอปลงเครื่องมีทางเลือกหลักอยู่ไม่กี่ทาง และแต่ละทางมีต้นทุนที่ทำให้หลายคนถอย deno desktop พยายามตัดต้นทุนพวกนั้นทิ้ง ด้วยแนวคิดว่าเทคโนโลยีเว็บคือชุดเครื่องมือทำหน้าจอที่คนทั่วโลกคุ้นที่สุดอยู่แล้ว งั้นก็ใช้สิ่งที่รู้อยู่แล้วไปทำแอป desktop เลย

ทำไมคนสายเว็บถึงไม่ค่อยกล้าทำแอปลงเครื่อง

เวลาอยากเอาเว็บแอปไปทำเป็นโปรแกรม desktop คนส่วนใหญ่จะเจอสองทางเลือกหลัก และทั้งคู่มีกำแพงคนละแบบ

ทางแรกคือ Electron ซึ่งเป็นที่นิยมที่สุดและเขียนด้วย JavaScript/TypeScript ได้เลย แต่มันแถม Chromium ทั้งก้อนมาในแอป ทำให้ไฟล์ที่ได้ใหญ่เกิน 100 MB ตั้งแต่แอปยังไม่ทำอะไรเลย ทางที่สองคือ Tauri ที่ไฟล์เล็กมากเพราะใช้ webview ของระบบปฏิบัติการ แต่ฝั่งหลังบ้านต้องเขียนด้วย Rust ซึ่งสำหรับคนที่อยู่กับ JavaScript มาตลอดคือต้องไปตั้งต้นเรียนภาษาใหม่

deno desktop เลือกยืนตรงกลาง คือยังเขียนด้วย JavaScript/TypeScript บน Deno ได้เหมือน Electron แต่ค่าเริ่มต้นใช้ webview ของเครื่องเหมือน Tauri ไฟล์เลยเหลือราว 40 MB ไม่ใช่ 100 MB ขึ้นไป และเพราะ Deno มี Node compatibility layer แอปก็ยังเรียกใช้ package จาก npm ได้ตามปกติ ไม่ต้องทิ้ง ecosystem ที่ใช้อยู่

เปิดแอปแรกด้วยคำสั่งเดียว

วิธีลองให้เห็นภาพเร็วที่สุดคือเริ่มจากไฟล์เดียว ฟีเจอร์นี้ยังไม่ stable จึงต้องสลับไปใช้ Deno รุ่นทดลองก่อน แล้วค่อยสั่งให้มันสร้างหน้าต่างขึ้นมา ลำดับสั้นๆ เป็นแบบนี้

1. อัปเกรดเป็นรุ่นทดลองด้วยคำสั่ง deno upgrade canary
2. เขียนไฟล์ main.ts ที่เปิด HTTP server ด้วย Deno.serve() แล้วตอบ HTML กลับไปสักหน้า
3. สั่ง deno desktop main.ts

แค่นั้นหน้าต่างโปรแกรมจะเด้งขึ้นมาทันที เบื้องหลังคือ deno desktop คอมไพล์โค้ดเป็น binary หนึ่งไฟล์ที่ข้างในมีทั้งโค้ดของเรา · ตัว Deno runtime · และ engine ที่ใช้วาดหน้าจอ รวมอยู่ด้วยกัน ตัว webview จะโหลดหน้าเว็บจาก local HTTP server ที่ Deno.serve() สร้างขึ้น โดยเราไม่ต้องระบุ port หรือ hostname เอง Deno จัดการที่อยู่ให้อัตโนมัติ รายละเอียดทั้งหมดอยู่ใน เอกสารของ Deno Desktop ตามไปลองได้

พอ build เสร็จ ไฟล์ที่ได้ก็รันตรงๆ ได้เลย เป็น ./main บน macOS กับ Linux และเป็น .\main.exe บน Windows ไม่ต้องลงอะไรเพิ่มที่เครื่องปลายทาง

เขียนเว็บเป็นอยู่แล้ว ก็พอจะ ship แอป desktop ได้เลย โดยไม่ต้องเริ่มนับหนึ่งใหม่

มีเว็บแอปอยู่แล้วก็ยกมาทั้งก้อนได้

ถ้าใครไม่ได้เริ่มจากศูนย์ แต่มี project ที่ทำด้วย framework สำหรับทำเว็บอยู่แล้ว ตรงนี้คือส่วนที่แทบไม่ต้องลงแรงเพิ่ม deno desktop ตรวจจับ framework ยอดนิยมให้เองโดยไม่ต้องแก้โค้ด ครอบคลุมทั้ง Next.js · Astro · Fresh · Remix · Nuxt · SvelteKit · SolidStart · TanStack Start และ Vite มันจะรัน production server ของ framework นั้นให้ในโหมด release หรือถ้าอยากแก้ระหว่างพัฒนาก็เปิดโหมด dev พร้อม --hmr เพื่อให้หน้าจออัปเดตทันทีที่แก้โค้ด

อีกเรื่องที่ช่วยได้จริงคือ cross-compile เราสั่ง build แอปสำหรับ macOS · Windows · Linux ได้จากเครื่องเดียว ไม่ต้องมีเครื่องของแต่ละระบบปฏิบัติการมาตั้งไว้ คล้ายกับที่ deno compile --target ทำอยู่แล้ว

ส่วนการคุยกันระหว่างหลังบ้านกับหน้าจอ deno desktop ใช้ช่องทางภายในโปรเซสเดียวกัน ไม่ได้ส่งข้อมูลข้ามโปรเซสผ่าน socket แบบ IPC ที่ Electron หรือ Tauri ใช้ ระบบยังแปลงข้อมูลเป็น JSON ตรงรอยต่อระหว่างสองฝั่งอยู่ แต่ไม่ต้องส่งไป-กลับข้ามโปรเซส จึงลดภาระจากการรับส่งข้อมูลระหว่างกันลง

เลือกหน้าจอแบบไหน เล็กหรือเหมือนกันทุกเครื่อง

deno desktop ให้เลือกได้ว่าจะวาดหน้าจอด้วยอะไร และตรงนี้คือจุดที่ต้องตัดสินใจตามงานของเรา

• WebView (ค่าเริ่มต้น) · ใช้ webview ที่ติดมากับระบบปฏิบัติการ ไฟล์เลยเล็กราว 40 MB เหมาะกับงานที่อยากได้แอปขนาดเบา
• CEF (Chromium ที่ฝังมาในแอป) · ฝัง engine สำหรับ render หน้าจอตัวเดียวกันไปกับแอป หน้าตาจึงออกมาเหมือนกันเป๊ะทั้ง macOS · Windows · Linux แลกมาด้วยไฟล์ที่ใหญ่ขึ้นเป็นราว 150 MB

วิธีตัดสินว่าจะใช้ตัวไหนก็ง่ายๆ คือ ถ้าอยากได้แอปเล็กและรับได้ว่าหน้าตาอาจต่างกันนิดหน่อยในแต่ละเครื่อง ใช้ WebView · แต่ถ้าหน้าตาต้องเป๊ะเหมือนกันทุกเครื่องและยอมให้ไฟล์ใหญ่ขึ้นได้ ค่อยสลับไป CEF

เทียบกับเครื่องมือใกล้เคียงให้เห็นภาพขนาดไฟล์ · deno desktop แบบ WebView อยู่ที่ราว 40 MB · Tauri เล็กสุดที่ราว 2 ถึง 10 MB · Electron มักเกิน 100 MB ใครที่ขนาดไฟล์คือเรื่องคอขาดบาดตายจริงๆ Tauri ยังเล็กกว่ามาก แต่ก็ต้องแลกด้วยการเขียน Rust ซึ่งเป็นสิ่งที่ deno desktop ไม่บังคับ

ของใหม่ที่ยังต้องระวัง

ถึงตรงนี้ภาพอาจดูสวยเกินไป จึงต้องพูดอีกด้านให้ครบ deno desktop ยังเป็นฟีเจอร์ใน Deno v2.9.0 ที่ยังไม่ stable ต้องสลับไปรุ่น canary ถึงจะลองได้ และทีมพัฒนาบอกตรงๆ ว่าตัวคำสั่ง · ค่า config · รวมถึง API ฝั่ง TypeScript ยังเปลี่ยนได้ก่อนจะออกตัวเต็ม แปลว่าเหมาะกับการลองและทำของเล่นก่อน ยังไม่ควรเอาไปใช้ในงาน production จริง

สิ่งที่ยังขาดอยู่ก็มีหลายอย่าง · ฝั่ง macOS เซ็น code ได้แต่ยังต้องทำ notarization แยกเอง · ยังไม่มีตัวสร้าง installer แบบ MSI ของ Windows และ .deb/.rpm ของ Linux · auto-update ทำได้แค่บน macOS กับ Linux ส่วน Windows ยังไม่ได้ · และยังไปไม่ถึง iOS กับ Android ใครต้องการลงมือถือด้วยตอนนี้ Tauri หรือ Dioxus ยังตอบโจทย์กว่า

ใครควรลอง ใครควรรอ

ถ้าจะสรุปว่าฟีเจอร์นี้เหมาะกับใคร เส้นแบ่งค่อนข้างชัด คนที่ได้ประโยชน์ทันทีคือคนที่ codebase เป็น JavaScript/TypeScript อยู่แล้วและไม่อยากแตะ Rust · มีเว็บแอปที่ทำด้วย framework อยู่แล้วและอยากได้เวอร์ชัน desktop โดยไม่แก้โค้ด · อยากได้ auto-update ติดมาในตัวไม่ใช่ของเสริม · หรืออยากได้หน้าตาที่เหมือนกันทุกเครื่องและรับขนาดไฟล์ที่ใหญ่ขึ้นได้

ส่วนคนที่ควรรอหรือมองตัวอื่นก่อนคือคนที่ต้องการลงมือถือตั้งแต่วันนี้ หรืองานที่ขนาดไฟล์เล็กที่สุดคือเงื่อนไขสำคัญ หรือทีมที่มีระบบ build และ signing ที่ผูกกับ Electron ไว้ดีอยู่แล้วจนยังไม่จำเป็นต้องย้าย

สิ่งที่ deno desktop กำลังท้าทายไม่ใช่แค่ Electron หรือ Tauri ตัวใดตัวหนึ่ง แต่คือความเชื่อเดิมที่ว่าการทำแอปลงเครื่องต้องแลกกับไฟล์อ้วนหรือภาษาใหม่เสมอ เมื่อคำสั่งเดียวเริ่มทำให้สิ่งที่ต้องแลกหายไป เส้นแบ่งระหว่าง "เว็บแอป" กับ "โปรแกรมในเครื่อง" ก็เริ่มจางลงกว่าที่เคยเป็น

---

ที่มา:

• เอกสาร Deno Desktop apps จาก Deno
• เอกสาร Deno Desktop comparison จาก Deno