Une WebApp, ce n’est pas qu’un simple site web ! Du point de vue de l’utilisateur, il s’agit avant tout d’une application. Pour y parvenir, de nombreuses règles doivent être respectées, celles-ci combinent des notions aussi diverses que l’ergonomie et le design, l’adaptation au terminal utilisé, et aussi les transactions client-serveur. Mais ce n’est pas tout ! Il existe également de bonnes pratiques, qui facilitent le développement et les performances d’une WebApp, en voici quelques-unes partagées par notre expert Pascal Barlier.

Bonne pratique n°1

Créer des “Templates” HTML.

Plutôt que de composer les éléments de l’interface par des requêtes jQuery successives à grands coups de appendTo, il est bien plus efficace de placer à la fin du code HTML des blocs div qui contiendront du code HTML prêt à être utilisé. Ils sont généralement qualifiés par le terme anglosaxon « template », signifiant « modèle » ou « gabarit ». Il est recommandé de donner à chacun de ces blocs un identifiant unique ainsi qu’un nom de classe commun à tous. Par exemple « template », cette classe ayant la règle display:none pour que les templates ne soient pas visibles. Pour en utiliser un, il suffit d’en faire une copie au moyen de la commande clone, puis d’éditer son contenu, puis l’insérer dans le DOM, et enfin retirer la classe template pour le rendre visible.

Bonne pratique n°2

Un webservice ne doit renvoyer que des données brutes.

Inutile de surcharger le serveur à créer une mise en page HTML. Mieux vaut utiliser la puissance de calcul du navigateur côté client pour cela, le serveur web pouvant alors se consacrer à des tâches plus importantes. Le format idéal pour le transfert de données du serveur vers le client, lorsqu’il s’agit de tableaux ou de structures de données, est le format JSON, il est nativement géré en JavaScript, mais également en PHP. Dans le sens inverse, le transfert de données gagne aussi à être effectué en format JSON, et dans ce cas il est recommandé d’employer une requête de type POST.

Bonne pratique n°3

Spécifier le type MIME des données renvoyées.

On ne pense pas toujours à spécifier le type MIME dans un script PHP car s’il s’agit d’une simple page HTML et l’affichage sera correct. Cependant, si le script doit retourner des données au format JSON, il est alors fortement recommandé d’indiquer explicitement le type MIME. Cela permet au navigateur de traiter les données en tant que JSON et non pas en tant que texte brut, et les commandes jQuery (ajax, get ou post) retourneront directement des données JSON, il ne sera donc pas nécessaire de faire une conversion au moyen de JSON.parse. Pour spécifier le type MIME, il suffit d’ajouter cette ligne au début du code PHP (sans oublier de laisser un espace après les deux points) : header(‘Content-Type: application/json’).

Bonne pratique n°4

Utiliser la règle CSS “!important” avec parcimonie.

Même si la règle « !important » peut être très pratique, il est préférable de l’éviter chaque fois que cela est possible. Le principe de fonctionnement des CSS définit que lorsque plusieurs sélecteurs s’appliquent au même élément, c’est celui qui cible le plus précisément l’élément qui est utilisé pour sélectionner les règles à appliquer.
Si une règle ne veut pas s’appliquer, il faut commencer par passer par le panneau de développement F12 pour afficher les règles et trouver le sélecteur qui s’applique. Il ne reste alors qu’à modifier le sélecteur qui doit être actif pour qu’il devienne prédominant.

Bonne pratique n°5

Profiter des classes CSS pour éviter de parcourir le DOM à la main.

C’est une des grandes forces des classes CSS que de permettre de modifier une quantité importante d’éléments en une seule fois. Outre la simplification du code, car il n’y a pas à faire de boucle, l’opération sera beaucoup plus rapide car elle sera effectuée par le navigateur. Pour cela, on utilise un sélecteur, qui peut être une simple classe CSS, et ainsi ajouter ou enlever une autre classe CSS à tout un groupe d’éléments en une seule opération : $(‘.classeDeBase’).addClass(‘classeEnPlus’)

Bonne pratique n°6

Utiliser la fonction CSS “calc” pour faire des mises en page précises.

Il arrive régulièrement que l’on ait l’intention de faire une répartition de la mise en page (grid, flex ou table) mélangeant des dimensions proportionnelles, où l’on utilise l’unité % et des dimensions fixes, définies en px, em etc.
La fonction CSS calc permet de déterminer les dimensions proportionnelles avec précision. Par exemple, pour créer un gros bloc de texte avec une petite bordure de chaque côté, plutôt que de définir : « 2em 95% 2em », qui poserait des difficultés avec une application responsive, il vous suffit d’utiliser la fonction calc de cette façon : 2em calc( 100% – 4em ) 2em

Bonne pratique n°7

Utiliser les classes CSS dans un but fonctionnel et non pas technique.

Il pourrait être tentant de reproduire en CSS le principe de formatage déjà utilisé en HTML, et donc, par exemple, de définir une règle bold {font-weight:bold} que l’on pourrait utiliser à chaque fois que l’on veut mettre un texte en gras, de la même façon qu’avec un tag b.
Cependant, les classes CSS doivent correspondre à des notions fonctionnelles, et non techniques. Si l’on veut mettre un élément en évidence car il sert à indiquer une erreur, on ne lui mettra pas deux classes bold et red, mais une classe error qui correspondra à la règle error {font-weight:bold ; color:red}

En conclusion

Construire une WebApp sans appliquer de bonnes pratiques, c’est prendre le risque de se retrouver bloqué à un moment ou un autre, et de devoir alors reprendre une partie du développement déjà effectué. Le web est en constante évolution, les bonnes pratiques le sont aussi. Pascal Barlier vous en a présenté quelques-unes dans cet article. Il en existe évidemment bien d’autres.
Celles présentées ici sont valables actuellement, mais seront peut-être moins pertinentes dans quelques années. C’est pour cela que nous vous recommandons de les mettre en œuvre sans plus tarder, et aussi, de vous tenir informé régulièrement des nouvelles pratiques et mises à jour pouvant survenir afin de garantir le bon fonctionnement de vos WebApps.

Formation

Développement Web Front End (JavaScript avancé, jQuery, TypeScript, Angular)