Ecosystème Natural
La structure
L'apparence
Le comportement
L'attitude
La colonne vertébrale
La mémoire
Le système nerveux
La communication
Côté navigateur
Lorsqu'on accède à nos applications, le navigateur commence par récupérer le code fonctionnel (JavaScript) qui aura été préparé en amont par le serveur. Celui-ci n'a besoin d'être récupéré qu'une seule fois. Le JavaScript est un programme qui va gérer les interactions de l'utilisateur, mettre à jour les pages et demander au serveur les données lorsque c'est nécessaire.
Angular
Pour ne pas réinventer la roue, nous utilisons la librairie Angular qui est une boîte à outils qui nous permet de gérer la majorité des besoins fonctionnels de l'application. En complément, nous avons développé la librairie open source Natural qui vient enrichir la boîte à outils pour des besoins plus spécifiques à notre écosystème. Nous y reviendrons.
Apollo
Pour communiquer avec le serveur, nous utilisons Apollo. Cette librairie va faciliter la communication et offrir un cache qui garde en mémoire une réplique de toutes les informations ayant déjà transité. Ainsi il ne récupère pas inutilement des infos qu'on a déjà. C'est particulièrement appréciable pour la réactivité de l'application, mais aussi pour sa continuité. P.ex lors d'une utilisation sur une connexion instable (4G p.ex), une partie des désagréments passe inaperçue.
API
Nginx est le serveur web qui réceptionne les demandes et délivre les réponses. En combinaison avec le standard GraphQL (supporté par Meta) ils forment l'API.
Côté serveur
L'API est une interface machine-machine standardisée et documentée qui permet à une ou plusieurs applications web de demander les données au serveur, dans un langage commun.
PHP
Une fois les demandes interceptées par l'API, c'est le PHP qui s'occupe d'y répondre. Nous utilisons le framework MVC Laminas pour orchestrer l'information. Felix est une librairie open source que nous avons développée pour mutualiser et standardiser nos usages les plus courants.
Base de données
Pour accéder à la base de données (MariaDB) nous utilisons l'ORM Doctrine. Cette librairie PHP s'occupe de garantir l'intégrité de la base de données avec notre code.
Lorsqu'un changement de structure de la BD est nécessaire, elle en garde une trace afin de pouvoir reproduire ces évolutions lors des mises en production ultérieures. Elle s'occupe aussi de sécuriser les requêtes et de convertir les données brutes en objets (POO). Elle optimise aussi les performances lors de nombreux accès à la base de données.
La santé de nos applications
Un aspect qui n'est pas encore ressorti dans cet article, c'est notre choix d'Angular : la principale raison est la bonne santé de nos applications.
Le JavaScript et le PHP ont eu une mauvaise réputation pendant de nombreuses années à cause d'une lacune commune : le typage du code. Le typage est le fait de pouvoir expliciter quel type d'information doit être fourni pour pouvoir réaliser une tâche.
Par exemple, si vous voulez additionner deux nombres, alors il vous faut deux nombres et non pas deux mots.
Cette lacune exposait le code à des bugs qui pouvaient passer inaperçus. En garantissant le typage, on garantit la faisabilité d'une opération. Ça garantit aussi qu'une modification ne vient pas rompre une fonctionnalité ailleurs, sans que nous nous en rendions compte.
Le PHP a déjà évolué depuis de nombreuses années pour supporter un typage fort, mais le JavaScript n'y est pas encore.
Et c'est là qu'intervient le typescript. Le Typescript est une forme avancée de JavaScript qui supporte le typage. La librairie Angular a été construite sur cette fondation. Elle permet la mise en place d'une base solide pour des projets d'envergure.
Si on combine Doctrine + Angular + PHP + API GraphQL, on obtient une chaîne de l'information fortement typée de bout en bout.
Si, au cours d'une itération de développement, une donnée change de format à n'importe laquelle de ces étapes, alors les systèmes de contrôle d'intégrité nous alarment.
Les tests automatisés
Dans la continuité du chapitre précédent, le typage ne fait pas tout. Si vous fournissez deux nombres pour faire une addition, mais effectuez une soustraction, le typage ne peut rien y faire pour vous alerter.
C'est là qu'interviennent les tests automatisés. Il en existe 2 types :
Les tests unitaires qui s'assurent que de petits morceaux de logique fonctionnent correctement.
Ensemble, ces tests automatisés limitent grandement le risque de régression lors des itérations de développement. Nous utilisons les librairies Karma, Playwright et PHPUnit.
Natural
Natural est une librairie open source que nous avons développée pour nous épauler dans les besoins récurrents de nos projets.
Il y aurait beaucoup à dire à son sujet, mais nous allons surtout parler d'un aspect central dans nos applications : le système de filtres qui va de pair avec la recherche avancée.
Le système de filtres
Comme nous l'avons vu précédemment, le navigateur doit demander au serveur les données dont il a besoin. Il y a deux besoins courants à ce sujet :
- L'utilisateur souhaite filtrer une liste parmi un jeu de données exhaustif selon ses propres critères
- Une page en particulier doit exposer certaines informations précises
Pour y répondre, nous avons développé un système aussi flexible qu'exhaustif qui permet de demander à peu près n'importe quoi au serveur, de façon sécurisée.
La recherche
Nous avons développé une interface pour manipuler ce langage de filtre, ce qui va nous être d'une grande aide pour illustrer cette rubrique, sans quoi ces concepts seraient bien abstraits.
Cette interface n’est pas juste un exercice, elle est utilisée dans tous les listings que peuvent rencontrer les utilisateurs. C’est un outil actif et central de nos applications de gestion.
Si une image vaut 1000 mots, une démonstration vaudra bien 1000 images…
Sur cette page, on peut manipuler les champs de recherche :
À partir d'une barre en apparence simple, il est possible d'ajouter des facettes ciblées pour construire une requête complexe. Voici un échantillon d'une panoplie de facette configurables pour s'adapter à un maximum de besoins.
