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.