Всё началось с, казалось бы, простого желания
Мне хотелось написать небольшое приложение. Я работаю 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 (такой слоган придумал)
Фреймворк объединяет лучшие стороны остальных других инструментов:
Не тащит за собой chrome.
Позволяет использовать js/ts и на бэке и на фронте.
Одна кодовая база для всех платформ сразу.
Абстракция апи от реальной реализации на платформах.
Старается изо всех сил дать ощущение «работает как магия» — удобный 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
Спасибо, что дочитали это до конца! Рад, что вам была интересна моя работа!