prototype

Prototyper une application de Bureau avec React

Je suis en train de publier ma première application Mac. C’est un minuteur “tomate”. Bien connu des adeptes de la Méthode Pomodoro.

Capture

Electron transforme une application Web en application de Bureau

Le framework Electron fournit un contexte d’exécution qui permet d’utiliser du code JavaScript et d’afficher du HTML sous la forme d’une application de Bureau.

On peut le voir comme un navigateur dédié à une seule application. Des APIs permettent de communiquer avec les fonctionnalités de l’OS qui ne sont pas disponibles sur le web. En contrepartie, l’utilisateur doit télécharger et installer l’application.

Mon objectif est de développer une application Mac OS toujours visible. Visible sur tous les écrans et au-dessus des autres applications. Pas possible en web.

La combinaison Electron et create-react-app est idéale

Dans la pratique: on crée une application web “classique” avec du HTML, CSS et JavaScript. Puis on lance l’application via Electron au lieu d’utiliser un navigateur.

La combinaison `create-react-app` et Electron permet de développer une application de Bureau très rapidement. On obtient le meilleur des deux mondes : développement rapide, toutes les bibliothèques JavaScript disponibles et un accès direct aux fonctionnalités de l’OS.

Dans la suite, je décris les premières étapes pour démarrer une Application Mac / Windows / Linux en utilisant JavaScript, React et Electron.

On prépare le fichier de démarrage pour Electron

À partir d’une application react-create-app classique:

npx react-create-app my-app

Dans le fichier public/electron.js on configure le démarrage d’Electron.

Pour le moment, j’utilise l’URL du serveur de développement. L’application va se mettre à jour après chaque changement de fichier. Rapide.

Quelques détails propres à mon application:

J’utilise une fenêtre transparente et sans aucune bordure qui est visible sur tous les bureaux et toujours au-dessus de toutes les applications. C’est le principe de tickingfocus.

On démarre l’application dans le contexte Electron

Pour ça, on ajoute une commande dans le fichier package.json pour démarrer l’application avec Electron:

{
  "main": "public/electron.js",
  ...
  "scripts": {
    ...
    "electron": "electron --remote-debugging-port=4321 .",
    }
}

on installe les packages nécessaires:

yarn add --dev electron

dans un terminal on démarre le serveur React:

yarn start

dans un autre on lance electron:

yarn electron

Boom, la fenêtre apparaît.

L’option de debug à distance (http://localhost:4321) permet d’accéder aux devtools depuis le navigateur:

Serveur de dev

Electron permet de faire des prototypes en moins d’une journée

Pas besoin d’apprendre de nouvelles APIs ou de régler de nouveaux outils de build. Tout est réactif et le développement est rapide.

J’ai développé tickingfocus lors d’un vol entre San Francisco et Lyon. Pouvoir créer un prototype utile en moins d’une journée avec toute la panoplie JavaScript en fait un outil puissant.

Il y a des compromis à faire: les applications sont plus lourdes et plus lentes que leur version native. MAIS je vous recommande d’expérimenter, même si c’est juste pour faire un frontend à tar.

Inscrivez-vous à la mailing list plus bas pour recevoir mes prochains articles. Je vais décrire la partie “Build” et “Packaging” pour distribuer l’application via l’App Store.

Références:

Published in: react electron quickstart

comments powered by Disqus