Article mis à jour le : 05-05-2022
Une rapide présentation de l'isomorphismeDepuis plusieurs mois on entend beaucoup parler de l'isomorphisme. Parfois utilisé à tort et à travers, je connais des développeurs juniors qui m'ont dit parfois être un peu perdus. Voici donc un article histoire de résumer rapidement ce concept.
Initialement l'isophormisme signifie que deux éléments sont identiques. Dans le cas de la programmation, il s'agira de deux morceaux de code. Pour être plus précis, cela signifie que du code est capable d'être exécuté autant côté serveur que côté client. Ceci est aujourd'hui possible grâce à notamment l'avènement de node.js qui a fait de JavaScript un language utilisable côté serveur en plus de son ancien et unique rôle côté client (vous lirez souvent les terme "JavaScript Universel" ou "Isomorphic JavaScript").
Vous l'avez deviné, l'avantage est une factorisation du code, ou encore la capacité d'utiliser les mêmes mécanismes de validation (liste non exhaustive).
Prenons un exemple: vous avez une page Web de type SPA (Single Page Application) qui va contenir plusieurs blocks, widgets... Si vous mettez tout cela de manière asynchrone, quand l'utilisateur arrive sur la page, et bien il n'y a pas grand chose, et il doit attendre que tout arrive au compte goutte. L'isomorphisme peut alors entrer en jeu: il vous permet de générer une partie du contenu côté serveur, afin de ne pas afficher une page vide au chargement, puis de réutiliser ce même code ultérieurement pour recharger des blocs sans recharger toute la page. On parle souvent de SSR (Server Side Rendering) qui permet à NodeJS de générer toute une page côté serveur au lieu de laisser le client modifier le DOM via du NodeJS. Cette méthode, plus comlpexe, a notamment des avantages au niveau SEO car les crawlers des moteurs de recherche ont souvent du mal avec JavaScript.
Par abus de language, l'isomorphisme signifie simplement que du code (lui aussi au sens large) est identique quelle que soit la manière dont il est utilisé.
Reprenons notre exemple. Cette fois-ci vous utilisez un combo classique, disons du PHP côté serveur et du JavaScript, avec des requêtes Ajax, côté client. Puisque votre code est bien fragmenté, vous allez utiliser un template par bloc. Certains devant être affichés dynamiquement, vous allez pouvoir servir ces templates via des contrôleurs. Mais si on reprend notre idée de ne pas vouloir afficher une page vide, on va utiliser le même template dès le chargement de la page, sans passer par une requête Ajax.