Deep Dive: Bikin Desktop App pake Deno — Tutorial dari 0 ke Deploy
Tutorial lengkap bikin desktop app pake Deno 2.9. Dari setup sampai distribusi. Gak perlu Electron, gak perlu Webpack.
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:
Deno.webView API yang bisa render HTML/CSS/JS langsung di native window. Gak perlu Chromium besar.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.9Pastikan lo udah install Deno 2.9 atau lebih baru. Cek versi:
Kalau belum punya, install lewat:
Atau kalau lo pake macOS:
Step 2: Init ProjectBuat 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.
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.tsSekarang 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.Deno.readTextFile, Deno.writeTextFile, dan Deno.remove — semuanya native, gak perlu npm install fs-extra.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:
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 BinarySalah 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.
Ada beberapa cara buat distribusi app Deno Desktop:
brew install markdown-notes.Buat bikin binary yang siap distribusi ke berbagai platform, lo bisa pake CI/CD kayak GitHub Actions:
Perbandingan: Deno Desktop vs Electron vs TauriBiar lebih jelas, ini perbandingan ketiga teknologi:
Perbandingan Deno Desktop vs Electron vs Tauri:
Kalau lo mau baca dokumentasi lebih lanjut, cek Deno WebView docs dan Deno compile docs.
KesimpulanDeno 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.
