Я устал от Electron, Tauri и Neutralino — и случайно сделал… лучше?

Всё началось с, казалось бы, простого желания

Мне хотелось написать небольшое приложение. Я работаю fullstack‑разработчиком, поэтому для разработки я решил использовать web‑технологии. Мне хотелось, чтобы я мог написать код один раз, и чтобы он запускался на всех моих устройствах (windows, linux, android).

Самое главное: написать приложение быстро

Мне хотелось использовать готовые инструменты. Я был уверен, что их мне будет достаточно. Посмотрел на существующие решения: electron, neutralinojs, apache cordova, tauri, capacitor, … Все они мне не нравились по разным причинам. Разберём основные моменты:

Electron — в каждое приложение (даже в мой hello world) запихивает chrome (130mb). Для моего простейшего приложения — это очень плохо. Не умеет упаковываться в мобильное приложение.

Neutralinojs — backend нужно писать на c++, также не умеет в мобилки.

Apache cordova, capacitor — умеют упаковываться только в мобилки. Capacitor умеет упаковываться (с помощью electron) в десктоп, но проблему electron мы обсудили.

Tauri — хороший инструмент. Но он не для меня, не хочу писать на rust. Хочу всё приложение писать на typescript, к которому привык. Порог входа этого инструмента слишком высокий

Wails — тоже хороший, но использует Go.

PWA — хочется именно нативное приложение, которое можно было бы распространять в google play + проблема десктопа остаётся.

В общем, мне не нравилось, что при выборе мне всегда нужно с чем‑то мириться. Я подумал: а что если просто взять системный WebView и Node.js, и склеить их вместе?

Если не нашёл подходящее чужое, то напишу своё?

В какой‑то момент я решился погрузиться в разработку. Спустя вот уже два года (от идеи до работающей реализации), я представляю вам:

Webnative — Build Web, Ship Anywhere (такой слоган придумал)

Фреймворк объединяет лучшие стороны остальных других инструментов:

1. Не тащит за собой chrome.

2. Позволяет использовать js/ts и на бэке и на фронте.

3. Одна кодовая база для всех платформ сразу.

4. Абстракция апи от реальной реализации на платформах.

5. Старается изо всех сил дать ощущение «работает как магия» — удобный dx.

Главная цель проекта —

позаботиться о fullstack разработчиках, дать им удобный и простой инструмент для сборки приложений под любые платформы.

На данный момент поддерживаются linux, windows и android. Далее планирую поддерживать и остальные платформы: macos, ios.

Как начать пользоваться:

npm install -g @mindw1n/webnative

webnative init my-app && cd my-app

webnative build linux

Всё! Через 7 секунд у тебя готовый AppImage.

Довольно простой синтаксис: webnative build <platform>. При этом <platform> — это windows, linux, android или all (все по очереди).

Структура проекта тоже очень простая:

my-app/

app/ # любой фреймворк: React, Vue, Svelte, vanilla

app/backend/ # Node.js, точка входа index.ts / index.js

webnative.json # конфиг

Внутри app и backend есть по папке api, чтобы удобно абстрагировать специфичный для платформы код. Также я написал и опубликовал библиотеку webnative‑core, она позволяет необходимые апи для десктопа. Апи для мобильных устройств можно взять у Capacitor, они работают из коробки без проблем.

Как это работает изнутри (только для очень любопытных)

Если тебе интересно только «поставил и работает» — листай до следующего раздела. Здесь для тех, кто хочет понять, что происходит под капотом.

C++ хост‑процесс запускает два дочерних процесса: WebView с твоим фронтендом и Node.js с твоим бэкендом. C++ при запуске nodejs открывает pipe и передаёт fd процессу nodejs. Тот в свою очередь запускает http сервер и отправляет по трубе (pipe) данные:

{ "port": number, "key": string }

Эти данные нужны для того, чтобы фронтенд мог напрямую разговаривать с бекендом по защищённому каналу. Защищён он ключом «key», который сервер генерирует и при запросе проверяет.

Всё максимально кастомизируемо: бекенд пишется разработчиком, фронт тоже. С++ нужен был только чтобы их подружить.

Думаю, остальные детали реализации я опишу уже в документации к проекту.

Бенчмарки

Давайте сравним Webnative и Electron (самый популярный фреймворк для создания приложений на десктоп)

Все замеры — на реальных hello‑world проектах. webnative app с фронтендом и Node.js бэкендом против стандартного electron-builder

Время сборки

webnative build linux   —   7.4 секelectron-builder        —   19.3 се

Webnative собирается в 2.6 раза быстрее!

Размер дистрибутива

webnative (fullstack AppImage)       —   36 МБwebnative (frontend-only AppImage)   —   1.1 МБElectron AppImage                    —   130 МБ

36 МБ против 130 МБ — потому что мы не тащим Chromium. А если бэкенд не нужен, то 1.1 МБ — это просто нативное окно с WebKit внутри.

Потребление RAM

webnative (+ системный WebKit)   —   ~300 МБElectron                         —   ~566 МБ

Важная оговорка: WebKit в случае webnative — системный, он уже есть на машине. webnative его не устанавливает и не дублирует. Electron же тащит свой Chromium в каждое приложение отдельно.

Заключение

Если у Вас остались вопросы или вы хотите присоединиться к проекту, то вот ссылка на github проекта: https://github.com/kl1ro/webnative.git

Также прикрепляю пример использования: https://www.youtube.com/watch?v=BdnwlwOvEts

Спасибо, что дочитали это до конца! Рад, что вам была интересна моя работа!