Svelte NodeGUI, une alternative à Electron, plus légère selon ses développeurs, avec une interface utilisateur native,

Pourrait-il vraiment concurrencer Electron ?

Svelte NodeGUI, une alternative à Electron, plus légère selon ses développeurs, avec une interface utilisateur native,
pourrait-il vraiment concurrencer Electron ?

Jamie Birch, développeur logiciel, a dévoilé Svelte NodeGUI, un outil permettant de créer des applications de bureau avec le framework JavaScript Svelte. L'auteur explique que vous pouvez le considérer comme une variante légèrement modifiée du runtime Node.js qui se concentre sur les applications de bureau plutôt que sur les serveurs Web. Il le décrit aussi comme une alternative légère à Electron, déjà très populaire pour créer des applications pour le bureau (Ex : VS Code, Slack, Facebook Messenger et Twitch). Alors, Svelte NodeGUI a-t-il ce qu'il faut pour concurrencer Electron ? Voici un aperçu des caractéristiques de l'outil.

Birch explique que Svelte NodeGUI est un moteur de rendu Svelte pour NodeGUI, qui est une liaison JavaScript efficace à une bibliothèque Qt d'interface utilisateur graphique multiplateforme. Il note que Qt est l'une des bibliothèques les plus matures et les plus efficaces pour la création d'applications de bureau. Cela permettrait donc à Svelte NodeGUI d'être extrêmement efficace en termes de mémoire et de CPU par rapport à d'autres solutions populaires d'interface graphique JavaScript pour le bureau.


Rappelons que Svelte est un framework Web qui, selon son concepteur Rich Harris, a pour l'objectif de compilé du code JavaScript afin de produire un code de qualité, le plus léger possible, sans abstraction ou virtualisation du DOM, pour un chargement hyper court et des performances très rapides. Un des plus gros avantages qu'il cite à Svelte est le très faible poids de l’application une fois compilée. Ce qui promettrait une vitesse de chargement impossible à atteindre avec des frameworks comme Angular, Vue.js ou React, qui embarquent un « runtime » en plus du code logique de l’application.

Selon la documentation de l'outil, Svelte NodeGUI utilise des composants natifs au lieu de composants basés sur le Web comme éléments de base. Pour comprendre la structure de base d'une application Svelte NodeGUI, vous devez donc être familier avec JavaScript ou TypeScript et Svelte. En ce qui concerne le développement, une application Svelte NodeGUI est essentiellement une application Node.js. Le point de départ est un "package.json" qui est identique à celui d'un module Node.js. En outre, Svelte NodeGUI utilise un système de mise en page qui permet de disposer automatiquement les éléments enfants au sein d'un composant.

Cela permettrait de s'assurer qu'ils utilisent bien l'espace disponible. Svelte NodeGUI prend en charge les composants fixes et les composants dynamiques. Dans le premier cas, la hauteur et la largeur d'un élément déterminent sa taille à l'écran. La façon la plus simple de définir les dimensions d'un composant est d'ajouter une largeur et une hauteur fixes au style. Cette méthode est courante pour les composants qui doivent toujours rendre exactement la même taille, quelles que soient les dimensions de l'écran. Par contre, les mises en page dynamiques positionnent et redimensionnent automatiquement les composants lorsque l'espace disponible pour eux change.


Cela garantit qu'ils sont disposés de manière cohérente et que l'interface utilisateur dans son ensemble reste utilisable. Svelte NodeGUI prend actuellement en charge la mise en page à l'aide de FlexLayout. Notons que FlexLayout permet aux composants enfants de s'agrandir et de se rétrécir de manière dynamique en fonction de l'espace disponible. Birch explique qu'ici, vous utiliserez normalement "flex : 1", qui indique à un composant de remplir tout l'espace disponible, partagé de manière égale entre les autres composants avec le même parent. Plus la flexibilité est grande, plus le ratio d'espace qu'un composant prendra par rapport à ses frères et sœurs sera élevé.

Par ailleurs, Svelte NodeGUI vous permet d'écouter divers événements qui pourraient provenir des widgets Qt sous-jacents. Ces événements peuvent être soit un simple clic sur un bouton, soit un changement de texte sur un "LineEdit" ou même quelque chose comme une fenêtre cachée et affichée. Pour ce faire, il vous faut associer un auditeur d'événements au widget correspondant. Selon la documentation, techniquement, l'auditeur d'événements est une instance de "NodeJs EventEmitter" qui écoute les événements du widget Qt sous-jacent.

D'autre part, de nombreuses applications doivent charger des ressources à partir d'une URL distante. Vous pouvez vouloir faire une requête POST à une API REST, ou vous pouvez avoir besoin de récupérer un morceau de contenu statique d'un autre serveur. Il est important de garder que les applications Svelte NodeGUI ne s'exécutent pas dans un navigateur et n'ont donc pas accès aux API du navigateur. L'application Svelte NodeGUI est essentiellement une application Node.js. Et dans une application Node.js typique, vous utiliseriez une bibliothèque tierce comme axios, node-fetch ou frisbee pour réaliser cette fonctionnalité.

Enfin, selon le développeur de Svelte NodeGUI, une application "Hello World" construite avec Svelte NodeGUI fonctionne avec moins de 20 Mo de mémoire. En comparaison, une application "Hello World" construite avec Electron utiliserait environ 115 Mo de mémoire. En fait, ce code existe à la fois sur le disque et en mémoire : lorsque l'application Electron démarre, elle doit charger ces bibliothèques dans la RAM.

Caractéristiques et fonctionnalités de Svelte NodeGUI

Svelte NodeGUI est caractérisé par les éléments ci-après.

• plateforme croisée : Svelte NodeGUI devrait fonctionner sur les principales saveurs de Linux, Windows et macOS.
• faible encombrement du processeur et de la mémoire : le CPU actuel reste à 0 % en veille et l'utilisation de la mémoire est inférieure à 20 Mo pour un programme "Hello World" ;
• design : stylisation avec CSS (y compris la mise en cascade réelle). Avec Svelte NodeGUI, vous pouvez créer un composant selon vos besoins. Si vous êtes familier avec les CSS dans le monde du Web, vous vous sentirez comme chez vous. Tous les composants acceptent le support de style pour la définition des styles en ligne. Les noms et les valeurs des styles correspondent généralement au fonctionnement du CSS sur le Web. Svelte NodeGUI prend également en charge la mise en page avec Flexbox (grâce à Yoga) ;
• prise en charge complète de l'API Node.js (fonctionne actuellement sur Node v12.x, et peut être facilement mis à niveau). Il a donc accès à tous les modules npm compatibles avec Node.js ;
• support natif des widgets pour l'écoute des événements : Svelte NodeGUI prend en charge tous les événements disponibles à partir de Qt/NodeJs ;
• Svelte NodeGUI peut être utilisé pour des applications commerciales ;
• Svelte NodeGUI a un "bon" support des Devtools ;
• Svelte NodeGUI prend en charge le monde sombre (grâce à Qt) ;
• Svelte NodeGUI prend en charge TypeScript de première classe. Il fonctionne également sur les projets JS réguliers.

Rappelons que récemment, Tauri, une chaîne d'outils permettant de créer des applications natives pour le bureau, s'illustrait également comme une alternative sérieuse à Electron. Comme le décrit son site officiel, Tauri est une chaîne d'outils polyglotte permettant de créer des applications natives plus sûres avec des binaires à la fois minuscules et rapides. "Polyglotte" signifie que Tauri utilise plusieurs langages de programmation. Pour l'instant, Rust, JavaScript et TypeScript sont utilisés, mais les développeurs de la chaîne d'outils prévoient de vous permettre d'utiliser Go, C++, Python, et plus encore. Tauri permettrait d'utiliser n'importe quel framework frontal basé sur HTML et JavaScript, tel que Vue.js, React ou Angular, pour créer une application de bureau native.

Source : Page GitHub de Svelte NodeGUI

Et vous ?

Que pensez-vous de Svelte NodeGUI ?
Pensez-vous qu'il pourra s'imposer face à Electron ?
20 Mo de mémoire est-elle normale ou trop grande pour une application "Hello World" ?

Voir aussi

La version 3 de Svelte, un framework JavaScript de composants graphiques, supporte officiellement le langage de programmation TypeScript depuis juillet 2020

Electron, le framework pour le développement des apps multiplateformes de bureau avec HTML, CSS et JS, est disponible en version 11.0 et intègre désormais le support de l'architecture ARM64 d'Apple

Faut-il utiliser Electron pour le développement d'applications de bureau ? Quels sont ses avantages et inconvénients ?