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 Un framework est un ensemble d'outils et de bibliothèques qui fournit une structure et des fonctionnalités préétablies pour développer des applications, simplifiant ainsi le travail des développeurs en offrant des solutions prêtes à l'emploi. front-end Le front-end désigne la partie visible d'un site web ou d'une application avec laquelle l'utilisateur interagit directement. Il englobe l'interface utilisateur, le design, et les éléments interactifs, généralement créés avec HTML, CSS, et JavaScript. . 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 Le HTML (HyperText Markup Language) est le langage standard utilisé pour structurer et afficher le contenu sur le web. Il définit des éléments comme les titres, paragraphes, liens, images, et autres composants d'une page web. , CSS Le CSS (Cascading Style Sheets) est un langage utilisé pour décrire l'apparence et la mise en page des documents HTML, en définissant des styles comme les couleurs, polices, marges, et positionnements des éléments sur une page web. et DOM Le DOM (Document Object Model) est une représentation en structure d'arbre d'un document HTML ou XML, permettant aux développeurs d'accéder et de manipuler dynamiquement les éléments d'une page web via des langages de programmation comme JavaScript. tandis que le W3C Le World Wide Web Consortium (W3C) est une organisation internationale qui développe des standards ouverts pour assurer la croissance à long terme du web, comme HTML, CSS, et XML. (World-wide-web Consortium) valide ces recommandations notamment pour  l’ accessibilité L'accessibilité numérique garantit que les sites et applications sont utilisables par tous, y compris les personnes handicapées, via des pratiques comme l'utilisation de texte alternatif et la navigation au clavier. .
• L’IETF (Internet Engineering Task Force) est responsable des protocoles comme HTTP Le HTTP (HyperText Transfer Protocol) est un protocole utilisé pour transférer des données sur le web, permettant la communication entre un navigateur et un serveur pour afficher des pages web. et HTTPS Le HTTPS (HyperText Transfer Protocol Secure) est la version sécurisée du protocole HTTP. Il chiffre les données échangées entre un navigateur et un serveur, garantissant la confidentialité et l'intégrité des communications. .
• ECMA International définit le standard ECMAScript ECMAScript est une norme de langage sur laquelle JavaScript est basé, définissant la syntaxe et les fonctionnalités pour assurer un fonctionnement cohérent sur différentes plateformes. , 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 JavaScript est un langage de programmation dynamique principalement utilisé pour ajouter des fonctionnalités interactives aux pages web. Il permet de manipuler le DOM, de gérer des événements, et d'effectuer des requêtes asynchrones. 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 Une API (Application Programming Interface) est un ensemble de règles permettant à différents logiciels de communiquer entre eux. Elle simplifie l'intégration et l'échange de données entre systèmes. 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 Une Single Page Application (SPA) est une application web qui charge une seule page HTML et met à jour dynamiquement son contenu en réponse aux interactions utilisateur, sans recharger entièrement la page. , 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 La Webperf désigne l'optimisation des performances d'un site web pour accélérer son chargement et améliorer l'expérience utilisateur, grâce à des techniques comme le caching, la compression, et la réduction des fichiers. , 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.