Cours

• 1: Concepts liés au développement desktop
• 2: ElectronJS
• 3: Projets

1 - Concepts liés au développement desktop

Programmation asynchrone

Tout application démarre avec un seul processus et un seul thread d’exécution. Dans une application graphique, ce thread s’appelle le thread principal ou le thread UI et c’est lui qui gère l’affichage et les interactions avec l’utilisateur.

Si on effectue des traitements longs (calcul d’un Fibonacci ou des nombres premiers) ou bloquants (attente de la réponse d’un serveur HTTP) dans le thread principal, il sera bloqué dans la partie “mise à jour de l’état de l’application”, causant ainsi un blocage de l’affichage et des interaction (les fameux freeze). C’est pour cela qu’on va effectuer ces traitements dans des threads. Ces derniers permettent de lancer des traitements en même temps sans bloquer le thread UI.

La programmation avec les threads fait partie d’un concept plus général appelé programmation asynchrone.

• La programmation asynchrone consiste à exécuter plusieurs traitements en même temps (en d’autres termes, je peux lancer une fonction et passer à la suite avant qu’elle se termine).
• En programmation, on écrit du code asynchrone via différntes API selon le langage: async await, promesses, threads, Rx (observables et observers), coroutines etc.
• Beaucoup des ces API créent ce qu’on peut qualifier des Thread virtuels. Ce sont des threads gérées par le programme et non par l’OS. Ceci permet de lancer plusieurs threads virtuels au sein d’un seul thread OS (on parle aussi de thread porteur).
  • En Kotlin: les thread virtuel sont appelés coroutines.
  • En C#: taches asynchrones
  • En java: Thread virtuels
• Pourquoi faire des threads virtuels ? Car le coût d’un thread OS est élevé est on est limité par le nombre de thread OS qu’on peut créer à la fois.
• Cas particulier de JavaScript: un seul thread est utilisé pour faire de la programmation asynchrone (via un even Loop). On peut créer un équivalent de thread via les WebWorkers.

Installeur

Une fois l’application développée, testée et prête à partir en production, il faudra la fournir aux utilisateurs. Plusieurs moyens s’offrent à nous:

• Fournir une archive compressée
• Fournir une application portable: comme un dmg sur mac ou une archive auto extractable sur windows.
• Fournir un installeur comme Wix pour windows
• Mettre à disposition sur un gestionnaire de paquêts
  • Windows: Scoop, Chocolatey ou winget
  • Ubuntu: apt
  • Javascript: npm
  • Python: PyPi (pour installation avec pip). Voici un tuto
• Mettre à disposition sur un magasin d’applications (Windows store, App Store, etc.)

Paradigmes de programmation

Voici exemple de programmation déclarative et impérative en TypeScript:

// typage implicite: la variable infère son type
let i = 10;
i = 20;
// typage statique, on ne peut pas changer le type d'une variable
//i = "Hello";

const items = [10, 34, -1, 44];
// const en TS empêche la réassignation (mais n'interdit pas la mutation)
// items = []

// Style de programmation impératif
const resultItems = [];
for (const item of items) {
  if (item > 0) {
    resultItems.push(item * 2);
  }
}
console.log(resultItems);

// Style déclaratif => sortie = f(entrée)
// Le code va refléter ou exprimer ce qu'on veut faire (et pas comment le faire)

const filterdItems = items.filter((item) => item > 0);
console.log(filterdItems);
const result2Items = filterdItems.map((item) => item * 2);
console.log(result2Items);

const result3Items = items.filter((item) => item > 0).map((item) => item * 2);
console.log(result3Items);

• La programmation déclarative a un style qui plus orienté vers la description de ce qu’on veut faire alors que la programmation impérative décrit comment le faire
• Actuellement, la programmation impérative est généralement plus optimale que la programmation déclarative, mais ça dépend des compilateurs, des langages et du type de programme qu’on écrit.
• La programmation déclarative permet de plus facilement rendre son traitement asynchrone par sa façon de coder (c’est plus facile de rendre asynchrone les fonctions qu’on veut plutôt qu’un ensemble de code impératif)

Le style impératif pour coder l’UI

Le style déclaratif pour coder l’UI

• En déclaratif, la mise à jour de l’UI se base généralement sur un état qui sera lié à un ou plusieurs composants graphiques. Dès que l’état change, le composant graphique met à jour son rendu. On parle alors de binding ou liaison.

@Composable
fun App() {
    val platformName = getPlatformName()
    Card {
        var expanded by remember { mutableStateOf(false) }
        Column(Modifier.clickable { expanded = !expanded }) {
            Text(
                text="Click me !",
                style = MaterialTheme.typography.h2
            )
            AnimatedVisibility(expanded){
                Text(
                    text = "Hello, ${platformName} 🎊",
                    style = MaterialTheme.typography.h1
                )
            }
        }
    }
}

UX et accessibilité

L’expérience utilisateur (en anglais, user experience ou UX en abrégé) est la qualité du vécu de l’utilisateur dans des environnements numériques ou physiques.

source wikipedia

L’accessibilité est la mise à disposition de vos sites web au plus grand nombre. On pense souvent que cela s’adresse aux personnes ayant un handicap, mais cela concerne également d’autres groupes comme ceux utilisant des appareils mobiles ou ceux qui ont des connexions internet de faible débit.

source MDN

Types de handicap à envisager

• Troubles de la vue
• Troubles de l’audition
• Troubles au niveau de la mobilité
• Déficiences cognitives

Plus de détails dans le site d’Apple et Mozilla

Lignes directrices et législation

Pour le web, on a le WGAC de la W3C. Pour le mobile, on le WAI de la W3C. Pour le desktop c’est un peu compliqué.

European Mobile Act

From June 23, 2021, public sector bodies have the responsibility to make their mobile app content accessible to everyone.

article de mobilea11y sur EAA

2 - ElectronJS

Vision globale d’ElectonJS

Création d’un projet avec Electron Forge

• Electron forge est un outil qui permet de simplifier les différentes actions qu’on souhaite faire sur un projet electron: démarrer un serveur de dev, générer une exécutable, etc.
  • Documentation et guide Electron Forge
• Electron Forge propose aussi la création d’un projet à partir d’un modèle.
• Création d’un modèle avec vite et TS npm init electron-app@latest my-app -- --template=vite-typescript

3 - Projets

Développer une application de bureau avec un framework au choix

Ce projet a deux missions principales:

• Développer une application de bureau qui illustre les fonctionnalités typiques d’une application de bureau avec un Framework au choix
• Restituer une étude sur le Framework utilisé

Il vous est demandé de développer une application de bureau de type CRUD (Create, Read, Update, Delete) avec les contraintes suivantes:

• Proposition d’un CRUD (4 pts)
• Persistance des données en local ou en ligne (4 pts)
• Affichage d’une liste de données (2 pts)
• Implémentation de deux fonctionnalités desktop natives (4 pts)
  • Icône dans la barre d’état système (system tray)
  • Service en arrière-plan
  • Option pour démarrer automatiquement avec le système
  • Menu contextuel (au clic droit)
  • dialog
  • Capture d’écran
• Compatible et fonctionnel avec au moins deux plateformes (vous pouvez utiliser WSL ou une VM) (2 pts)
• Publication sur un gestionnaire de paquêts (scoop, chocolatey, brew, etc.) (2 pts)
• Création d’un installeur qui ne nécessite pas les droits admin (2 pts)

Restituer une étude sur le Framework utilisé

Il vous est demandé de préparer une présentation autour du Framework de votre choix ainsi que votre application. Voici un modèle de plan à suivre:

• Historique du framework
• Caractéristiques principales (plateformes supportés, langages, etc.)
• Ce qui le différencie de la concurrence
• Qui l’utilise / communauté
• Principe de fonctionnement du framework
• Présentation de l’application et de ses fonctionnalités
• Démo de l’application

Evaluation et livrable

L’évaluation se base sut votre présentation qui restitue votre étude du Framework utilisé ainsi qu’une démo de votre application. Les présentations auront lieu durant la dernière séance.

Il vous est demandé de livrer la présentation ainsi que le code source de votre projet.

Quelques Frameworks

• Tauri
• MAUI
• Electron
• Flutter
• Kotlin multiplatform (KMP) + Compose multiplatform
• QT (en C++ ou un langage alternatif)
• React Native for Windows + macOS
• JavaFX
• avalonia
• UNO Platfrom

Développer une application de bureau avec ElectronJS

Ce projet a deux missions principales:

• Développer une application de bureau qui illustre les fonctionnalités typiques d’une application de bureau avec un Framework au choix
• Restituer une étude sur le Framework utilisé

Il vous est demandé de développer une application de bureau de type CRUD (Create, Read, Update, Delete) avec les contraintes suivantes:

• CRUD avec Firebase + UI (6 pts)
• Authentification avec Firebase (3 pts)
• Utilisation d’un crash reporter (3 pts)
• Implémentation de 4 fonctionnalités natives via le module electron (exemples: icône dans la barre d’état système (system tray), service en arrière-plan, Option pour démarrer automatiquement avec le système, Menu contextuel natif (au clic droit)) (4 pts)
  • ⚠ Le crash reporter n’est compté ici.
• Création d’un installeur (2 pts)
• Publication sur un gestionnaire de paquets (scoop, chocolatey, brew, etc.) (2 pts)