IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

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

Le , par Bill Fassinou

173PARTAGES

11  0 
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 ?

Une erreur dans cette actualité ? Signalez-le nous !

Avatar de defZero
Membre extrêmement actif https://www.developpez.com
Le 07/03/2021 à 19:41
Que pensez-vous de Svelte NodeGUI ?

Pourquoi, après Electron qui est déjà pas la meilleur idée du siècle, vouloir reproduire le truc avec Tauri ou Svelte NodeGUI ?

Pensez-vous qu'il pourra s'imposer face à Electron ?

Honnêtement quand on voit qui il y a en face, je dirais non, mais en même temps, Electron cartonne alors qu'il est quand même loin d'être la panacée.

20 Mo de mémoire est-elle normale ou trop grande pour une application "Hello World" ?

C'est énorme pour un "Hello World", mais avec l'importance de l'application, ça sera forcement de moins en moins dérangeant.
Il faut plutôt le prendre comme le fait que l'app prendra obligatoirement 20MB de RAM (sont runtime), mais si vous faites une appli métier, ça deviendra forcement moins dérangeant.

Et dire qu'il y a pas si longtemps, les gens faisaient du Java ou du Delphi pour faire du multi (et encore, le multi consistait à faire du Windows et du Mac), c'est fous comme tout fout l'camps.
Vouloir absolument faire des appli desktop avec des technos web, c'est chercher la m***e pour des gros projets, autant apprendre directement les techno native.
4  0 
Avatar de gstratege
Membre actif https://www.developpez.com
Le 07/03/2021 à 11:17
Dès que tu incorpore un navigateur ça devient lourd non ? donc si c'est toujours la même chose le gain en performance doit être minime
3  0 
Avatar de gbegreg
Membre expert https://www.developpez.com
Le 07/03/2021 à 21:16
Je suis d'accord avec defZero.

Juste une petite remarque, pour le multi avec Delphi, ça ne s'arrête pas à Windows et Mac. Il y a en plus Linux, Android et IOS.
Voici une petite capture d'écran avec les consommations mémoires de différents IDE (ceux que j'ai sur mon pc) seulement lancés sans aucun projet ouvert.


VSCode est une très bonne application basée sur Electron, RAD Studio (Delphi ou C++ Builder en fonction du compilateur utilisé) est écrit avec Delphi.
2  1 
Avatar de coder_changer_vie
Membre régulier https://www.developpez.com
Le 07/03/2021 à 12:31
Il faudrait vérifier mais QT... intègre un moteur javascript il me semble pour la gestion de son langage QML... pas de rapport mais c'est juste pour souligner l'étonnement de l'approche ;-)

De plus c'est pouvoir faire du design desktop mais sans bénéficier des outils de design desktop de qT (Designer)... ce n'est pas revenir en arrière ? Oui je sais, on ne fait pas de Qt dans le navigateur, mais bon, si on cherche la performance sur le desktop ça peut être interessant...

Embarqué un moteur d'éxecution javascript est peut être un peu plus lourd que faire du QT non ? Si c'est le C++ qui est derrière qui fait peur, il existe également les binding en python...

Quid des licences lorsqu'on souhaite faire une application commerciale si QT est derrière ?

Et enfin : Le monde n'a pas attendu javascript pour faire du multiplateforme (et Il n'y a pas que Qt...). N'est il pas interessant de faire un effort pour sortir de Javascript et aller explorer d'aures solutions comme GTK (binding python également et je crois javascript) ? Bien sur il n'y a pas le développement portable dans le navigateur... alors pourquoi ne pas tester Flutter ?

Oui il y a plus de développeurs html5/Css/Javascript, oui. Avant il y avait plus de programmeur Cobol...

Aller, c'est parti pour un débat !
1  1 
Avatar de frfancha
Membre éprouvé https://www.developpez.com
Le 07/03/2021 à 12:49
Je n'ai lu que la news, pas suivi les liens.
Mais si je comprends bien on est obligé d'utiliser svelte et on dispose seulement d'un subset de css, celui compris par le framework.
Ça n'a rien à voir avec electron qui nous permet de tourner nos sites web tels quels en application desktop avec accès aux fichiers et exe locaux, avec le JavaScript qu'on veut et le css qu'on veut
1  1 
Avatar de emilie77
Membre éclairé https://www.developpez.com
Le 07/03/2021 à 21:18
Pour mon compte je suis passée a Flutter...
Example de base avec un compteur, executable de build windows en tous 18mb
Et en plus cross-platform Linux, MacOs, Windows, Android, iOS
0  0 
Avatar de VinceB85
Membre à l'essai https://www.developpez.com
Le 23/09/2021 à 2:18
Comme tout le monde semble un peu confus je me permet d'apporter quelques clarifications:

NodeGUI existe en plusieurs variantes selon ce que vous préférez (React, Vue, Svelte ou juste JavaScript).
Il n'intègre aucun navigateur contrairement à Electron qui utilise Chromium pour l'interface utilisateur en HTML+CSS.
Le point fort de NodeGUI c'est que l'on manipule des composant QT directement en JavaScript sans passer par d'autres techno web pour l'UI.
Et le seul point commun avec Electron c'est qu'ils utilisent tous les deux NodeJS comme runtime JavaScript, mais ça s'arrête là.

Donc l'executable final est plus petit, utilise beaucoup moins de RAM et est probablement plus réactif avec QT qu'en HTML.
Et franchement 20MB pour un "hello world" comparé au 18MB avec Flutter et 100MB minimum avec Electron je trouve que c'est plutôt impressionnant pour du JavaScript.
Je me demande si JavaFX ou SWT font aussi bien d'ailleurs...
0  0