00:00:00Это ElectroBun — кроссплатформенный фреймворк для создания десктопных приложений,
00:00:05который весит гораздо меньше Electron, не требует писать на Rust как Tauri и дает
00:00:11нативную производительность благодаря Bun и оберткам на C++. Никакого Node.js и V8.
00:00:18Но не станет ли использование системного WebView вместо привычного Chromium
00:00:22проблемой при создании по-настоящему кроссплатформенных приложений?
00:00:27Подписывайтесь, и давайте во всем разберемся.
00:00:32С тех пор как Bun анонсировали исполняемые файлы для фулстека в прошлом году,
00:00:36я очень ждал появления достойной альтернативы Electron.
00:00:40Но после поглощения компанией Anthropic (об этом я расскажу позже в видео),
00:00:44маловероятно, что команда Bun будет развиваться именно в этом направлении.
00:00:49Поэтому Yoav из Blackboard создал ElectroBun — это лучшее воплощение «Bun Electron»,
00:00:55и на нем уже собрали крутые штуки: гибридный браузер, терминал и редактор кода
00:01:01под названием Colab, приложение для озвучки текста на Quen и даже запустили Doom
00:01:07через WebGPU. Давайте посмотрим, как использовать его в простом проекте.
00:01:12При первой инициализации ElectroBun вы получаете доступ к набору шаблонов,
00:01:17чтобы понять принцип работы: от простого блокнота до многооконных приложений
00:01:22и даже утилиты в трее, которая открывает документацию прямо в браузере.
00:01:26Поскольку ElectroBun поддерживает веб-технологии, можно брать любой JS-фреймворк:
00:01:31от Svelte и Vue до Solid.js и даже Angular.
00:01:35Но я покажу создание базового проекта с нуля, чтобы вы во всем разобрались.
00:01:40Итак, у меня есть простое приложение Bun React, которое мы превратим в нативное для Mac
00:01:45с помощью ElectroBun. Сам фреймворк у меня уже установлен,
00:01:49также готовы скрипты для запуска сборки в режиме разработки
00:01:53и скрипт для финальной сборки приложения.
00:01:55Кстати, этот «type module» нам здесь не понадобится, можем убрать.
00:01:59В корне проекта я создал конфигурационный файл ElectroBun,
00:02:03где указано название приложения, идентификатор и точка входа для сборки Bun.
00:02:09Точку входа я еще не создал, так что займемся этим прямо сейчас.
00:02:12В папке source я создал подпапку bun с файлом index.ts,
00:02:17который инициализирует класс окна браузера. Он принимает заголовок окна,
00:02:22который будет отображаться в верхней панели, и URL-адрес,
00:02:25который приложение загрузит при запуске.
00:02:28Если мы запустим «bun start», приложение откроется с нужным заголовком,
00:02:32но внутри будет пусто. Это потому, что после того как Bun соберет приложение —
00:02:36преобразует TypeScript в JS, сделает tree shaking и прочее —
00:02:41он помещает файлы в другую директорию, на которую нужно сослаться в точке входа.
00:02:46А мы этот момент пока не настроили.
00:02:48Чтобы это исправить, нужно открыть конфиг ElectroBun и добавить объект «views»,
00:02:53в котором перечисляются все представления, доступные фреймворку.
00:02:57Назовем наше вью «main» и укажем точку входа index.html,
00:03:02который содержит фронтенд-код со ссылками на приложение —
00:03:06там лежат все JS и CSS файлы, необходимые для правильной работы.
00:03:09Подробнее о конфигурации сборки можно почитать в документации ElectroBun.
00:03:13Теперь, когда основное вью прописано в папке source/bun,
00:03:17мы можем обновить index.ts, чтобы URL вел на директорию «views/main».
00:03:23Теперь при сборке приложения все должно заработать как надо.
00:03:28Мы даже можем придать ему более нативный вид, скрыв панель заголовка.
00:03:34Также можно использовать объект «application menu» для создания собственного меню.
00:03:39Когда все готово, собираем версию для продакшена: получаем DMG-файл на 17 МБ
00:03:44и само приложение весом 65 МБ. Если сравнить с типичным «Hello World» на Electron,
00:03:50который весит 271 МБ, — ElectroBun компактнее более чем в четыре раза.
00:03:56Так как ElectroBun использует нативные WebView (WebKit в Mac,
00:04:01Edge WebView 2 в Windows и WebKit GTK в Linux), нужно учитывать нюансы
00:04:08поддержки функций разными движками при кроссплатформенной разработке.
00:04:11Хотя ElectroBun поддерживает Chromium Embedded Framework для единообразия,
00:04:16это добавит в пакет полноценный Chromium, что скажется на размере и памяти.
00:04:22В таком случае он станет почти как Electron, не считая использования Bun.
00:04:27У ElectroBun есть и другие крутые фишки, о которых я не упомянул:
00:04:32например, архитектура iframe вне основного процесса для изоляции WebView,
00:04:38типизированный RPC для связи между процессами, сжатие ZSTD,
00:04:44самораспаковывающаяся обертка, подпись кода и многое другое.
00:04:48К сожалению, при создании демо-приложения я столкнулся с проблемами —
00:04:54местами не хватает документации, особенно по входному файлу ElectroBun.
00:04:58Иногда мерцал экран при перезагрузке страницы, а инспектор портил верстку.
00:05:03Но ElectroBun совсем новый проект, первый коммит был только в феврале.
00:05:09Я уверен, что эти моменты исправят в будущем.
00:05:13Я на это очень надеюсь, потому что команда Bun после покупки
00:05:19компанией Anthropic больше сосредоточилась на CLI и исполняемых файлах,
00:05:25а не на создании собственной альтернативы Electron.
00:05:31Похоже, ElectroBun — наш лучший шанс на кроссплатформенный инструмент на базе Bun.
00:05:37Если вы ничего не знаете о сделке Bun и Anthropic или хотите узнать,
00:05:42куда теперь движется проект, посмотрите видео Джеймса,
00:05:48где он подробно разбирает эту ситуацию.