Deno Desktop — настольные приложения на Deno 2.9
Обзор · 26 июня 2026

Deno Desktop:
настольные приложения на Deno 2.9

Практический туториал по новой команде deno desktop в Deno 2.9 — от hello world до интеграции с фреймворками, нативных API и распространения. Сравнение с Electron и Tauri.

Олег Максимов 26 июня 2026 18 мин чтения

Введение

Разработка настольных приложений с помощью веб-технологий традиционно означала одно: Electron. Он работает, но компромиссы известны — бандлы от 150 MB, полный Chromium на каждое окно и процесс Node.js, потребляющий память. Альтернативы вроде Tauri (на Rust, меньше размер) требуют отдельного тулчейна и знания другого языка для бэкенда.

Deno 2.9, выпущенный 25 июня 2026, представляет deno desktop — новую команду, которая превращает JavaScript и TypeScript проекты в нативные десктопные приложения для macOS, Windows и Linux. В отличие от Electron, вы можете выбирать между системным WebView и встроенным Chromium (CEF). В отличие от Tauri, всё пишется на TypeScript без дополнительных инструментов.

В этой статье я показываю создание реального десктопного приложения с нуля — установку, выбор WebView или CEF, нативные API (трей, окна), автодетект фреймворков, кросскомпиляцию и опцию --compress, сжимающую размер бандла с 65MB до 19MB.

Начало работы: ваше первое Deno desktop приложение

Убедитесь, что у вас установлен Deno 2.9. Обновитесь, если у вас старая версия: 

deno upgrade

Простейшее Deno desktop приложение — это скрипт с вызовом Deno.serve(). Десктопное окружение автоматически связывает сервер с портом, который открывает WebView.

Создайте файл main.ts: 

Deno.serve(() =>
  new Response(
    `<!DOCTYPE html><h1>Hello from Deno desktop 👋</h1>`,
    { headers: { "content-type": "text/html" } },
  )
);

Запустите: 

deno desktop main.ts

Всё. Откроется нативное окно с вашей HTML-страницей. Ни package.json, ни этапа сборки, ни шаблонного кода Electron. Deno.serve() внутри десктопной точки входа автоматически определяет окружение и подключается к правильному порту.

Горячая замена модулей (HMR)

Во время разработки используйте флаг --hmr для мгновенной перезагрузки при изменении файлов: 

deno desktop --hmr main.ts

WebView обновляется автоматически при сохранении кода — без ручного перезапуска. HMR сохраняет состояние приложения между перезагрузками.

WebView vs CEF: выбор бэкенда

Deno desktop даёт два варианта рендеринга — это одно из главных отличий от Electron, который всегда встраивает полный Chromium.

Характеристика WebView (по умолч.) CEF (Chromium)
Доп. размер ~1 MB ~45 MB
Движок рендеринга Системный (WKWebView / WebView2 / WebKitGTK) Встроенный Chromium
Консистентность Зависит от версии браузера в ОС Одинаковый рендеринг везде
Размер приложения (сжатый) ~19 MB ~65+ MB
Для чего лучше Внутренние инструменты Пользовательские приложения

По умолчанию Deno desktop использует системный WebView. Чтобы переключиться на CEF, добавьте секцию конфигурации в deno.json: 

{
  "desktop": {
    "backend": "cef"
  }
}

Автодетект фреймворков

Одна из самых практичных функций deno desktop — способность автоматически определять популярные веб-фреймворки. Запустите команду без точки входа в директории проекта — она определит фреймворк, соберёт его и обернёт в десктопное окно. 

cd my-nextjs-app
deno desktop           # автоопределение, сборка, запуск

Поддерживаются следующие фреймворки:

Нативные десктопные API

Deno.BrowserWindow

Программное управление размером, позицией, видимостью окна и DevTools: 

const win = new Deno.BrowserWindow({
  width: 1024,
  height: 768,
  title: "Моё приложение",
  resizable: true,
  devTools: Deno.env.get("DEV") ? true : false,
});

win.setPosition({ x: 100, y: 50 });
win.setMenuBar(false);
console.log(`ID окна: ${win.id}`);

Мост между WebView и Deno через window.bind(): 

// В точке входа Deno desktop
window.bind("readFile", async (path: string) => {
  return await Deno.readTextFile(path);
});
<script>
  // В HTML-странице
  const content = await bindings.readFile("/path/to/file.txt");
  document.getElementById("content").textContent = content;
</script>

Deno.Tray (системный трей)

const tray = new Deno.Tray();
const iconBytes = await Deno.readFile("./icon.png");
tray.setIcon(iconBytes);

const panel = tray.attachPanel({
  url: "http://localhost:8000/panel",
});

Deno.Dock (macOS) и автообновления

if (Deno.build.os === "darwin") {
  Deno.Dock.setBadge("3");
}

const updater = Deno.autoUpdate({
  interval: 1000 * 60 * 60 * 6,
  endpoint: "https://updates.example.com/check",
});

Кросскомпиляция

Deno desktop поддерживает кросскомпиляцию — сборку для macOS из Linux, для Windows из macOS, всё из одной кодовой базы: 

deno desktop main.ts --target x86_64-unknown-linux-gnu
deno desktop main.ts --target x86_64-apple-darwin
deno desktop main.ts --target x86_64-pc-windows-msvc

# Со сжатием
deno desktop main.ts --compress --target x86_64-apple-darwin

Флаг --compress: с 65MB до 19MB

Как отмечено в JavaScript Weekly #791, опция --compress радикально уменьшает размер пакета. В тестах с простым приложением сжатие уменьшает бинарник с ~65MB до ~19MB. 

deno desktop main.ts --compress

Deno Desktop vs Electron vs Tauri

Параметр Deno Desktop Electron Tauri
Язык TypeScript / JavaScript JavaScript + Node.js Rust + JS фронтенд
Мин. размер ~19 MB (сжатый, WebView) ~150 MB ~3 MB
Установка Только Deno Node.js + npm Rust + Cargo + система
Рендеринг WebView или CEF Chromium (всегда) Системный WebView
Нативные API Встроенные Deno.* Node.js + electron модули Rust команды через IPC
Кросскомпиляция Встроенная Отдельные агенты сборки Отдельные агенты сборки
Автодетект фреймворков Встроенный (10+) Ручная настройка Ручная настройка
Зрелость Экспериментальный (2.9) Зрелый (10+ лет) Стабильный (2.x)

Deno desktop не заменит Electron для сложных зрелых продуктов за один день — экосистема Electron из плагинов, инструментов отладки и сообщества нарабатывалась 10 лет. Но для новых проектов, особенно внутренних инструментов и прототипов, Deno desktop предлагает гораздо более простой процесс разработки при значительно меньшем размере приложения.

О развитии Electron читайте в моём сравнении Electron 43 beta — улучшения производительности. Подробнее о возможностях Deno в целом — в обзоре Deno 2.8.

Пример: редактор заметок в Markdown

Полный пример простого десктопного приложения для заметок. Демонстрирует точку входа, доступ к файловой системе, нативные диалоги и мост JS-Deno.

Шаг 1: Точка входа — main.ts

import { serve } from "jsr:@std/http/server";

let notes: Array<{ title: string; content: string }> = [];

const handler = (req: Request): Response => {
  const url = new URL(req.url);

  if (url.pathname === "/api/notes" && req.method === "GET") {
    return Response.json(notes);
  }
  if (url.pathname === "/api/notes" && req.method === "POST") {
    const note = await req.json();
    notes.push(note);
    return Response.json({ ok: true });
  }

  return new Response(html, {
    headers: { "content-type": "text/html" },
  });
};

serve(handler);

Шаг 2: HTML-интерфейс

const html = `<!DOCTYPE html>
<html>
<head><title>Заметки</title></head>
<body>
  <h1>Мои заметки</h1>
  <textarea id="editor"></textarea>
  <button onclick="saveNote()">Сохранить</button>
  <div id="notes"></div>
  <script>
    async function saveNote() {
      const content = document.getElementById('editor').value;
      await fetch('/api/notes', {
        method: 'POST',
        body: JSON.stringify({ title: 'Note', content })
      });
      loadNotes();
    }
    async function loadNotes() {
      const res = await fetch('/api/notes');
      const notes = await res.json();
      document.getElementById('notes').innerHTML =
        notes.map(n => '<div>' + n.content + '</div>').join('');
    }
    loadNotes();
  </script>
</body>
</html>`;

Шаг 3: Сборка и распространение

deno desktop main.ts --hmr
deno desktop main.ts --compress --target x86_64-apple-darwin

Ограничения

FAQ

Что такое deno desktop в Deno 2.9?
deno desktop — новая команда Deno 2.9 (экспериментальная), которая превращает JavaScript и TypeScript проекты в нативные десктопные приложения для macOS, Windows и Linux. Вместо Electron или Tauri, команда интегрирует WebView или Chromium напрямую в Deno.
Чем Deno desktop отличается от Electron?
В отличие от Electron, который встраивает Chromium в каждое приложение (150-200MB), Deno desktop позволяет выбрать между системным WebView (~1MB) или встроенным CEF Chromium. Флаг --compress уменьшает бандл с ~65MB до ~19MB. Вместо Node.js используется сам Deno.
Какие фреймворки поддерживает deno desktop?
deno desktop автоматически определяет Next.js, Astro, Fresh, Remix, Nuxt, SvelteKit, SolidStart, TanStack Start и любые Vite SSR проекты. Запустите deno desktop без аргументов — он сам построит и обернёт ваш фреймворк.
Можно ли использовать нативные API с Deno desktop?
Да. Deno 2.9 предоставляет Deno.BrowserWindow (окна), Deno.Tray (системный трей), Deno.Dock (macOS Dock) и Deno.autoUpdate (автообновления). Prompt/alert/confirm отображаются как нативные диалоги ОС.
Как выбрать между WebView и CEF бэкендом?
WebView меньше (~1MB) но зависит от браузера в ОС. CEF больше, но даёт одинаковый рендеринг на всех платформах. Для внутренних инструментов — WebView, для пользовательских приложений — CEF.
Когда выйдет стабильная версия deno desktop?
deno desktop экспериментален в Deno 2.9 (выпущен 25 июня 2026). Подходит для прототипов и внутренних инструментов. Стабильный выпуск ожидается в 2.10+.
Контакты

Нужно веб-приложение или десктопный инструмент?

Я создаю полноценные веб-приложения и помогу оценить, какой подход — Deno desktop, Electron или Tauri — лучше подходит для вашего проекта. Свяжитесь для консультации.

[email protected]