La structure d’une WebApp

1. Le code HTML

Il y a plusieurs façons de structurer le côté client d’une WebApp. Le code JavaScript peut être intégré à la page web ou placé dans un fichier séparé. La même alternative se présente également pour les fichiers CSS. Dans ce livre, c’est la structure monolithique qui a toujours été utilisée, en dehors des librairies additionnelles, il n’y a qu’un seul fichier pour toute l’application. Cette démarche a été choisie parce que cela facilitait la présentation des exemples, mais cela offre aussi des avantages en matière de performances puisqu’il n’y a qu’un seul fichier à charger alors qu’une WebApp complexe pourrait fort bien disposer de plusieurs dizaines de fichiers JavaScript et CSS. Évidemment, ceci a un inconvénient : le code source d’une WebApp importante risque rapidement de faire plusieurs milliers de lignes. À ce stade, un découpage peut se révéler nécessaire, surtout pour le code JavaScript.

En attendant de franchir ce seuil, la WebApp présentée ici est encore de structure monolithique, mais il serait facile de changer de structure en créant des fichiers JavaScript et CSS supplémentaires.

Une WebApp, c’est avant tout une page web. Il faut donc commencer par respecter la structure habituelle d’un fichier HTML, avec une section head. Un élément est particulièrement important lorsqu’il s’agit de créer une WebApp, c’est le tag meta viewport, qui permet de définir de quelle façon doit se comporter le navigateur pour gérer la mise à l’échelle du document sur de petits afficheurs.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width"> 
<title>WebApp</title> 
<script src="lib/jquery/jquery-3.4.1.min.js"></script> 
<script src="lib/Form.js"></script> 
<link rel="stylesheet" href="lib/fontawesome/css/all.min.css"> 
<style> 
      /* La déclaration...

Un exemple utile

1. Création d’un compte utilisateur

Cette WebApp est assez simple, mais fort utile, car elle permet de gérer la création d’un compte utilisateur ainsi que les opérations de connexion et déconnexion de celui-ci. Elle reprend des éléments déjà présentés dans le précédent chapitre, comme le menu, et l’affichage adaptatif, mais seule l’icône située tout à droite sera nécessaire pour gérer le compte utilisateur.

Étant donné la longueur du code, près de 600 lignes, sans compter les six services web nécessaires à son fonctionnement, celui-ci n’est que partiellement présenté ici. Le code complet est disponible en téléchargement depuis la page Informations générales, il peut aussi être consulté en ligne à l’adresse webapp.codeinter.net.

Créer un compte est nécessaire dès qu’une authentification de l’utilisateur est requise pour disposer de toutes les fonctionnalités d’un site ou d’une application. Elle se déroule généralement en plusieurs étapes.

On demande d’abord à l’utilisateur de fournir une adresse mail, qui va faire l’objet d’une vérification. Cette opération est nécessaire pour plusieurs raisons :

Empêcher la création de multiples comptes avec une seule adresse.
Empêcher la création de comptes totalement anonymes.
Empêcher des petits plaisantins de créer des comptes avec les adresses mail d’autres personnes.
S’assurer que l’utilisateur a bien saisi une adresse e-mail valide.

Si l’on est sur un site de commerce en ligne, l’adresse de messagerie peut suffire. Mais si l’utilisateur a la possibilité de publier des données (textes, images, commentaires…) sur le site, un identifiant sera alors nécessaire. Celui-ci servira alors de pseudonyme à l’utilisateur. La deuxième étape consiste donc à choisir un pseudonyme et un mot de passe.

2. La première étape

Lorsque l’on clique sur l’icône de droite, un gestionnaire d’événement est déclenché et la variable globale identifiantConnexion...

La finalisation

1. Contrôler la sélection de texte

C’est avec peu de choses que l’on peut donner un aspect plus « natif » à une WebApp. On peut déjà empêcher la sélection de texte à la souris, ce qui a souvent été fait dans les exemples présentés dans cet ouvrage. On le fait très simplement à l’aide d’une règle dans la feuille de style.

body{user-select: none}

Malgré tout, la sélection reste possible sur les éléments de formulaire, les textarea, et les blocs dotés de l’attribut contenteditable=true, ce qui est plutôt normal.

Si l’on veut autoriser ponctuellement la sélection de texte, il suffit d’utiliser la propriété user-select sur les éléments souhaités. Cette propriété dispose de plusieurs valeurs possibles :

none : la sélection est limitée aux éléments de formulaire et aux champs éditables.
auto : rétablit les possibilités de sélection sur l’élément visé.
text : limite la sélection aux éléments texte.
all : tout le bloc concerné est sélectionné par un simple clic de la souris.

2. Éviter la fermeture de l’application

Si la WebApp est chargée comme un site web classique, il est recommandé de sécuriser une éventuelle fermeture accidentelle. Il n’y a rien de plus rageant que de perdre son travail en cours. Le gestionnaire d’événement window. onbeforeunload permet justement de demander une confirmation à l’utilisateur avant de quitter la WebApp. Le code qui suit, et qui est inspiré d’un exemple disponible...

Une WebApp complète