Maj : Nouvelle version disponible => Angular 8.2 / Electron 7.1

Introduction

Dans un passé pas si lointain que ça, j'ai eu à travailler sur des projets intégrant la technologie AngularJS et Electron. Si vous n'avez jamais entendu parlé d'Electron, je vous invite à lire le guide de démarrage sur le site officiel. Pour faire simple, c'est un framework qui vous permet de servir du contenu web dans une application de bureau et vous donne la capacité d'interagir avec les fonctionnalités de l'OS avec NodeJS.

J'aurais pu continuer avec cette stack de développement qui tourne bien, mais que ceux qui veulent maintenir des applications AngularJS à l'heure des Angular, React ou VueJS lèvent la main ? Vous devez pas être beaucoup... Aujourd'hui, il n'existe pas de manière simple de démarrer un projet avec la dernière version d'Angular et d'Electron, avec une stack "moderne" en TypeScript, Sass et surtout du Hot Reload (ouiiiiiiiii, chose que je n'avais pas sur mes précédents projets avec AngularJS).

Contexte du projet

Lorsque j'ai crée le projet angular-electron, mon objectif était de disposer d'un kit de démarrage simple pour commencer une application de bureau avec Electron et Angular (4+) avec la puissance de TypeScript et du Hot Reload.

Avec ce projet, il est possible :

Exécuter l'application en mode "développement" avec du Hot Reload
Exécuter l'application en mode "production"
Packager l'application dans un exécutable pour Linux, Mac ou Windows

Pourquoi Angular avec Electron ?

Il ne faut pas être sectaire, rien ne vous oblige à utiliser Angular avec Electron! Le fait qu'une application Electron ne nécessite qu'un seul fichier en point d'entrée fait du framework Angular un très bon candidat, au même titre que d'autres comme React ou VueJS. En effet, avec Angular, tout commence dans le fichier index.html du projet comme souhaité. :) Je suis parti sur ce framework car je le maîtrise bien tout simplement.
Si ce projet vous inspire pour faire de même avec d'autres frameworks du marché, je serai ravis d'avoir votre retour d'expérience et d'échanger sur les points positifs et négatifs que vous avez rencontrés.

On y va !

Pour commencer, il vous faut récupérer le projet angular-electron

git clone https://github.com/maximegris/angular-electron.git

Et installer les dépendances :

npm install

Si vous souhaitez générer les composants Angular avec le client Angular, il vous faudra installer le client @angular/cli dans le context global de NPM.

npm install -g @angular/cli

Comment est structuré le projet ?

Si vous êtes familier avec Electron, vous savez que toute la magie se passe dans le fichier main.js à la racine de votre projet. Ici, comme nous sommes en Typescript, il s'agira du fichier main.ts. C'est dans ce script que notre processus principal sera exécuté.
Plus exactement à la ligne :

  win.loadURL('file://' + __dirname + '/index.html');

La fonction loadUrl prend le point d'entrée de votre application et l'exécute dans le processus d'affichage mainWindow d'Electron.

Dans la vrai vie, le nombre de fichiers dans un projet augmente et il est important de garder son répertoire de travail logique et optimisé durant toute la vie du projet. C'est pour cela que la structure du projet est la suivante :

mon-appli/
├── app-builds --> Le code packagé pour Linux, Windows ou MAC
├── dist --> Le code source Typescript transpilé en Javascript
├── e2e --> Les tests de bout en bout
├── src --> Le code source Typescript
    └── index.html
├── package.json
├── main.ts --> Fichier principal pour Electron

C'est joli mais comment tu l'utilises ?

Comme précisé dans la première partie de l'article, il existe 3 modes d'utilisation :

Mode développement : Le code source est exécuté en mode à la volé avec Webpack ce qui vous permet de visualiser directement tout changement sans relancer. Pour moi c'est une killer-feature indispensable aujourd'hui pour le développement web.
Mode production : Le code source s'exécute dans une fenêtre Electron avec les variables de productions.
Mode packagé : Le code source est packagé dans un exécutable pour les différents OS (Linux, MAC ou Windows)

Les détails du lancement sont disponible sur le GitHub du projet angular-electron

Vers l'infini et au delà

Dans une application web classique avec Angular ou autre framework, vous pouvez interagir avec le navigateur de l'utilisateur. Cela peut être suffisant. Mais codant avec Electron, vous pouvez communiquer directement avec les fonctionnalités du PC de l'utilisateur à travers les modules NodeJS. Vous pouvez facilement créer des fichiers sur le PC, accéder à son contenu, etc... Ce qui ouvre de nouvelles perspectives et d'opportunités à explorer!

Le code source et plus de détails sont disponible sur le GitHub du projet angular-electron.