Zero Native : Le tueur d'Electron signé Vercel que personne n'a vu venir
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Voici Xero Native, un constructeur d'applications natives basé sur Zig par Vercel qui peut soit utiliser la vue web du système,
00:00:05soit intégrer l'intégralité de Chromium tout comme Electron pour les applications de bureau ou mobiles, offrant des binaires minuscules
00:00:12et des reconstructions instantanées pour le développement.
00:00:14Mais le fait de devoir connaître un peu de Zig pour l'utiliser correctement rebutera-t-il les développeurs JavaScript ?
00:00:18Abonnez-vous et découvrons-le ensemble.
00:00:20Bien que l'équipe de BUN s'éloigne de Zig pour Rust, cela reste un langage très cool
00:00:28sans vérificateur d'emprunts, sans durées de vie et capable d'appeler C directement, ce qui signifie que toute bibliothèque C est à un import près
00:00:35sans avoir besoin de code de liaison.
00:00:37Et il est assez lisible pour que les développeurs JavaScript l'apprennent.
00:00:39D'ailleurs, si vous voulez me voir apprendre à programmer en Zig à partir de zéro, dites-le moi dans les commentaires.
00:00:44Je pense que ce serait une chose assez amusante à faire.
00:00:46Mais essentiellement, Xero Native est une fine enveloppe Zig qui héberge une vue web affichant un front-end
00:00:51qui utilise des ponts JSON pour que le JavaScript de la vue web puisse communiquer avec la couche native Zig et vice versa,
00:00:58ce qui lui permet d'accéder aux API au niveau du système d'exploitation.
00:01:01Et si vous pensez que cela ressemble à ElectroBUN, eh bien, c'est un peu le cas.
00:01:04Mais avec une différence majeure, dont nous parlerons plus tard dans la vidéo.
00:01:07Pour l'instant, passons à une démo très simple.
00:01:10Pour commencer, vous devez d'abord avoir Zig installé, ce que j'ai fait avec Miez.
00:01:13Mais vous pouvez aussi utiliser Brew, puis installer Xero Native.
00:01:16Une fois ces deux étapes franchies, vous pouvez lancer la commande “xero-native init” pour échafauder un nouveau projet.
00:01:22C'est le nom de mon projet, mais il peut être tout ce que vous voulez.
00:01:25Je vais utiliser le drapeau front-end avec React, ce qui va installer un projet Vite React.
00:01:30Mais cela pourrait aussi être Svelte, Vue, Next ou même juste Vite.
00:01:34Si j'appuie sur Entrée, Xero Native ajoutera quelques répertoires.
00:01:37Si nous entrons dans le projet de démo, nous voyons le fichier app.zon, que je détaillerai plus tard.
00:01:43Nous avons des dossiers pour les icônes et autres ressources statiques, le fichier build.zig,
00:01:48qui sert au graphe de construction Zig, le pont JS, le moteur web et le répertoire front-end contenant notre code.
00:01:54En y entrant, on y retrouve des fichiers familiers pour un développeur JavaScript.
00:01:58À ce stade, si nous lançons “zig build run”, cela installera toutes les dépendances et ouvrira l'application.
00:02:04Notez que si vous voulez installer Xero Native sur un projet JavaScript existant,
00:02:08je recommande d'utiliser Vite, qui est une version minimale, puis de remplacer le contenu du dossier front-end par votre code.
00:02:15Xero Native possède aussi un serveur de dév très cool qui gère tout le cycle de vie du front-end.
00:02:19En lançant “zig build dev”, le binaire est compilé et le serveur de développement Xero Native démarre.
00:02:24Ainsi, si je modifie du code, l'application native se met à jour en temps réel.
00:02:28Je peux même lancer “zig build package”, ce qui construira l'application native pour la distribution.
00:02:33Et on peut la voir ici dans le répertoire “zig-out/package” à seulement 2,9 mégaoctets, ce qui est minuscule.
00:02:39Et certains ont même réussi à descendre sous la barre des 1 mégaoctet.
00:02:43Mais si je voulais changer l'icône de l'appli, le nom ou le moteur web ?
00:02:46C'est là qu'intervient le fichier app.zon, où je peux modifier l'icône, le nom du projet, le moteur utilisé et la taille de la fenêtre.
00:02:55Voilà pour ce tour d'horizon très rapide de Xero Native.
00:02:58Il y a tant de choses que je n'ai pas eu le temps d'aborder, comme les icônes de la barre système, la signature de code et les apps iOS et Android.
00:03:05En fait, je dois y passer plus de temps, ce qui pourrait donner lieu à une autre vidéo.
00:03:09Mais aussi génial que soit Xero Native, comment se compare-t-il à Electrobun, qui crée aussi des apps légères utilisant la vue web native ?
00:03:17Avec Electrobun, Bun est l'environnement d'exécution car vous devez écrire du TypeScript pour le processus principal.
00:03:24Bien qu'un binaire Zig lance l'app, le code tourne dans un web worker Bun qui communique avec les API natives via l'FFI de Bun, passant par C++ et Objective-C.
00:03:37Avec Xero Native, seul le binaire Zig suffit : pas de JavaScript, pas de Bun, juste du Zig qui communique avec les API système et les bibliothèques C via un simple import.
00:03:50Cela permet d'avoir l'enveloppe native la plus fine possible par rapport à Electrobun.
00:03:54Actuellement, vous devrez peut-être écrire un peu de Zig pour en tirer le maximum ou modifier des configurations dans un fichier .zon.
00:04:03De plus, Xero Native n'est pas encore aussi riche en fonctionnalités qu'Electrobun, qui permet de changer le style de la barre de titre ou d'ajouter des menus.
00:04:11Ces options ne sont malheureusement pas encore supportées dans le fichier app.zon.
00:04:15J'ai aussi dû signaler un problème car la création d'un paquet sur macOS n'a pas fonctionné du premier coup, mais c'était peut-être de ma faute.
00:04:22Quoi qu'il en soit, je suis sûr que l'équipe travaille dur pour ajouter des fonctionnalités, corriger les bugs et apporter un support mobile.
00:04:29Et si vous ne pouvez pas attendre ces fonctionnalités, sachez que c'est open source.
00:04:32Donnez simplement le code à Claude, dites-lui ce que vous voulez et je suis sûr qu'il pourra les ajouter pour vous, non ?
Community Posts
No posts yet. Be the first to write about this video!
Write about this video