Zero Native: Убийца Electron от Vercel, которого никто не ждал

РусскийالعربيةDeutschEnglishEspañolFrançaisहिन्दीBahasa Indonesia日本語한국어Português中文
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00Это Xero Native, нативный конструктор приложений на базе Zig от Vercel, который может использовать системный webview,
00:00:05либо упаковывать весь Chromium целиком, как Electron, для десктопных или мобильных приложений, создавая крошечные файлы
00:00:12и обеспечивая мгновенную пересборку в процессе разработки.
00:00:14Но не отпугнет ли JavaScript-разработчиков тот факт, что для работы нужно немного знать Zig?
00:00:18Подписывайтесь, и давайте выясним.
00:00:20Хотя команда BUN переходит с Zig на Rust, это все равно очень крутой язык:
00:00:28в нем нет borrow checker и времен жизни (lifetimes), он может напрямую вызывать C, а значит, любая C-библиотека подключается одним импортом
00:00:35без необходимости писать какой-либо связующий код.
00:00:37И он достаточно понятен, чтобы JavaScript-разработчики могли его освоить.
00:00:39Кстати, если хотите посмотреть, как я учусь программировать на Zig с нуля, дайте знать в комментариях.
00:00:44Думаю, это будет довольно весело.
00:00:46Но по сути, Xero Native — это тонкая оболочка на Zig, в которой работает webview, отрисовывающая фронтенд,
00:00:51и использует JSON-мосты, чтобы JavaScript в webview мог взаимодействовать с нативным слоем Zig и наоборот.
00:00:58Именно так приложение получает доступ к системным API ОС.
00:01:01Если вам кажется, что это похоже на Electrobun, что ж, так оно и есть.
00:01:04Но с одним огромным отличием, о котором мы поговорим позже в видео.
00:01:07А пока давайте перейдем к очень простому демо.
00:01:10Для начала вам нужно установить Zig, что я и сделал с помощью Miez.
00:01:13Но можно использовать и Brew, а затем установить Xero Native.
00:01:16После этого вы можете запустить команду “xero-native init”, чтобы создать структуру нового проекта.
00:01:22Это название моего проекта, но оно может быть любым.
00:01:25Я использую флаг фронтенда с React, что установит проект Vite React.
00:01:30Но это также может быть Svelte, Vue, Next или даже просто чистый Vite.
00:01:34Нажимаем Enter, и Xero Native добавит несколько директорий.
00:01:37Перейдя в проект, мы видим файл app.zon (Zig Object Notation), который я разберу позже.
00:01:43У нас есть папка assets для иконок и статики, а также файл build.zig,
00:01:48который отвечает за граф сборки Zig, JS-мост, веб-движок и директорию frontend с нашим кодом.
00:01:54На самом деле, если мы заглянем туда, то увидим файлы, привычные для JavaScript-разработчика.
00:01:58Теперь, если мы выполним команду «zig build run», установятся все зависимости и наше приложение откроется в новом окне.
00:02:04Заметьте, если вы хотите установить Xero Native в уже существующий JavaScript-проект,
00:02:08рекомендую использовать Vite-версию и заменить содержимое папки frontend кодом вашего приложения.
00:02:15У Xero Native также есть крутой dev-сервер, который управляет всем жизненным циклом фронтенда.
00:02:19Запуск “zig build dev” компилирует бинарный файл и запускает сервер разработки.
00:02:24Если я изменю код, нативное приложение обновится в реальном времени.
00:02:28Я даже могу запустить “zig build package”, чтобы собрать нативное приложение для дистрибуции.
00:02:33Оно находится в папке zig-out/package и весит всего 2,9 МБ — это очень мало.
00:02:39А некоторым даже удавалось довести размер до менее чем 1 МБ.
00:02:43Но что, если я захочу сменить иконку, название или веб-движок?
00:02:46Здесь на помощь приходит файл app.zon, где можно менять иконку, имя проекта, движок и даже размер окна.
00:02:55Вот такой очень краткий обзор Xero Native.
00:02:58Я не успел разобрать многое: иконки в трее, подпись кода и встроенные приложения для iOS и Android.
00:03:05Мне нужно уделить этому больше времени, что может вылиться в еще одно видео.
00:03:09При всей крутости Xero Native, как он в сравнении с Electrobun, который тоже создает быстрые приложения на системном webview?
00:03:17В Electrobun сам Bun является средой выполнения, так как основной процесс пишется на TypeScript.
00:03:24Хотя приложение запускает бинарник Zig, код работает внутри Bun web worker, общаясь с нативными API через FFI через слои C++ и Objective-C.
00:03:37С Xero Native же нужен только бинарник Zig: никакого JavaScript или Bun, только Zig, который общается с API ОС и C-библиотеками напрямую.
00:03:50Это дает максимально тонкую нативную оболочку по сравнению с Electrobun.
00:03:54Правда, сейчас вам может понадобиться написать немного кода на Zig или поменять настройки в файле .zon.
00:04:03Также Xero Native пока не так богат функциями, как Electrobun, где я мог менять стиль заголовка или добавлять пункты меню.
00:04:11К сожалению, в файле app.zon эти вещи сейчас не поддерживаются.
00:04:15Мне даже пришлось создать тикет, так как сборка пакета на macOS не сработала с первого раза, но возможно, дело во мне.
00:04:22Тем не менее, уверен, команда работает над новыми функциями, исправлением багов и поддержкой мобильных устройств.
00:04:29А если вам не терпится — это же открытый код.
00:04:32Просто скормите его Claude, скажите, что нужно, и он наверняка допишет эти функции за вас, верно?

Key Takeaway

Xero Native заменяет тяжеловесный Electron на сверхлегкие бинарные файлы Zig размером менее 3 МБ, обеспечивая прямой доступ к системным API через JSON-мосты без промежуточных сред выполнения вроде Bun.

Highlights

  • Xero Native создает нативные приложения весом от 1 до 2,9 МБ, используя системный webview или упаковывая Chromium.

  • Инструмент использует язык Zig для прямого вызова C-библиотек без написания связующего кода или использования borrow checker.

  • Архитектура базируется на тонкой оболочке Zig и JSON-мостах для взаимодействия JavaScript с системными API операционной системы.

  • Команда «zig build dev» запускает сервер разработки с поддержкой мгновенного обновления нативного интерфейса при изменении кода.

  • В отличие от Electrobun, Xero Native исключает использование среды выполнения Bun или Node.js в основном процессе, оставляя только бинарный файл Zig.

Timeline

Технологический стек и архитектура на базе Zig

  • Язык Zig позволяет подключать любую C-библиотеку одним импортом без создания дополнительного связующего кода.
  • Система использует JSON-мосты для связи фронтенда на JavaScript с нативным слоем операционной системы через Zig.
  • Разработчик может выбирать между использованием системного webview для уменьшения размера или полной упаковкой Chromium.

Основой проекта служит язык программирования Zig, который отличается отсутствием сложных механизмов владения памятью (lifetimes) и прямой совместимостью с C. Это позволяет создавать максимально тонкую прослойку между веб-интерфейсом и функциями ОС. Архитектура Xero Native исключает необходимость в тяжелых средах выполнения внутри основного процесса.

Процесс инициализации и разработки проекта

  • Команда «xero-native init» разворачивает структуру проекта с поддержкой React, Svelte, Vue или Next.js.
  • Файл app.zon (Zig Object Notation) управляет метаданными приложения, включая иконки и параметры окна.
  • Существующие JavaScript-проекты интегрируются путем замены содержимого папки frontend в шаблоне Vite.

Установка инструментария возможна через менеджеры пакетов Miez или Brew. Структура проекта включает папку assets для статических ресурсов и файл build.zig для настройки графа сборки и JS-моста. При первом запуске команды сборки система автоматически загружает все необходимые зависимости и открывает окно приложения.

Сборка, оптимизация размера и управление конфигурацией

  • Готовый пакет для дистрибуции занимает всего 2,9 МБ в папке zig-out/package.
  • Сервер разработки компилирует бинарный файл и обновляет запущенное приложение в реальном времени.
  • Файл конфигурации app.zon позволяет изменять движок рендеринга и размеры окна без правки исходного кода.

Оптимизация позволяет некоторым приложениям достигать веса менее 1 МБ, что значительно меньше стандартных сборок на Electron. Инструмент поддерживает встроенную разработку для десктопных систем, а также имеет задел для работы с iOS и Android. Файл app.zon служит центральной точкой настройки всех визуальных и технических параметров исполняемого файла.

Сравнение с Electrobun и текущие ограничения

  • Xero Native работает без внешней среды выполнения JavaScript, в то время как Electrobun требует наличия Bun.
  • Текущая версия ограничена в настройках стилей заголовков окон и элементов системного меню.
  • Прямое общение Zig с API операционной системы исключает лишние слои C++ и Objective-C.

Основное различие заключается в отсутствии зависимости от Bun web worker в Xero Native, что делает оболочку еще более легкой. На текущем этапе разработки проект уступает конкурентам по количеству доступных функций кастомизации интерфейса через конфигурационный файл. Открытый исходный код позволяет разработчикам самостоятельно добавлять недостающие возможности или исправлять ошибки сборки на специфических платформах.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video