Electrobun : Sans Node ni Chromium, la performance de Bun à l'état pur

BBetter Stack
컴퓨터/소프트웨어AI/미래기술

Transcript

00:00:00Voici ElectroBun, un framework d'applications de bureau multiplateforme qui produit
00:00:05des bundles bien plus légers qu'Electron, ne nécessite pas d'écrire en Rust comme Tauri et offre
00:00:11des performances natives grâce à Bun et ses wrappers C++. Donc pas de Node.js ni de V8.
00:00:18Mais le fait d'utiliser la WebView native du système au lieu de Chromium pour
00:00:22tous les systèmes d'exploitation rend-il difficile la création d'applications multiplateformes ?
00:00:27Abonnez-vous et découvrons cela ensemble.
00:00:32Depuis que Bun a annoncé les exécutables full-stack l'année dernière,
00:00:36j'attendais avec impatience une alternative sérieuse à Electron.
00:00:40Mais après l'acquisition par Anthropic, dont je parlerai plus tard dans la vidéo,
00:00:44il est moins probable que l'équipe de Bun s'engage dans cette direction.
00:00:49C'est pourquoi Yoav de Blackboard a créé ElectroBun, ce qui se rapproche le plus d'un Electron pour Bun,
00:00:55et il a déjà conçu des outils sympas avec, comme Colab, un hybride entre navigateur, terminal et éditeur,
00:01:01une application de synthèse vocale via Quen, et il a même fait tourner Doom sur une
00:01:07application ElectroBun grâce à WebGPU. Voyons comment l'utiliser sur un projet simple.
00:01:12Lors de l'initialisation d'ElectroBun, vous avez accès à plusieurs modèles pour
00:01:17comprendre le fonctionnement, comme cette application de notes basique, une application multi-fenêtres,
00:01:22ou même une application de barre d'état qui ouvre la documentation dans votre navigateur.
00:01:26Puisqu'ElectroBun supporte les technologies web, vous pouvez utiliser n'importe quel framework JS,
00:01:31de Svelte à Vue, en passant par Solid.js et même Angular.
00:01:35Mais je vais détailler un projet de base en partant de zéro pour bien vous expliquer.
00:01:40J'ai ici une application Bun React basique, que nous allons transformer en application Mac native
00:01:45grâce à ElectroBun. Pour cela, j'ai déjà installé ElectroBun,
00:01:49ainsi qu'un script pour lancer le build de développement ElectroBun,
00:01:53et un autre script pour compiler l'application finale.
00:01:55En fait, nous n'avons pas besoin de ce module type ici car nous ne l'utiliserons pas.
00:01:59À la racine du projet, j'ai créé un fichier de configuration ElectroBun,
00:02:03qui contient pour l'instant le nom de l'app, un identifiant, et un point d'entrée pour le build Bun.
00:02:09Je n'ai pas encore créé ce point d'entrée, alors faisons-le maintenant.
00:02:12Dans le dossier source, j'ai créé un dossier Bun et je vais faire un fichier index.ts,
00:02:17qui instancie la classe de fenêtre du navigateur et prend un titre en argument,
00:02:22qui sera le texte affiché dans notre barre de titre, et une URL,
00:02:25qui correspond à l'endroit où l'application naviguera lors du premier chargement.
00:02:28mais rien ne s'affiche ici. C'est parce qu'après la compilation par Bun,
00:02:32mais rien ne s'affiche ici. C'est parce qu'après la compilation de l'app par Bun,
00:02:36qui transpile le TypeScript en JavaScript, gère le tree shaking et le reste,
00:02:41il place les fichiers dans un répertoire différent que nous devons référencer dans notre point d'entrée.
00:02:46Et nous ne l'avons pas très bien fait ici.
00:02:48Pour corriger cela, nous devons ouvrir notre fichier de configuration ElectroBun et ajouter un objet
00:02:53“views”, qui contiendra les nouvelles vues auxquelles ElectroBun doit avoir accès.
00:02:57Nous nommerons notre vue “main” avec un point d'entrée index.html,
00:03:02lequel contient le JS front-end qui fait référence à l'application,
00:03:06regroupant tout le JavaScript et le CSS nécessaires au bon fonctionnement.
00:03:09Vous trouverez plus d'informations sur la config de build dans la doc d'ElectroBun.
00:03:13Maintenant que nous avons notre vue principale dans le dossier source de Bun,
00:03:17nous pouvons ouvrir index.ts et mettre à jour l'URL pour utiliser le répertoire des vues.
00:03:23Désormais, lors du build de l'application, tout devrait fonctionner comme prévu.
00:03:28On peut même lui donner un aspect plus natif en ajoutant cette propriété pour retirer la barre de titre.
00:03:34Et on peut aussi utiliser l'objet menu pour donner à l'app son propre menu personnalisé.
00:03:39Une fois prêts, nous pouvons compiler pour la production, ce qui génère un fichier
00:03:44DMG de 17 Mo et une application de 65 Mo. Si l'on compare cela à un “Hello World” sur Electron,
00:03:50on voit qu'il fait 271 Mo, soit plus de quatre fois la taille de l'application ElectroBun.
00:03:56Comme les apps ElectroBun utilisent les WebViews natives de l'OS (WebKit pour Mac,
00:04:01Edge WebView 2 pour Windows et WebKit GTK pour Linux), il faut tenir compte
00:04:08des fonctionnalités non supportées par certaines WebViews en multiplateforme.
00:04:11Bien qu'ElectroBun supporte le Chromium Embedded Framework pour assurer une cohérence
00:04:16totale, cela ajoute le navigateur Chromium complet à votre application, avec des
00:04:22conséquences sur la taille et les performances, comme pour Electron, le moteur Bun en plus.
00:04:27Il y a d'autres fonctions géniales dont je n'ai pas parlé,
00:04:32comme l'architecture d'iframes hors-processus pour isoler chaque WebView,
00:04:38le RPC typé pour la communication inter-processus, la compression ZSTD et un
00:04:44wrapper auto-extractible pour des téléchargements initiaux réduits, le code signing, etc.
00:04:48Malheureusement, j'ai rencontré quelques soucis en créant l'application de démonstration,
00:04:54comme des manques dans la documentation, surtout concernant le fichier d'entrée.
00:04:58La page scintillait parfois lors des rechargements et l'inspecteur déréglait ma mise en page.
00:05:03Je sais qu'ElectroBun est très récent. Le premier commit date de février, et il y en a
00:05:09sûrement eu d'autres avant. Tout cela pour dire que ces points seront corrigés plus tard.
00:05:13Je l'espère, car l'équipe de Bun, depuis son rachat par Anthropic,
00:05:19se concentre davantage sur les améliorations du CLI et des exécutables
00:05:25plutôt que sur une alternative à Electron. ElectroBun semble donc être notre
00:05:31meilleure chance d'avoir un outil de bureau multiplateforme propulsé par Bun.
00:05:37Si vous ne savez rien du rachat de Bun par Anthropic ou si vous voulez en savoir plus
00:05:42sur la nouvelle direction prise par l'équipe, regardez cette vidéo de James qui
00:05:48explique tout cela en détail.

Key Takeaway

ElectroBun s'impose comme le successeur spirituel d'Electron pour l'écosystème Bun, offrant des performances natives et une légèreté exceptionnelle en exploitant les WebViews du système d'exploitation.

Highlights

ElectroBun est une alternative ultra-légère à Electron, utilisant le runtime Bun et des wrappers C++ au lieu de Node.js et V8.

L'utilisation des WebViews natives du système (WebKit, Edge WebView 2) permet de réduire drastiquement la taille des applications, passant de 271 Mo à seulement 65 Mo.

Le framework supporte tous les outils web modernes tels que React, Vue, Svelte, Solid.js et même Angular pour le développement d'interfaces.

Contrairement à Tauri, ElectroBun ne nécessite pas de connaissances en Rust, offrant une barrière à l'entrée plus basse pour les développeurs JavaScript.

Le projet inclut des fonctionnalités avancées comme le RPC typé pour la communication inter-processus et l'isolation des vues via des iframes hors-processus.

Bien que performant, l'outil est encore jeune et présente quelques défauts de jeunesse comme une documentation incomplète et des bugs d'affichage mineurs.

Timeline

Introduction et proposition de valeur d'ElectroBun

Cette section présente ElectroBun comme un framework multiplateforme révolutionnaire qui élimine la dépendance à Node.js et Chromium. L'orateur souligne que le projet utilise Bun et des wrappers C++ pour garantir des performances natives sans la lourdeur habituelle d'Electron. Il pose également la question cruciale de la cohérence visuelle lors de l'utilisation des WebViews natives du système au lieu d'un moteur de rendu unique. Cette introduction met en avant la promesse de bundles beaucoup plus légers et d'une exécution plus rapide. L'objectif est de montrer qu'une alternative sérieuse aux standards actuels est enfin disponible pour les développeurs web.

Origines du projet et exemples d'utilisation

L'orateur explique que le framework a été créé par Yoav de Blackboard suite au changement de direction de l'équipe Bun après son acquisition par Anthropic. Comme l'équipe officielle se concentre désormais sur le CLI, ElectroBun remplit le vide laissé pour la création d'applications de bureau. Plusieurs exemples concrets sont cités, notamment Colab, une application de synthèse vocale, et même une démonstration de Doom tournant via WebGPU. Ces cas d'usage prouvent la polyvalence du framework malgré sa relative nouveauté. Cette partie souligne l'importance d'avoir un outil communautaire robuste pour pérenniser l'usage de Bun sur le desktop.

Configuration technique et processus de développement

Cette séquence détaille les premiers pas avec ElectroBun en commençant par l'exploration des modèles disponibles pour les notes ou les barres d'état. L'orateur démontre comment transformer une application React basique en une application Mac native en utilisant des scripts de build spécifiques. La configuration repose sur un fichier JSON centralisé définissant le nom de l'application, son identifiant et son point d'entrée. On y apprend que le framework est compatible avec tous les frameworks JavaScript majeurs comme Svelte ou Angular. Cette flexibilité permet aux développeurs de conserver leurs habitudes de travail tout en changeant de moteur d'exécution.

Structure du code et gestion des vues

Le tutoriel technique se poursuit avec la création du fichier d'entrée TypeScript et l'instanciation de la classe Browser Window. L'orateur explique l'importance de bien configurer l'objet "views" pour que le framework puisse localiser les fichiers HTML et JavaScript après la compilation par Bun. Il aborde des concepts clés comme le tree shaking et la transpilation automatique gérés par le runtime. Une attention particulière est portée sur la redirection correcte des URLs vers le répertoire de build final. Cette étape est cruciale pour comprendre comment le code front-end communique avec le moteur de rendu natif.

Optimisation native et comparaison de performance

Dans cette section, l'orateur montre comment peaufiner l'interface en supprimant la barre de titre pour un look plus moderne et en personnalisant les menus système. Le point fort est la comparaison des tailles de fichiers : une application ElectroBun pèse 65 Mo contre 271 Mo pour son équivalent Electron. On y discute également de l'utilisation de WebKit sur Mac et Edge WebView 2 sur Windows, tout en mentionnant le support optionnel de Chromium pour une compatibilité totale. Ce choix technique permet de réduire drastiquement la consommation de ressources. L'orateur conclut sur les avantages d'un binaire compact pour la distribution logicielle.

Fonctionnalités avancées et limites actuelles

La dernière partie du descriptif explore des fonctions avancées comme le RPC typé pour la communication entre processus et la compression ZSTD pour les téléchargements. Cependant, l'orateur partage honnêtement les difficultés rencontrées, telles que des lacunes dans la documentation et des problèmes de scintillement lors du rechargement. Il rappelle que le projet est extrêmement jeune, avec des premiers commits datant de début 2026. Malgré ces défauts, ElectroBun est présenté comme la solution la plus prometteuse pour le futur des apps Bun. La vidéo se termine sur une invitation à suivre l'évolution du projet et l'influence d'Anthropic sur l'écosystème.

Community Posts

View all posts