Suivant »

Introduction

Electron?

Tout d'abord, Electron est un framework destiné a créer des applications de bureau en utilisant les technologie du web (html, css, javascript). Cette technologie a été largement adoptée car elle ne necessite pas de nouveaux apprentissage et permet d'adapter le développement d'une application web vers une application desktop.

En principe, une application web tourne sur un serveur et n'accède pas à votre machine. Electron ouvre cette possibilité et donne plus de possibilités à votre développement.

De plus, Electron permet de déployer notre application sur les 3 OS Linux, Windows et MacOS.

Historique

Electron a été créé par Github pour le développement de l'éditeur Atom. L'idée été de proposer son propre éditeur de code. Utiliser javascript pour le développement semblait être une évidence car le javascript est un langage très populaire. Du web dans le desktop c'est top! Github a alors séduit beaucoup de gens comme Slack, Discord ou encore microsoft avec Vscode.

Comment ça marche?

Techniquement, Electron est la même chose que "Google Chrome" le navigateur de Google. Il est basé sur sa version opensource Chromium.

electron et chromium

Pour comprendre son fonctionnement, il est intéressant de regarder le fonctionnement de Chrome. Quand Chrome est activé sur votre machine on peut observer les processus activés dans le moniteur de tâches (chaque OS en a un). On remarque que plusieurs processus sont présents.

process chrome

En fait, le processus appelé "Google Chrome" est le browser (navigateur) et les onglets sont considérés comme des nouvelles fenêtres ici les "Google Chrome Helper". L'idée derrière cette séparation est d'isoler chaque onglet en assurant une plus grande sécurité.

La contrepartie est que chaque onglet ne peut pas communiquer avec un autre. Il doivent utiliser un autre mécanisme appelé IPC. Le schema est le suivant:

ipc

Nous utiliserons ce concept pour développer avec Electron. Les onglets seront des fenêtres mais le principe est identique.


la documentation electronjs ici