La revanche de l’amélioration progressive

L’obsolescence programmée des frameworks front-end

En évoluant lentement, les standards du Web conçus selon le principe de l’amélioration progressive, génèrent de la frustration. Mais, comme le dit Jeremy Keith :

Ce qui est tout nouveau aujourd’hui commence à montrer ses limites beaucoup plus rapidement que quelque chose qui a déjà résisté à l’épreuve du temps.

Obsolescence constatée

Ce développeur web britannique (et écrivain s’il vous plaît, avec des ouvrages comme DOM Scripting ou HTML5 For Web Designers ) met même en cause les frameworks front-end. En effet, l’année dernière il a pu constater que 2 clients dans 2 secteurs totalement différents ont passé des mois et des mois à mettre à jour leur framework. Ce qui signifie des dizaines, voire des centaines de milliers de dollars pour réécrire des projets entiers dans le seul but de reproduire les mêmes fonctionnalités que leurs versions précédentes…

Toujours plus de complexité

Malheureusement, les frameworks obscurcissent ou parfois suppriment la possibilité de manipuler le code natif, rendant quasiment impossible l’ajout d’améliorations de performance, même les plus triviales. Ils rendent la conception des sites web complexes, en ajoutant des couches d’abstraction réalisées dans les navigateurs web qui vous éloigne des standards et vous enferme davantage dans un cadre qui vous éloigne de vos objectifs de rapidité, de performance.

Un coût non négligeable

Et si l’on en croit le rythme de changement de version de ces frameworks, vous devrez tout recommencer dans 18 mois ! Votre architecture web repose entièrement sur cette technologie, et vous avez toute votre équipe de développement qui peut être payée un ou deux trimestres tous les deux ou trois ans, juste pour faire du sur-place. Youpi !

Keith constate la même chose qu’artwaï : le plus triste dans tout cela, c’est que nos clients doivent nous commander des expertises webperf car les “mises à jour” s’accompagnent souvent de graves régressions de la vitesse du site Web. Même si c’est bon pour nos affaires, la plupart des développeurs dont nous sommes détestent refaire le même code deux fois de suite pour le même projet.

Les Standards du Web

Petit rappel : les standards du web sont un ensemble de règles techniques qui assurent que les sites et applications Web fonctionnent correctement ensemble, quels que soient le terminal mobile ou desktop et le navigateur Web utilisé.

Mais qui définit les standards du Web ?

En 2025, les organisations assurant l’interopérabilité et l’évolution des technologies Web sont organisées comme suit.

• Depuis 2019, le WHATWG gère l’évolution de HTML, CSS et DOM tandis que le W3C (World-wide-web Consortium) valide ces recommandations notamment pour  l’accessibilité.
• L’IETF (Internet Engineering Task Force) est responsable des protocoles comme HTTP et HTTPS.
• ECMA International définit le standard ECMAScript, qui régit JavaScript.
• Enfin, l’ISO développe des standards techniques comme le format PDF et Unicode. Ensemble, ces organisations assurent l’interopérabilité, notamment grâce à l’amélioration progressive et l’évolution du Web moderne.

Comment être informé de l’adoption de ces standards dans les navigateurs ?

Pour suivre l’adoption des standards du Web dans les navigateurs, Can I Use est une ressource incontournable dont on vous a déjà parlé qui permet de vérifier la compatibilité des fonctionnalités HTML, CSS et JavaScript avec chaque navigateur via des tableaux détaillés.

Pour une documentation plus approfondie, nous vous recommandons MDN Web Docs qui propose des références complètes sur ces technologies, avec une section dédiée à la compatibilité des navigateurs pour chaque fonctionnalité, facilitant ainsi le travail des développeurs.

Les avantages d’adopter les standards du Web pour vos projets.

Le web en tant que standard est une valeur sûre. A l’instar de l’HTML LS (pour Living Standard), le web de par sa conception n’a plus de version. C’est la promesse que le web nous fait, alors il faut en profiter :

1. En adoptant progressivement les fonctionnalités standardisées pour le web dès qu’elles sont supportées par votre cible navigateur.
2. En utilisant l’amélioration progressive pour créer des applications rapides et fiables qui s’adaptent au contexte des utilisateurs. L’intérêt d’opter pour les fonctionnalités conformes aux standards du Web au fur et à mesure qu’elles sont disponibles est que votre site devient contextuel. La même base de code s’adapte à son environnement (c’est ce qu’on appelle l’amélioration progressive) en jouant sur ses points forts, plutôt que d’essayer de construire et d’expédier votre propre environnement à partir de zéro .
3. En écrivant un code qui s’appuie sur le navigateur, et non qui s’en éloigne : optez pour des fonctionnalités natives du navigateur qui sont généralement plus rapides, plus accessibles, plus sûres et, ce qui est peut-être le plus important pour l’entreprise, maintenues par quelqu’un d’autre.

Exemples de standards Web qui mettent à mal le paradigme des frameworks JS front-end.

Nous ne traitons pas ici du JS inutile au vue d’évolution des standards (je vous invite lire ou relire No Fucking JS spirit cher à notre agence web) mais des fonctionnalités typiques des Framework JS qui sont ou vont être remplacées par les dernières évolutions des standards du web.

• Le CSS Moderne, sans rentrer dans les détails techniques, avec les Custom Properties CSS et le pseudo selecteur :has(), fournit une solution de gestion d’état et d’interfaces dynamiques très simple à mettre en place. Autre exemple, CSS Containment et Content-Visibility permettent de retarder le rendu des éléments non visibles et peuvent, en plus d’améliorer les performances, remplacer dans certains cas le Virtual DOM des frameworks JS.
• Les Web Components (Custom Elements, Shadow DOM, HTML Templates) sont un ensemble d’API de la plateforme web (donc supportés nativement !) qui permettent de développer des composants personnalisés réutilisables sans dépendre d’un framework. On peut même dire qu’ils sont une fonctionnalité HTML-first.
  
  Cherry on the cake : aujourd’hui ils fonctionnent aussi avec les frameworks.
• L’API Web Transitions permet d’appliquer des animations au moment où l’utilisateur navigue entre différentes pages web ou sections du site. De ce fait, ce type de transition est plus rapide qu’une transition gérée par React/Vue, car c’est optimisé nativement, même sur mobile.

Profitez de l’amélioration progressive !

Il va sans dire que les frameworks JS front-end font beaucoup de choses et que dans certains contextes ils sont utiles. Si vous optez pour un framework ou pour une SPA, pensez sérieusement au long terme et assurez-vous de faire du très bon travail. A minima, le framework utilisé ne devrait pas perturber la navigation et l’adoption des nouveaux standards.

Nolan Lawson, expert en Web Performance, lui aussi, a formulé la situation comme ceci :

La meilleure des SPA est meilleure que la meilleure MPA ;

mais une SPA moyenne sera toujours pire qu’une MPA moyenne.

Il y a près de 20 ans, la discussion portait sur des aspects visuels beaucoup plus simples, comme les coins arrondis et les ombres portées, mais le sentiment reste vrai aujourd’hui : il est tout à fait absurde d’envoyer des centaines de kilo-octets de scripts pour donner à un site par ailleurs statique une simple navigation fluide. De nos jours, vous pouvez mettre cela en œuvre avec l’API Web Transitions en une ligne de CSS. Et, dans le pire des cas, les navigateurs qui ne le prennent pas en charge parcourent simplement votre site comme ils ont toujours été conçus pour le faire.

D’où l’intérêt de bien connaître les technos Web, de respecter les standards pour profiter de l’amélioration progressive :

C’est la méconnaissance des standards du Web

qui mène aux dettes techniques de demain.

Source : Build for the Web, Build on the Web, Build with the Web

Visuel généré à partir d’une intelligence artificielle.