Utiliser les techniques de développement Web mais pour une application de bureau? Coucou NW.js

Introduction

NW.js est une alternative à Electron.js. Ces deux frameworks permettent de développer des applications multi-plateformes (Windows, Mac, Linux) à base node.js, Javascript, HTML et CSS. Utilisant déjà Apache Cordova, je me suis laissé tenter par NW.js pour un petit dev'.

Contexte et spécifications

Pour me faire la main sur le framework NW.js, il me fallait une application simple. Comme j’utilise régulièrement “youtube-dl” (sous Linux Debian), je me suis lancé dans la réalisation d’un GUI.

L’interface doit permettre de:

  • Définir le dossier de téléchargement.
  • Ajouter les urls des vidéos à télécharger.
  • Lancer le téléchargement.
  • Effacer une url de la liste ou toute la liste.
  • Remettre une vidéo à télécharger.

Ici, rien d’extravagant. Je cherche surtout à comprendre le fonctionnement de NW.js.

Composants

Afin de ne pas me perdre dans de multiples nouveaux frameworks, j’ai décidé de rester sur un combo classique: jQuery, Bootstrap et FontAwesome (j’adore ce kit d’icônes -la version pro vaut son prix-).

J’ai aussi ajouté la fonte “Muli”, simplement pour changer de l’Arial ;-)

Aperçu de l’interface

Ok, ce n’est pas l’interface du siècle, je le sais mais c’est fonctionnel (“argument de merde Votre Honneur!!” - “Objection retenue”).

Composition de l’application

L’application s’articule autour des fichiers “package.json” et “main.js”. Ces deux fichiers sont responsables du démarrage de l’application.

package.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
  "name": "youtube-gui",
  "version": "1.0.0",
  "description": "GUI for youtube-dl",
  "main": "main.js",
  "dependencies": {
    "nw": "0.43.1"
  },
  "build": {
    "nwVersion": "0.43.1"
  },
  "devDependencies": {
    "nwjs-builder-phoenix": "^1.15.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dist": "build --tasks linux-x64 --mirror https://dl.nwjs.io/ .",
    "start": "nw ."
  },
  "author": "Gobo the Geek",
  "license": "GPL v3",
  "homepage": "https://www.gobothegeek.ch"
}

Les points importants sont: “main” et “dist”. “main” indique quel fichier Javascript sera chargé en premier. “dist” permet de choisir les plateformes pour lesquelles on préparera un exécutable.

main.js

Dans ce fichier, on ouvre la fenêtre principale et on charge le premier bloc HTML ("index.html").

1
nw.Window.open('index.html', { position: 'center', width: 800, height: 600 }, function(win) { });

Lors de l’exécution, une fenêtre de 800 par 600 pixels sera ouverte et la page “index.html” sera chargée.

Autres éléments

En complément de ces deux fichiers obligatoires, il y a donc la page HTML principale, son Javascript et une CSS. Bien sûr, on trouve également les frameworks mentionnés en début d’article. Le zip reprend l’ensemble des sources du projet.

Conclusion

Points positifs

  • C’est facile d’accès pour un développeur Web puisqu’on travaille en JS/HTML/CSS.
  • On a le choix des frameworks.
  • On réalise une application Desktop multi-plateformes.

Points négatifs

  • Debugguer est plutôt hardu. Le debugger Chrome ne voit pas l’appli et le “console.log” ne fonctionne pas.
  • Aucune erreur n’est affichée dans la console.
  • L’application finale est simplement gigantesque: presque 500Mo, dont 420 de librairies node et NW.