00:00:00Das ist ElectroBun, ein Framework für Desktop-Apps, das deutlich kleinere
00:00:05Bundles erzeugt als Electron, kein Rust erfordert wie Tauri und Ihnen
00:00:11native Performance durch Bun und eigene C++ Wrapper bietet. Also kein Node.js oder V8.
00:00:18Aber macht die Tatsache, dass es das native WebView des Systems nutzt, statt Chromium
00:00:22für alle Betriebssysteme, die Entwicklung echter Cross-Plattform-Apps schwierig?
00:00:27Abonnieren Sie den Kanal und lassen Sie uns direkt einsteigen.
00:00:32Seit Bun letztes Jahr Full-Stack-Executables angekündigt hat,
00:00:36war ich sehr gespannt auf eine ordentliche Electron-Alternative.
00:00:40Aber nach der Übernahme durch Anthropic, auf die ich später noch eingehen werde,
00:00:44ist es weniger wahrscheinlich, dass das Bun-Team diese Richtung einschlägt.
00:00:49Deshalb hat Yoav von Blackboard ElectroBun entwickelt – das, was einem "Bun-Electron" am nächsten kommt.
00:00:55Er hat damit schon coole Tools gebaut, wie Colab, eine Mischung aus Browser, Terminal und Editor,
00:01:01eine Text-to-Speech-App mit Quen, und er hat sogar Doom per WebGPU in
00:01:07einer ElectroBun-App zum Laufen gebracht. Schauen wir uns an, wie man es in einem Projekt nutzt.
00:01:12Wenn Sie ElectroBun initialisieren, erhalten Sie Zugriff auf verschiedene Vorlagen,
00:01:17um die Funktionsweise zu verstehen, wie eine Notiz-App, eine Multi-Window-App
00:01:22oder eine Tray-App, die die Dokumentation im Browser öffnet.
00:01:26Da ElectroBun Web-Technologien unterstützt, können Sie jedes JS-Framework verwenden,
00:01:31von Svelte über Vue bis hin zu Solid.js oder sogar Angular.
00:01:35Ich werde jedoch ein einfaches Projekt von Grund auf neu erstellen, um es zu erklären.
00:01:40Hier habe ich eine Basis-React-App mit Bun, die wir mit ElectroBun
00:01:45in eine native Mac-App verwandeln. ElectroBun habe ich bereits installiert,
00:01:49ebenso ein Skript zum Starten des Dev-Builds
00:01:53und ein Skript zum Erstellen der finalen App.
00:01:55Das "type": "module" hier brauchen wir eigentlich nicht, da wir es nicht verwenden.
00:01:59Im Stammverzeichnis habe ich eine Konfigurationsdatei für ElectroBun erstellt,
00:02:03die den App-Namen, einen Identifier sowie einen Bun-Build-Entry-Point enthält.
00:02:09Diesen Einstiegspunkt habe ich noch nicht erstellt, also machen wir das jetzt.
00:02:12Im Source-Verzeichnis habe ich einen Bun-Ordner und erstelle eine index.ts,
00:02:17die die Browser-Window-Klasse instanziiert. Sie erhält einen Titel als Argument,
00:02:22der in der Titelleiste erscheint, sowie eine URL,
00:02:25die beim ersten Laden der App aufgerufen wird.
00:02:28Wenn wir "bun start" ausführen, sollte die App mit dem richtigen Titel laden,
00:02:32aber es wird nichts angezeigt. Das liegt daran, dass Bun nach dem Build-Prozess
00:02:36(also Transpilieren von TS zu JS, Tree Shaking etc.)
00:02:41die Dateien in ein anderes Verzeichnis schiebt, das wir im Einstiegspunkt referenzieren müssen.
00:02:46Und das haben wir hier bisher nicht besonders gut gelöst.
00:02:48Um das zu korrigieren, öffnen wir die Konfigurationsdatei und fügen ein neues
00:02:53Views-Objekt hinzu, das die Ansichten definiert, auf die ElectroBun zugreifen soll.
00:02:57Wir nennen unsere View "main" und geben ihr die index.html als Einstiegspunkt,
00:03:02die das Frontend-JS enthält, welches auf die App verweist.
00:03:06Dort liegen alle JavaScript- und CSS-Dateien für den reibungslosen Ablauf.
00:03:09Weitere Infos zur Build-Konfiguration finden Sie in der Dokumentation.
00:03:13Nachdem die Hauptansicht nun in unserem Bun-Verzeichnis liegt,
00:03:17können wir die index.ts öffnen und die URL so anpassen, dass sie das Verzeichnis nutzt.
00:03:23Wenn wir die App jetzt bauen, sollte alles wie erwartet funktionieren.
00:03:28Für ein echtes App-Feeling können wir diese Eigenschaft ergänzen, um die Titelleiste zu entfernen.
00:03:34Zudem können wir das Application-Menu-Objekt nutzen, um ein eigenes Menü zu erstellen.
00:03:39Sobald wir bereit sind, erstellen wir den Production-Build. Das ergibt eine 17 MB
00:03:44große DMG-Datei und eine 65 MB große App. Im Vergleich zu einer Hello-World-App mit Electron
00:03:50sieht man den Unterschied: Diese ist 271 MB groß – mehr als das Vierfache von ElectroBun.
00:03:56Da ElectroBun auf native WebViews setzt – also WebKit für Mac,
00:04:01Edge WebView 2 für Windows und WebKit GTK für Linux – muss man bei
00:04:08Cross-Plattform-Apps auf Features achten, die WebViews eventuell nicht unterstützen.
00:04:11Zwar unterstützt ElectroBun auch das Chromium Embedded Framework für
00:04:16maximale Konsistenz, aber das fügt der App den kompletten Chromium-Browser hinzu.
00:04:22Das hat Folgen für Größe und Performance, womit man fast wieder bei Electron ist, nur eben mit Bun.
00:04:27Es gibt noch weitere coole Features, die ich bisher nicht erwähnt habe,
00:04:32wie eine Out-of-Process Iframe-Architektur, um WebViews isoliert auszuführen,
00:04:38typed RPC für nahtlose Kommunikation, ZSTD-Komprimierung und einen
00:04:44selbstextrahierenden Wrapper für kleinere Downloads, Code-Signing und vieles mehr.
00:04:48Leider gab es beim Erstellen der Demo-App vorhin auch ein paar Probleme,
00:04:54wie etwa lückenhafte Dokumentation, besonders zur ElectroBun-Entry-Datei.
00:04:58Die Seite flackerte manchmal beim Neuladen und der Inspector hat mein Layout
00:05:03etwas zerschossen. Ich weiß, ElectroBun ist noch sehr neu – der erste Commit war im Februar.
00:05:09Sicher gab es davor auch schon ein paar Versionen. Das soll nur heißen: Ich bin sicher,
00:05:13dass diese Dinge in Zukunft behoben werden. Das hoffe ich zumindest, denn das Bun-Team
00:05:19konzentriert sich seit der Übernahme durch Anthropic eher auf CLI- und Executable-Verbesserungen,
00:05:25statt eine eigene Electron-Alternative zu bauen. ElectroBun scheint also
00:05:31unsere beste Chance auf ein Bun-basiertes Cross-Plattform-Tool zu sein.
00:05:37Falls Sie nichts über die Bun/Anthropic-Übernahme wissen oder mehr über
00:05:42die neue strategische Ausrichtung des Teams erfahren möchten, schauen Sie sich
00:05:48dieses Video von James an, der das Ganze ausführlich erklärt.