Zero Native: Vercels Electron-Killer, mit dem niemand gerechnet hat

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

Transcript

00:00:00Das ist Xero Native, ein Zig-basierter nativer App-Builder von the-cell, der entweder die System-Webview nutzen
00:00:05oder das gesamte Chromium wie bei Electron für Desktop- oder Mobil-Apps bündeln kann, was winzige Binärdateien
00:00:12und sofortige Rebuilds für die Entwicklung ermöglicht.
00:00:14Aber wird die Tatsache, dass man etwas Zig können muss, JavaScript-Entwickler abschrecken?
00:00:18Abonniert den Kanal und finden wir es heraus.
00:00:20Obwohl das BUN-Team sich von Zig weg hin zu Rust bewegt, ist es immer noch eine sehr coole Sprache,
00:00:28ohne Borrow-Checker oder Lifetimes, die C direkt aufrufen kann – jede C-Bibliothek ist nur einen Import entfernt,
00:00:35ganz ohne Glue-Code.
00:00:37Und sie ist lesbar genug für JavaScript-Entwickler.
00:00:39Wenn ihr mir dabei zusehen wollt, wie ich Zig von Grund auf lerne, schreibt es mir in die Kommentare.
00:00:44Ich glaube, das könnte eine ziemlich lustige Sache werden.
00:00:46Im Grunde ist Xero Native eine dünne Zig-Hülle, die eine Webview hostet, die ein Frontend rendert,
00:00:51das JSON-Bridges nutzt, damit das JavaScript in der Webview mit der nativen Zig-Ebene kommunizieren kann und umgekehrt,
00:00:58wodurch OS-Level-APIs erreicht werden können.
00:01:01Und falls ihr denkt, das klingt wie ElectroBUN – nun, das tut es.
00:01:04Aber mit einem riesigen Unterschied, über den wir später im Video sprechen.
00:01:07Aber schauen wir uns erst einmal eine ganz einfache Demo an.
00:01:10Um loszulegen, müsst ihr zuerst Zig installiert haben, was ich mit Miez gemacht habe.
00:01:13Ihr könnt aber auch Brew nutzen und dann Xero Native installieren.
00:01:16Danach könnt ihr den Befehl “Xero Native init” ausführen, um ein neues Projekt zu erstellen.
00:01:22Das ist der Name meines Projekts, aber er kann beliebig gewählt werden.
00:01:25Ich verwende das Frontend-Flag mit React, wodurch ein Vite-React-Projekt installiert wird.
00:01:30Es könnte aber auch Svelte, Vue, Nex oder einfach nur Vite sein.
00:01:34Wenn ich Enter drücke, fügt Xero Native einige Verzeichnisse hinzu.
00:01:37Wenn wir in das Demo-Projekt wechseln, sehen wir die app.zon-Datei, auf die ich später eingehe.
00:01:43Wir haben Assets für Icons und Statisches, die build.zig-Datei,
00:01:48die für den Zig-Build-Graph zuständig ist, die JS-Bridge, die Web-Engine und das Frontend-Verzeichnis.
00:01:54Dort finden wir Dateien, die wir als JavaScript-Entwickler gewohnt sind.
00:01:58Wenn wir nun “zig build run” ausführen, werden alle Abhängigkeiten installiert und die App öffnet sich.
00:02:04Hinweis: Wenn ihr Xero Native in ein bestehendes JavaScript-Projekt integrieren wollt,
00:02:08empfehle ich die Vite-Minimalversion und den Austausch des Codes im Frontend-Verzeichnis.
00:02:15Xero Native hat zudem einen coolen Dev-Server für den gesamten Frontend-Lebenszyklus.
00:02:19Mit “zig build dev” wird die Binärdatei kompiliert und der Xero Native Dev-Server gestartet.
00:02:24Wenn ich den Code bearbeite, sehen wir die Updates in der nativen App in Echtzeit.
00:02:28Ich kann auch “zig build package” ausführen, um die App für die Verteilung zu erstellen.
00:02:33Sie liegt dann im Verzeichnis zig-out/package und ist nur 2,9 MB groß – sehr klein.
00:02:39Einige haben es sogar geschafft, sie unter 1 MB zu bringen.
00:02:43Aber was, wenn ich das App-Icon, den Namen oder die Web-Engine ändern will?
00:02:46Hier kommt die app.zon-Datei ins Spiel: Hier kann ich Icon, Projektnamen, die Engine und die Fenstergröße konfigurieren.
00:02:55Und das ist ein sehr kurzer Überblick über Xero Native.
00:02:58Vieles konnte ich nicht ansprechen, wie System-Tray-Icons, Code-Signing oder Embedded Apps für iOS und Android.
00:03:05Ich muss mich noch mehr damit beschäftigen, was vielleicht zu einem weiteren Video führt.
00:03:09Aber wie schneidet Xero Native im Vergleich zu Electrobun ab, das ebenfalls kleine, schnelle Apps mit nativer Webview erstellt?
00:03:17Bei Electrobun ist Bun selbst die Laufzeitumgebung, da man TypeScript für den Hauptprozess schreibt.
00:03:24Obwohl eine Zig-Binärdatei die App startet, läuft der Code in einem Bun-Webworker, der über FFI mit C++ und Objective-C Schichten kommuniziert.
00:03:37Bei Xero Native braucht man nur die Zig-Binärdatei – kein JavaScript, kein Bun, nur Zig, das direkt mit OS-APIs und C-Bibliotheken kommuniziert.
00:03:50Das führt zur schlankstmöglichen nativen Hülle im Vergleich zu Electrobun.
00:03:54Aktuell muss man vielleicht ein wenig Zig schreiben oder zumindest Konfigurationen in der Zig-Object-Notation-Datei ändern.
00:04:03Zudem ist Xero Native noch nicht so funktionsreich wie Electrobun, wo ich etwa den Stil der Titelleiste oder Menüs anpassen konnte.
00:04:11Diese Dinge werden derzeit leider noch nicht in der app.zon-Datei unterstützt.
00:04:15Ich musste auch ein Issue eröffnen, da das Paketieren unter macOS beim ersten Mal nicht klappte – vielleicht ein Anwenderfehler.
00:04:22Trotzdem bin ich sicher, dass das Team hart an neuen Features, Bugfixes und mobilem Support arbeitet.
00:04:29Und wenn ihr nicht warten wollt: Es ist Open Source.
00:04:32Gebt den Code einfach Claude, sagt was ihr wollt, und es wird die Features sicher für euch einbauen, oder?

Key Takeaway

Xero Native ersetzt speicherintensive Frameworks wie Electron durch eine schlanke Zig-basierte Architektur, die native Binärdateien unter 3 MB erzeugt und JavaScript-Frontends ohne zusätzliche Laufzeitumgebung direkt an System-Schnittstellen anbindet.

Highlights

  • Xero Native nutzt die Sprache Zig, um native App-Hüllen für Desktop- und Mobilanwendungen mit minimalen Dateigrößen von oft unter 3 MB zu erstellen.

  • Das System ermöglicht die Nutzung der System-Webview oder die Bündelung von Chromium, um JavaScript-Frontends direkt mit OS-Level-APIs zu verbinden.

  • Ein integrierter Entwicklungs-Server erlaubt mit dem Befehl zig build dev Echtzeit-Updates der Benutzeroberfläche während der Programmierung.

  • Die Konfiguration von App-Icons, Fenstereigenschaften und Engines erfolgt zentral über eine einzige app.zon-Datei im Zig-Object-Notation-Format.

  • Im Gegensatz zu Electrobun benötigt Xero Native keine JavaScript-Laufzeitumgebung wie Bun für den Hauptprozess, sondern agiert als reine Binärdatei.

Timeline

Architektur und Kernfunktionen

  • Xero Native fungiert als dünne Zig-Hülle um eine Webview für das Rendering von Frontends.
  • JSON-Bridges stellen die Kommunikation zwischen der JavaScript-Ebene und der nativen Zig-Ebene her.
  • Die direkte Einbindung von C-Bibliotheken erfolgt in Zig ohne zusätzlichen Glue-Code.

Die technische Basis bildet die Programmiersprache Zig, die aufgrund des Verzichts auf Borrow-Checker oder komplexe Lifetimes eine hohe Lesbarkeit für Web-Entwickler bietet. Durch die Nutzung der System-Webview entfällt die Notwendigkeit, für jede Anwendung eine vollständige Browser-Instanz mitzuliefern, was die Startzeit verkürzt. Die Brücken-Technologie erlaubt den Zugriff auf Betriebssystem-Funktionen, die herkömmlichen Web-Apps verschlossen bleiben.

Projekt-Initialisierung und Entwicklungsworkflow

  • Der Befehl xero native init erstellt neue Projekte mit Unterstützung für Frameworks wie React, Svelte oder Vue.
  • Kompilierte Anwendungen erreichen im Standardpaket eine Größe von lediglich 2,9 MB.
  • Die Integration in bestehende JavaScript-Projekte erfolgt vorzugsweise über eine minimale Vite-Konfiguration.

Nach der Installation über Paketmanager wie Miez oder Brew lässt sich mit einem Frontend-Flag direkt eine Vite-Umgebung aufsetzen. Der Build-Prozess wird über die Datei build.zig gesteuert, während statische Inhalte und Icons in einem dedizierten Asset-Verzeichnis liegen. Optimierte Pakete können sogar die Grenze von 1 MB unterschreiten, was einen signifikanten Vorteil gegenüber klassischen Electron-Apps darstellt.

Vergleich mit Electrobun und aktuelle Einschränkungen

  • Xero Native verzichtet vollständig auf eine JavaScript-Runtime im Hauptprozess.
  • Anpassungen an Menüs oder Titelleisten sind derzeit noch nicht über die Konfigurationsdatei möglich.
  • Die Open-Source-Natur ermöglicht Erweiterungen durch die Community oder KI-gestützte Code-Generierung.

Während Electrobun auf Bun als Laufzeitumgebung setzt und TypeScript für die Prozesssteuerung nutzt, kommuniziert Xero Native als reine Binärdatei direkt mit den OS-APIs. Dies führt zu einer geringeren Komplexität und einem kleineren Speicherbedarf. Der Funktionsumfang befindet sich noch im Aufbau, wobei insbesondere Support für mobile Plattformen und erweiterte UI-Anpassungen in der Entwicklung sind.

Community Posts

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

Write about this video