Pourquoi utiliser Vanilla JS ?

Faire le tri est nécessaire entre une réelle amélioration pour l’expérience développeur & la performance de l’application et une simple hype.

Chez Troa, on prône un équilibre entre nouvelles technologies et robustesse. C’est le besoin client qui dicte la technologie et non l’inverse. Il faut qu’elle ait une réelle plus-value pour le projet et pas gadget au risque de détériorer l’expérience utilisateur. Nous aimons l’innovation pour améliorer notre code & nos process, mais nous préférons attendre un temps que les technologies atteignent leur maturité et que les standards se stabilisent avant de les intégrer dans nos outils.

C’est pourquoi, la plupart des sites que nous développons sont codés en Javascript natif.

Attention, coder en Vanilla JS, n’est pas synonyme d’outils datés. Au contraire, chez Troa, nous utilisons uniquement le nécessaire sans pour autant déployer des technologies surdimensionnées.

Ce choix est porté par le SEO, nos technologies back-end, notre vision de l'éco-conception et de l'accessibilité.

Côté back-end, nous nous reposons principalement sur 2 technologies :

• Kirby CMS (PHP) pour les sites vitrines

• Laravel (PHP) pour applications métiers

Pour nos sites vitrines, Kirby CMS est notre outil préféré car il peut être déployé rapidement (pas de base de donnée mais des Flat Files), générer un back-office personnalisé rapidement, possède une architecture MVC et nous permet d’avoir la main sur la performance Web.

Nous gérons la partie rendu HTML avec Kirby et rajoutons une surcouche Javascript avec Vanilla JS. Si nous devions passer par un framework fullstack comme Next avec React ou Nuxt avec Vue, nous devrions faire une connexion API entre Kirby et le framework, avoir un serveur Node pour faire tourner Next ou Nuxt constamment pour rendre le HTML.
A-t-on vraiment besoin d’une architecture aussi complexe pour afficher de la data ou faire de la pagination ? PHP remplis déjà très bien ce rôle via Kirby. Nous préférons limiter le nombre d’outils pour réduire le nombre de dépendances, avoir une maintenance simplifiée et faciliter le développement pour nos équipes.

L’éco-conception, l’accessibilité et le SEO sont au cœur de la conception de nos sites internet. Le JS natif nous permet de mieux contrôler le poids du bundle JS et d'accélérer le téléchargement et l'exécution du site. Nous portons une attention particulière dans le choix des librairies pour sélectionner celle qui correspondra à nos besoins, sans superflu, avec un bon suivi des développeurs et dont la lourdeur ne viendra pas handicaper le poids total du JS.

Cette rigueur dans notre code Javascript nous permet d’arriver aujourd’hui à des builds relativement léger.

• Parlons verre → 126ko Minifié (scroll animations, transition de pages)

• Troa → 99ko Minifié (scroll animations, transitions de pages)

• Écoles des réseaux pour la transition énergétique → 91ko Minifié (Ajax)

• Kaleo → 38ko (animations)

• Patrowl → 150ko (transition de pages, scroll animations, animations curseur)

• Toulouse FC → 150ko (transition de pages, scroll animations) + 150ko (React pour la page match live)

Pour structurer notre code front-end, nous nous sommes tournés vers un micro framework développé utilisé par Locomotive, à savoir Modular JS :

• pas de virtual DOM

• un poids léger (10,5ko minifié)

• une utilisation légère en ressources

• un système de composant permettant la réutilisation sur d’autres projets

• une interaction simple avec l’HTML

Pour ce qui est de la compilation, nous nous reposons sur ViteJs :

• configuration simple

• outil rapide pour le développement et la compilation

• HMR pour limiter les rechargements de page

• communauté rollup et accès aux plugins vite / rollup pour divers usages (critical CSS, GLSL, compression brotli)

• tree-shacking (retire le code javascript non utilisé)

Ce n’est pas pour autant que nous sommes réfractaire aux frameworks. Si le projet ou l’expérience le requiert, ce sont de super outils pour aller plus vite et faciliter le développement. Dans le cadre d’applications métiers sous Laravel, nous utilisons Vue JS combiné à Inertia pour faciliter la synchronisation des états entre Laravel et Vue.

Pour certains projets de sites vitrines nous pouvons avoir recours à VueJS ou React afin de faciliter le développement pour des interfaces dynamiques et obtenir une expérience utilisateur optimale.

En 2023, en collaboration avec Supercolor et Yumans, nous avons réalisé la refonte du site institutionnel du Toulouse Football Club, club de Ligue 1. Réalisé avec Kirby CMS et du Vanilla Javascript pour obtenir un site léger malgré une quantité de contenu conséquent. Il nous a fallu avoir une vision différente pour la partie match-center, en effet, dans cette section, l’utilisateur peut voir diverses informations sur le match en temps réel (compositions, historique, résultat, live match) qui évolue en 3 temps :

• Avant match

• Live

• Après match

Ici, notre choix s’est porté vers Preact. C’est une alternative légère et rapide à React avec la même API permettant de coder comme React avec un poids de seulement 3ko ! Avec un framework, cela nous permet de faciliter les mutations du DOM en fonction de l’état et de l’avancée du match et des statistiques. Sans impératifs de SEO pour cette section, Preact était suffisant pour nos besoins.

En 30 ans le poids moyen d’une page web est passée de 14Ko en 1995 à 2 500 Ko en 2024 (HTTP Archive, 2023). Soit une multiplication par 180 depuis la création du web. Cela provoque ce que les experts appellent “obésiciel” (contraction d’obésité et logiciel). Avec l’amélioration des débits, images, vidéos, 3D, animations, Frameworks, ont graduellement intégrés nos sites web augmentant le poids moyen de ceux-ci. Aujourd’hui nous savons que le poids d’un site influe sur son impact environnemental (3 à 4% des émissions en 2024 et 7% d’ici 2040 selon l’Ademe) en plus de restreindre l’accessibilité de l’information à cause, entre autre de l’obsolescence des appareils.

Aujourd’hui le métier de développeur front-end n’est plus seulement de développer des sites internet mais aussi de prendre ses responsabilités face à cette inflation.

Chez Troa, en plus de travailler l’éco-conception du site de manière générale, optimiser les images, choisir un bon hébergeur, utiliser du Vanilla JS nous permet de réduire nos builds Javascript, faciliter la maintenance de nos outils et assurer un bon suivi des technologies utilisées.

Contactez-nous.

Sources :

https://pwablo.be/blog/evolution-poids-pages-web
https://librairie.ademe.fr/consommer-autrement/5226-evaluation-de-l-impact-environnemental-du-numerique-en-france-et-analyse-prospective.html
https://dev.to/yehezkielgunawan/frontend-fatigue-5ai7
https://news.ycombinator.com/item?id=42777943
https://www.specinov.fr/bao/reduire-impact-site