JavaScript universel et architecture isomorphe

On parle depuis quelque temps de « JavaScript isomorphe » pour décrire des architectures Web dans lesquelles on abandonne les principes historiques des Single Page Applications composées de coquilles HTML vides et moult JavaScript pour les remplir. Le JavaScript isomorphe a plutôt comme principe de produire des pages HTML pleinement fonctionnelles dès la sortie du serveur, mais chargeant elles aussi moult JavaScript pour prendre le relai —si possible— afin d'améliorer l'expérience utilisateur. Je propose que l'on parle d'« architecture isomorphe », une implémentation possible étant en « JavaScript universel ».

Ma compréhension de l'isomorphe est donc de promouvoir un fonctionnement identique d'un site Web, que la page soit générée par le serveur ou par le client, y compris au cours de la navigation, des interactions.

Cela permet notamment de répondre à des problématiques :

Autant dire que c'est nécessaire.

Mais cela ne nécessite pas du tout JavaScript côté serveur, il est tout à fait possible de développer dans n'importe quel langage serveur et faire tout de même de l'isomorphe.

Il est cependant assez évident que pouvoir partager du code entre les deux implémentations, client et serveur, qui doivent permettre les mêmes fonctionnalités, est séduisant.

« Universel » est sans doute un terme trop fort, avec des implications énormes, mais c'est la traduction litérale de cette proposition de Michael Jackson[2]. Universel pour dire que c'est le même code, ou à peu de choses près, qui peut fonctionner côté serveur comme côté client.

Je ne suis pas fan du terme « portable » proposé par Joseph dans son billet « Isomorphe ou Portable ? » suite à un échange sur Twitter, je le trouve trop vague. Un code JavaScript qui fonctionne bien sur tous les navigateurs ne peut-il pas prétendre à cette appellation ?

J'aimerais donc bien que l'on trouve un terme différent d'« universel », représentant mieux cette dualité client/serveur, mais je ne voudrais pas noyer encore le sujet dans une rhétorique contre productive. Je me permets juste de retirer la majuscule, n'abusons pas.


  1. Même si Google exécute maintenant le JavaScript des pages pour améliorer le référencement naturel des pages qui en (ab)usent… ↩︎

  2. On ne rigole pas. ↩︎


  1. TIL IntersectionObserver's rootMargin only works if the observer is in the same origin, because of privacy concerns:

    There is a risk that the API may be used to probe for information about the geometry of the global viewport itself, which may be used to deduce the user’s hardware configuration.

    That's why this demo of a sticky navigation doesn't work in CodePen's default view… 😞

    https://codepen.io/nhoizey/pen/QWBrrKB

  2. Which (stable, lightweight, maintained, etc.) npm package would you recommend to transform any RSS or Atom feeds to a standard JSON Feed format?

  3. I needed a JavaScript way to verify if two arrays contain the same (all different) values.

    I then found a better solution for my use case, but it might be useful later, so here it is:

    const sameValues = (array1, array2) =>
    array1.length === array2.length &&
    array1.every((element) => array2.includes(element));