Deep Dive: Bikin Desktop App pake Deno — Tutorial dari 0 ke Deploy

Selama ini, kalau mau bikin desktop app pake JavaScript/TypeScript, opsi standarnya cuma Electron — atau kalau mau lebih lightweight, Tauri. Tapi Electron terkenal berat (setiap app bawa Chromium sendiri), sedangkan Tauri butuh Rust di belakangnya. Nah, Deno 2.9 hadir dengan solusi menarik: WebView API built-in yang bikin lo bisa bikin desktop app native tanpa bundler, tanpa Webpack, dan tanpa ribet.

Di tutorial ini, gue bakal nunjukin langkah demi langkah cara bikin desktop app dari nol sampe deploy. App yang bakal kita buat adalah Markdown Notes — sebuah aplikasi catatan sederhana yang pake Markdown, lengkap dengan preview real-time.

Apa yang Bikin Deno Cocok buat Desktop App?

Deno 2.9 punya beberapa fitur yang bikin dia cocok banget buat desktop app development:

WebView API native — Deno 2.9+ punya Deno.webView API yang bisa render HTML/CSS/JS langsung di native window. Gak perlu Chromium besar.

TypeScript first class — Lo bisa nulis desktop app pake TypeScript tanpa setup apa pun. Gak perlu tsconfig, gak perlu Webpack, gak perlu bundler.

Single binary — Deno bisa compile app lo jadi satu file executable. Mirip kayak Go atau Rust.

Permissions model — Deno pake permission system yang explicit, jadi app lo gak bisa akses file system atau network tanpa izin.

Standard library lengkap — File system, HTTP, SQLite, dan lainnya udah include tanpa perlu npm install.

Bandingin sama Electron yang butuh ~150MB per app (Chromium + Node.js), app Deno bisa cuma ~15-30MB. Bandingin sama Tauri yang butuh Rust knowledge, Deno cukup pake TypeScript murni.

Step 1: Setup Deno 2.9

Pastikan lo udah install Deno 2.9 atau lebih baru. Cek versi:

Kalau belum punya, install lewat:

Atau kalau lo pake macOS:

Step 2: Init Project

Buat folder project dan file utama:

Gak perlu package.json, gak perlu tsconfig.json, gak perlu webpack.config.js. Cuma dua file. Ini dia yang namanya zero-config.

File index.html — UI App

Bikin UI sederhana pake HTML + CSS + vanilla JavaScript. Gak perlu React, gak perlu framework:

Perhatikan bahwa kita pake theme dark mode (Catppuccin Mocha) biar enak dilihat. UI ini punya sidebar buat daftar catatan, toolbar, editor Markdown di kiri, dan preview di kanan.

Step 3: Koneksi Backend — main.ts

Sekarang kita buat file utama Deno yang bakal nge-load WebView, render HTML, dan handle interaksi dari frontend lewat Deno.webView API:

Penjelasan kode di atas:

Deno.webView() — bikin native window dan render HTML di dalemnya. Ini pake WebView2 di Windows, WebKit di macOS, dan GTK WebView di Linux.

ipcHandler — function yang bakal dipanggil setiap kali frontend kirim pesan lewat window.ipc.postMessage(). Di sini lo bisa handle berbagai action kayak baca/tulis file.

File system API pake Deno.readTextFile, Deno.writeTextFile, dan Deno.remove — semuanya native, gak perlu npm install fs-extra.

Step 4: Frontend JavaScript (app.js)

Biar lebih rapi, kita pisah JavaScript frontend ke file terpisah. Tapi karena kita pake WebView yang render langsung dari HTML string, kita perlu inject script-nya. Simpan sebagai app.js di folder yang sama:

Step 5: Run the App

Jalankan app dengan permission yang sesuai:

Argumen --allow-read dan --allow-write diperlukan karena app kita baca/tulis file catatan. --allow-env diperlukan oleh WebView internal.

Begitu dijalanin, lo bakal liat native window muncul dengan app Markdown Notes siap dipake. Coba buat catatan baru, tulis Markdown, dan liat preview real-time-nya.

Step 6: Compile ke Single Binary

Salah satu keunggulan Deno — lo bisa compile app jadi satu file executable yang bisa didistribusikan ke user tanpa perlu install Deno:

Hasilnya adalah file binary markdown-notes yang bisa dijalanin langsung. Ukurannya sekitar 20-25MB (tergantung OS). Bandingin dengan Electron yang minimal 150MB.

Step 7: Distribusi

Ada beberapa cara buat distribusi app Deno Desktop:

Single binary — Langsung kirim file executable ke user. Cocok buat internal tools atau CLI.

Homebrew — Bikin formula Homebrew biar user macOS bisa install lewat brew install markdown-notes.

GitHub Releases — Upload binary ke GitHub Releases, lengkap dengan asset untuk Windows (.exe), macOS (.app), dan Linux.

Scoop/Chocolatey — Buat package manifest untuk Windows users.

Buat bikin binary yang siap distribusi ke berbagai platform, lo bisa pake CI/CD kayak GitHub Actions:

Perbandingan: Deno Desktop vs Electron vs Tauri

Biar lebih jelas, ini perbandingan ketiga teknologi:

Perbandingan Deno Desktop vs Electron vs Tauri:

Bundle Size: Deno ~20-30 MB vs Electron ~150-250 MB vs Tauri ~3-10 MB

Bahasa: Deno pake TypeScript/JS murni vs Electron JS/TS + Node.js vs Tauri Rust + JS/TS

Setup Complexity: Deno sangat sederhana (zero-config) vs Electron sederhana vs Tauri butuh Rust knowledge

Performance: Deno baik vs Electron cukup vs Tauri sangat baik

Ekosistem: Deno baru (tumbuh) vs Electron matang & besar vs Tauri berkembang

Ideal untuk: Deno cocok buat internal tools & utility apps vs Electron untuk aplikasi kompleks (VS Code-like) vs Tauri untuk aplikasi performa tinggi

Kalau lo mau baca dokumentasi lebih lanjut, cek Deno WebView docs dan Deno compile docs.

Kesimpulan

Deno 2.9 membuka jalan baru buat developer JavaScript/TypeScript yang mau bikin desktop app tanpa ribet. Dengan WebView API built-in, zero-config TypeScript, dan kemampuan compile ke single binary, Deno jadi alternatif yang layak buat Electron untuk use case tertentu.

Tentu aja Deno Desktop masih tergolong baru — ekosistemnya belum sebesar Electron. Tapi buat internal tools, utility apps, atau side project, Deno menawarkan developer experience yang jauh lebih ringan dan cepat.

Yang paling menarik: lo bisa mulai bikin app dalam 5 menit tanpa perlu install apa-apa selain Deno. Coba aja sendiri!

Jangan lupa tinggalin komen atau share pengalaman lo pas nyobain ini di kolom diskusi. Kalau ada yang error atau bingung, tanya aja — gue bantu jawab.