Comme l’illustre la magnifique tour de Pise, une bonne architecture est primordiale si on ne veut pas finir avec un projet qu’il va falloir regarder en penchant la tête, tout en disant à ses partenaires que c’était voulu. Toute bonne construction commence par une architecture solide et bien réfléchie. C’est un processus essentiel qui évite beaucoup de coûts et de problèmes sur le long terme. La conception d’un site internet ne déroge pas à cette règle. Un site avec une architecture bien pensée sera plus pérenne dans le temps avec une maintenance facilitée et donc moins coûteuse.
Aujourd’hui, nous allons vous parler d’une partie importante, mais souvent négligée de la conception d’un site internet, son architecture Frontend et plus particulièrement son architecture CSS.
Qu’est-ce que l’architecture Frontend et plus particulièrement CSS?
Le « Frontend » correspond à tout ce qui touche au visuel d’un site. Que ce soit les interactions que vous aurez avec le site, un menu déroulant, un modal, un carrousel ou bien le côté purement visuel, la mise en place du design, les animations, etc.
Quand nous parlons de CSS, nous parlons du côté purement visuel pour l’essentiel. C’est un langage de programmation qui sert au navigateur internet de chef d’orchestre pour savoir comment présenter le contenu.
Depuis presque 10 ans, la tendance a été de penser le design en composantes afin de gagner en modularité. Il faut voir cela comme des blocs Lego qu’on prépare puis qu’on assemble pour faire un site web. L’architecture CSS est donc la façon dont ces blocs sont pensés et ensuite assemblés.
Des avantages à tous les niveaux
Les avantages d’une bonne architecture Frontend sont multiples et seront bénéfiques pour tout le monde.
Une conception solide engendrant moins de bogues
Le premier avantage concerne un fléau des temps modernes : les bogues. On pourra ainsi réduire le nombre de bogues visuels afin de ne pas partir dans une éternelle chasse aux bogues que tout le monde aimerait éviter.
Pour ce faire nous développons et testons chaque composante (bloc Lego) en isolation avant de les inclure au projet. Ces composantes ne sont donc ajoutées que lorsqu’elles ont été mûrement réfléchies et développées en tenant compte des spécificités du projet.
Chaque composante est développée en mode « Défensif ». C’est-à-dire que nous essayons au mieux de prévoir tous les cas, y compris les plus improbables. Notre but est de développer des composantes qui s’adaptent à toutes les situations.
Coûts de productions et de maintenance réduits
Une fois ces composantes conçues, le site gagnera en modularité et il sera plus facile d’ajouter ou de modifier rapidement des fonctionnalités, que ce soit les ajustements de dernières minutes ou des ajustements après la mise en ligne en maintenance.
La durée de vie d’un site passe souvent par plusieurs phases et donc plusieurs développeurs. Une architecture Frontend saine permettra à tous les développeurs de continuer à travailler d’une manière idéale et efficace sans engendrer de nouveaux bogues. On évitera ainsi l’effet « usine à gaz » que certains projets ayant passé par plusieurs mains peuvent avoir.
Cela se ressentira sur les temps d’intervention nécessaires pour faire une tâche donnée ainsi que sur les coûts engendrés.
Un site plus performant et donc plus rapide
Ce n’est pas une surprise, un code plus optimisé engendre aussi un code plus performant. Et un code plus performant aura des répercussions sur la rétention des utilisateurs ainsi que sur le SEO.
Pour ce faire, l’architecture nous aide de différentes façons :
- Nous optimisons le rendu de chaque composante afin d’avoir un chargement et un affichage rapide dans le navigateur.
- Nous évitons les problèmes de spécificité en CSS ce qui engendre moins d’efforts du côté du navigateur et moins de bogues.
- Nous évitons les répétitions de codes qui peuvent survenir ce qui permet d’alléger le poids des fichiers et donc le chargement des pages.
Une approche gagnante
Pour toutes les raisons évoquées ci-dessus, dans un site web, il est très important de penser modulaire, de penser réutilisation et évolution. Il ne faut pas négliger cet aspect même s’il vient avec certains défis en développement. Au final, cela bénéficiera grandement au projet.
Dans un prochain article, nous explorerons différentes techniques permettant de relever ce défi. Ce sera un article beaucoup plus technique dans lequel nous expliquerons les avantages et les inconvénients de chaque technique, en finissant par vous faire part de nos propres choix et bien entendu de leurs raisons.
