Évolutions et limites des frameworks de développement web

Un framework se définit comme étant un ensemble d’outils qui constitue les fondations d’un logiciel informatique ou d’applications web. Son but ? Simplifier le travail et augmenter la productivité des développeurs et programmeurs.

Il existe aujourd’hui une myriade de frameworks, chacun adapté à un type spécifique de développement. Les frameworks de développement web, par exemple, sont conçus pour simplifier la création de sites web dynamiques en fournissant des fonctionnalités telles que la gestion de bases de données, l'authentification utilisateur, la manipulation d'URL et la création de pages web.

Les frameworks peuvent également être classés en fonction de leur langage de programmation sous-jacent. En effet, certains frameworks sont spécifiques à un langage particulier, comme Ruby on Rails pour Ruby ou Django pour Python, tandis que d'autres sont plus généraux et peuvent être utilisés avec plusieurs langages.

Dans tous les cas, l'utilisation d'un framework peut considérablement accélérer le processus de développement et améliorer la qualité du code en fournissant une base solide et éprouvée. On peut le traduire littéralement par “cadre de travail”, c’est-à-dire une aide pour le développement d'applications web. 

Ainsi, la création et le développement de ces frameworks résultent de la réponse à des problématiques en évolution constante. On peut classer ces mutations en trois générations, chacune s’appuyant sur les limites de la précédente pour optimiser son utilisation.

La première génération de framework née avec la diffusion d’internet et le besoin de développements simplifiés

Les caractéristiques de la première génération de framework, la technique Multiple Page Application

La première génération de framework est dite “Multiple Page Application”, c’est-à-dire que chaque requête envoyée entraîne le rechargement de la page et donc l’envoi d’un nouveau script. 

Cela est dû au fait que les frameworks MPA obligent à écrire un langage sur le serveur et utiliser JavaScript sur le navigateur. 

Ainsi, le développement est fait sur le serveur, en PHP par exemple. Les données sont ensuite envoyées sous forme de template en HTML et JavaScript, et on utilise JQuery pour créer des pages dynamiques. On appelle cela le Client Side Rendering (CSR), c’est-à-dire qu’on construit la page côté navigateur (le client).

Chaque action sur la page entraîne donc le rechargement de celle-ci, et l’envoi d’un nouveau template.

Un framework permettant une liberté et un référencement efficient

Les frameworks MPA ont l’avantage d’être parmi les plus anciens frameworks full-stack (fait référence à toutes les piles qui se superposent pour permettre le fonctionnement d’un site internet). Ils sont donc éprouvés et ont mûri avec le temps. Par ailleurs, ce sont des frameworks faciles à installer, ils sont rapides à prendre en main et à utiliser. Ils permettent une grande liberté avec la possibilité de créer autant de pages sur les produits et services que l’on souhaite.

Ce type de framework permet également une bonne gestion du SEO référencement. (l’ensemble des techniques mises en œuvre pour améliorer la position d’un site web sur les pages de résultats des moteurs de recherche). Il est important d’avoir un point référencement  car cela augmente le nombre de visualisation d’une plateforme de vente et termine sur une place efficiente dans le marché souhaité.

Cela donne de meilleures chances de se classer sur différents mots-clés, car une application peut être optimisée pour un mot-clé par page.

Finalement, les applications à pages multiples offrent une meilleure portée de sécurité et d'intégrité des données.

On constate ainsi que le framework MPA PHP est utilisé par 79% de tous les sites web, cela montre bien sa popularité auprès des développeurs !

Un framework complexe qui témoigne d’un manque de flexibilité 

Cependant, on peut reprocher aux framework MPA de ne pas être assez agiles et adaptés si on considère l’interface client. 

En effet, l’utilisation de ce type de framework nécessite d’utiliser deux langages différents. Un premier sur le serveur (comme PHP) et un autre du côté client (comme JavaScript). Le développement est donc ralenti et cela peut entraîner une confusion entre l’élément écrit en PHP et son comportement en JS.

De plus, la maintenance, la mise à jour et la sécurité sont les trois tâches importantes lors du développement d'applications à pages multiples. Les développeurs doivent sécuriser et mettre à jour chaque page séparément, ce qui peut constituer une perte de temps.

Par ailleurs, le développement est assez complexe dans les applications multi-pages. Il faut donc beaucoup de temps pour développer une seule application. Les développeurs doivent donc utiliser des frameworks côté client ou côté serveur pour palier  problème.

Ainsi, cette approche MPA est difficilement extensible. Elle a donc été complétée par une deuxième génération de framework pour l’améliorer.

La deuxième génération de framework : une solution à l'inflexibilité des MPA

Single Page Application (AngularJS et Angular) : la révolution des développeurs

On décrit la 2ème génération comme étant “Single Page” c’est-à-dire que les sites web contiennent seulement une page. Dans le cas d’une Single Page Application, le contenu de l’application Web n’est chargé qu’une seule fois, car elle n’est constituée que d’une seule page Web.

Cela signifie qu’il n’y a qu’un seul document HTML qui est  modifié par le code JavaScript intégré lors des interactions de l’utilisateur. 

L’objectif est de ne pas avoir à actualiser constamment la page car le site web fonctionne directement sur le navigateur sans multiplier les chargements de nouvelles pages.

Des frameworks rapides et facilitant l’expérience utilisateur

Cette génération de framework présente de nombreux avantages:

Le plus évident reste le temps de chargement réduit qui facilite l’expérience utilisateur. Ce processus utilise beaucoup moins de ressources, ce qui accélère considérablement l’actualisation de la page web.

Ensuite, nous avons la possibilité d’un dépannage simplifié. Les développeurs peuvent se concentrer sur le code JavaScript lors du débogage et ne prennent plus en compte le code du côté serveur. 

De plus, la plupart des frameworks JavaScript disposent d’outils de dépannage. 

Enfin, le Single page Application simplifie le passage aux applications mobiles. Cela est possible grâce au backend (plateforme qui n'est pas accessible directement par les utilisateurs) utilisé pour le navigateur web, qui  n’a pas besoin d’être modifié pour les applications mobiles. Les efforts de programmation sont ainsi diminués. 

Cependant, limités par le référencement et les petits budgets.

Nous avons deux principales limites à analyser pour cette deuxième génération.

Tout d’abord, ce framework pénalise la stratégie de référencement naturel (ou SEO) car il est beaucoup plus difficile pour les moteurs de recherche de parcourir le code JavaScript. 

De plus, la création d’applications à page unique ne vaut la peine que si un contenu dynamique doit être mis en avant. Cela relève donc d’une exigence en termes de mots-clés et de format.

Enfin, la réalisation d’une Single Page s’avère être beaucoup plus coûteuse que les pages web statiques. Il faut donc réserver un budget conséquent si on veut bénéficier de la fluidité du parcours utilisateur qu’offre une Single Page.

La génération 2.5 : une amélioration du chargement des pages

Les caractéristiques multiples du Server Side Rendering (NextJS ou SvelteKit)

La 3ème génération correspond au Server Side Rendering (SSR). Ce développement web consiste à créer les pages HTML côté serveur pour les envoyer toutes faites au navigateur. C’est le strict opposé du Client Side Rendering (CSR) évoqué précédemment, qui permet une fluidité de l'application mais pénalise le référencement et le temps de chargement. C’est pourquoi le SSR est un framework beaucoup plus intéressant et qu’il contient des critères précis :

- Utilisation de scripts qui fonctionnent sur le serveur Web en utilisant les langages de scripts appropriés.

- Chargement complet de toutes les instructions HTML, CSS et JavaScript dès la demande initiale.

Une technique fondée sur l’optimisation du temps de chargement

L’avantage principal de cette technique utilisée dans la 2ème génération est que les pages Web sont préchargées par le serveur. Cela donne une bonne expérience utilisateur car le délai de chargement de la page est quasiment immédiat. Cette approche se traduit par une vitesse de chargement optimisée, surtout quand il s’agit de pages Web statiques.

Par ailleurs, le chargement de pages rapides a indirectement un effet positif sur l’évaluation par les moteurs de recherche pour le référencement. Les robots peuvent capturer les pages plus facilement et plus rapidement grâce au SSR ce qui améliore le score des sites web construits avec ce framework.

Une technique uniquement accessible à un site de grand échelle 

On peut cependant déceler des limites dans l’utilisation de ce modèle de développement web. La principale est qu’il nécessite que le serveur livre des pages HTML préchargées pour chaque demande. 

De plus, lorsqu’un utilisateur envoie simultanément d’autres demandes au serveur Web pour envoyer des informations actualisées à l’utilisateur, cela provoque une sollicitation élevée de la capacité du serveur. Par conséquent, le SSR ne convient pas aux sites Web qui présentent un grand nombre de demandes ou qui nécessitent un grand nombre d’interactions avec les utilisateurs. Pour des situations comme celle-ci , le temps de réponse du serveur Web annulerait l’avantage offert par le chargement de page optimisée.

In fine, on constate que la problématique centrale sur laquelle est basée l’évolution des frameworks est le temps de chargement des pages. C’est en effet le levier principal pour améliorer les autres aspects de construction d’un site : facilité et coût de développement, référencement naturel, sécurité des données, ou encore expérience utilisateur. Toutefois, ces frameworks présentent encore des limites qui empêchent une optimisation parfaite des sites web. 

C’est pourquoi nous allons axer notre prochain article sur Qwik, la nouveauté et la solution aux limites des différentes générations. Le concept novateur de ce nouveau framework  repose sur la résumabilité, et devrait changer changer la vie des développeurs.

‍