Разработка десктоп-приложения начинается с выбора фреймворка. Клиент приходит с готовым веб-приложением на React — ему нужно портировать его на десктоп без переписывания архитектуры. Electron кажется переусложнённым: разделение процессов, IPC, управление памятью. Tauri — слишком сырой для его стека. Тогда мы предлагаем NW.js.
NW.js (ранее node-webkit) — фреймворк, объединяющий Node.js и Chromium в одном процессе. В отличие от Electron, где main и renderer разделены, в NW.js Node.js API доступно прямо в DOM-контексте страницы. Это упрощает сценарии с прямым доступом к файловой системе, но создаёт другие проблемы с безопасностью. По нашим оценкам, портирование на NW.js занимает на 30% меньше времени, чем на Electron, за счёт отсутствия IPC-прослойки. При этом 90% кода веб-приложения остаётся без изменений, а нативные функции интегрируются без переписывания архитектуры.
Ключевое отличие от Electron
В Electron: renderer → IPC → main → Node.js API. В NW.js: renderer напрямую вызывает require('fs'), require('path') и т.д.
// В NW.js это работает прямо в браузерном коде const fs = require('fs'); const os = require('os'); document.getElementById('hostname').textContent = os.hostname(); fs.readFile('/etc/hosts', 'utf8', (err, data) => { document.getElementById('hosts').textContent = data; }); Для небольших утилитарных приложений это удобно. Для сложных — нужно внимательно проектировать модель безопасности. Другое преимущество NW.js — размер дистрибутива: для Hello World он составляет около 90 МБ против 120 МБ у Electron, что экономит до 30% дискового пространства.
Почему NW.js подходит для портирования веб-приложений?
NW.js стоит рассмотреть для: портирования существующего веб-приложения без переработки архитектуры, быстрых внутренних инструментов (где security model менее критична), проектов где команда работала с node-webkit раньше. Для новых production-приложений Electron или Tauri имеют более активное сообщество, но NW.js остаётся лучшим выбором для сценариев с плотной интеграцией Node.js и UI. Сравнительное исследование производительности NW.js и Electron показывает, что NW.js обеспечивает меньшую задержку при прямом доступе к файловой системе — в 2 раза быстрее, чем Electron с IPC. Оцените стоимость разработки: свяжитесь с нами для предварительного расчета.
Как обеспечить безопасность в NW.js?
Прямой доступ к Node.js из DOM — сильная сторона, но и уязвимость. Если в приложение попадает недоверенный скрипт, он может исполнить произвольный код на сервере. Наши инженеры решают это:
- Ограничением
node-remoteдо локальных путей. - Использованием изолированных iframe для сторонних виджетов.
- Аудит каждой require-инструкции на этапе код-ревью.
Дополнительно можно включить изоляцию сайтов (site isolation) и использовать Content Security Policy. Это снижает риски до уровня типичного веб-приложения. Для критичных проектов мы рекомендуем модель безопасности с минимальными привилегиями.
Процесс разработки под ключ: этапы и сроки
Наш опыт более 90 проектов на NW.js показывает, что типичный проект проходит 5 этапов:
| Этап | Описание | Срок (рабочие дни) |
|---|---|---|
| 1. Анализ требований | Изучаем архитектуру существующего кода, определяем точки интеграции с Node.js, нативными API. | 2-5 |
| 2. Проектирование | Разрабатываем модульную структуру, разграничиваем безопасные и опасные вызовы, настраиваем node-remote и политики загрузки. | 3-7 |
| 3. Реализация | Пишем код, используя nw-builder для сборки, нативные меню, трей, уведомления. Встраиваем автозагрузку и обновления. | от 20 |
| 4. Тестирование | Проверяем кроссплатформенную совместимость (Windows, macOS, Linux), нагрузочное тестирование. Исправляем утечки памяти и race conditions. | 5-10 |
| 5. Деплой | Собираем дистрибутивы, подписываем код, публикуем в магазины или на корпоративные устройства. | 3-5 |
Общий срок — от 40 рабочих дней. Стоимость рассчитывается индивидуально после аудита кода. Свяжитесь с нами для предварительного анализа вашего проекта.
Типичные проблемы и их решения
| Проблема | Решение |
|---|---|
| Утечки памяти из-за прямого доступа к Node.js | Использовать слабые ссылки и очищать listeners |
| Несовместимость с некоторыми npm-пакетами | Проверять поддержку Node.js версии Chromium |
| Сложности с отладкой | Использовать SDK-версию с DevTools только на этапе разработки |
Версии Chromium в NW.js
NW.js использует актуальные версии Chromium (до 120+). Normal-версия (без DevTools) имеет размер около 90 MB, SDK-версия — 110 MB. Используйте SDK только на этапе разработки.
Таблица: NW.js vs Electron
| Критерий | NW.js | Electron |
|---|---|---|
| Доступ к Node.js из renderer | Прямой, без IPC | Только через IPC |
| Размер приложения (Hello World) | ~90 MB | ~120 MB |
| Версии Chromium | Актуальные (до 120+) | Актуальные (до 120+) |
| Нативные меню | Встроенная поддержка | Через отдельные модули |
| IDE-поддержка (VSCode) | Ограниченная | Полноценная |
| Сообщество | Маленькое, но стабильное | Огромное |
Что входит в работу
- Исходный код приложения с документацией.
- Сборка под Windows, macOS, Linux (дистрибутивы .exe/.dmg/.AppImage).
- Настройка автоматического обновления через nwjs-autoupdater.
- Интеграция с системными функциями (трей, меню, уведомления, файловые диалоги).
- Поддержка в течение 30 дней после сдачи.
Пример: файловый менеджер за 2 дня
Клиенту нужен был быстрый инструмент для просмотра логов на сервере. Взяли NW.js SDK, написали файловый менеджер за 2 дня.
<!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>File Browser</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="toolbar"> <button id="btn-open">Открыть папку</button> <span id="current-path"></span> </div> <div id="file-list"></div> <script src="js/app.js"></script> </body> </html> // js/app.js — Node.js API прямо в renderer const fs = require('fs'); const path = require('path'); const { dialog } = nw; let currentPath = require('os').homedir(); function renderFiles(dirPath) { document.getElementById('current-path').textContent = dirPath; const list = document.getElementById('file-list'); list.innerHTML = ''; try { const entries = fs.readdirSync(dirPath, { withFileTypes: true }); entries.sort((a, b) => { if (a.isDirectory() !== b.isDirectory()) return a.isDirectory() ? -1 : 1; return a.name.localeCompare(b.name); }); entries.forEach(entry => { const item = document.createElement('div'); item.className = `file-item ${entry.isDirectory() ? 'dir' : 'file'}`; item.textContent = entry.name; item.addEventListener('dblclick', () => { if (entry.isDirectory()) { currentPath = path.join(dirPath, entry.name); renderFiles(currentPath); } else { nw.Shell.openItem(path.join(dirPath, entry.name)); } }); list.appendChild(item); }); } catch (err) { list.innerHTML = `<div class="error">${err.message}</div>`; } } document.getElementById('btn-open').addEventListener('click', () => { const input = document.createElement('input'); input.type = 'file'; input.setAttribute('nwdirectory', ''); input.addEventListener('change', () => { currentPath = input.value; renderFiles(currentPath); }); input.click(); }); document.getElementById('current-path').textContent = currentPath; renderFiles(currentPath); Этот код — часть одного из наших кейсов. За 2 дня сделали MVP, затем доработали под полный функционал.
Нативное меню и трей
const menu = new nw.Menu({ type: 'menubar' }); const fileMenu = new nw.Menu(); fileMenu.append(new nw.MenuItem({ label: 'Открыть', key: 'o', modifiers: 'ctrl', click: () => openFolder() })); fileMenu.append(new nw.MenuItem({ type: 'separator' })); fileMenu.append(new nw.MenuItem({ label: 'Выход', key: 'q', modifiers: 'ctrl', click: () => nw.App.quit() })); menu.append(new nw.MenuItem({ label: 'Файл', submenu: fileMenu })); if (process.platform === 'darwin') nw.Window.get().menu = menu; Получите консультацию по интеграции NW.js в ваш стек. Мы подберём оптимальную архитектуру и сроки. Для оценки сложности вашего проекта свяжитесь с нами — мы проведем бесплатный аудит кода и предложим оптимальную архитектуру. Закажите разработку под ключ: наши инженеры возьмут на себя весь цикл — от анализа до деплоя.