Les frameworks web légers

January 2020 · 3 minute read

Le web devient lourdingue

La raison principale de l'augmentation du volume des pages des sites internet est liée au capacités croissantes des frameworks css et javascript utilisés par les web designers. La plupart du temps, la grande majorité des fonctionnalités disponibles dans ces boites à outils ne sont pas utilisés par les sites et, malgré tout, elles sont chargées par le navigateur de l'internaute. Les frameworks proposent aux développeurs de choisir les composants devant être inclus (quels outils on met dans la boite) mais cette étape fastidieuse est très souvent faite à la grosse louche et la caisse à outils devient vite très lourde à porter.

Par exemple, beaucoup de sites sont basés sur l'environnement Bootstrap / jQuery pour lequel de très nombreuses extensions sont proposés : carrousel, formulaire, carte géo et bien sûr thèmes en tout genre. Et cet environnement, comme d'autres, est devenu un monstre de code, même si des efforts sont fait optimiser la taille du source.

Le mouvement LowTech vise à faire diminuer le volume des pages web permettant des gains aux niveaux stockage, bande passante, temps processeur (sur les navigateurs surtout), temps d'affichage et, de ce fait, consommation énergétique.

Quelles solutions ?

HTML

La solution la plus radicale et la plus efficace en terme de gain est le codage de site web en html uniquement. Après tout, par défaut, html permet de réaliser simplement des sites à la fois accessibles au sens accessibilité et même “responsive” pour un rendu sur écran de tout taille. Le résultat est un site assez austère mais très fonctionnel.

Heureusement, d'autres voies existent car certains frameworks css ont visé la légèreté. Parmi ceux-ci, on remarquera :

W3.CSS

W3.CSS est un framework CSS sans javascript orienté responsive plus léger que les autres frameworks. Il a aussi pour objectif d'être simple à apprendre et ne nécessite que peu d'ajout de classe dans le code html.

Spectre.css

Spectre.css est aussi très léger et se rapproche plus de Bootstrap dans les composants mis à disposition sans pour autant nécessiter l'utilisation de javascript. Si vous avez l'habitude de bootstrap, cela peut être un très bon compromis.

Vanilla Javascript

Vanilla JS est le nom utilisé pour l'utilisation des fonctions javascript native. Ce site présente de manière humoristique comment utiliser javascript pour se passer de jQuery, il propose même de télécharger une bibliothèque js du framework qui n'est, en fait, qu'un fichier vide. C'est une façon de prendre conscience que très souvent jQuery n'est pas très utile alors que la majorité des développeurs web a pris l'habitude de l'utiliser. On pourrait dire la même chose de Vue.js ou Angular.js dans de nombreux cas.

Cash

Cash est un framework javascript ultra léger (8ko) qui cherche à proposer une encapsulation des fonctions native javascript avec la syntaxe de jQuery. C'est une très bonne solution pour se passer de jQuery si on a l'habitude d'utiliser ce framework très répandu.

Il existe de nombreuses alternatives légères à ces frameworks, mais je vous ai présenté celle que j'ai déjà utilisées. A vous de faire vos tests et trouver l'outil qui vous convient. Il n'est pas très compliqué de voir avec les outils de développement intégrés aux navigateurs si une page est légère et vite chargée.

Pour réagir à cet article, cela se passe sur le Fediverse.