Introduction aux frameworks front-end (Bootstrap, Foundation)

Les frameworks ou cadriciels en bon français sont des outils de plus en plus courants dans le processus de création de sites web. On distingue au moins deux types de frameworks : front-end et back-end.
Les frameworks back-end (comme Symphony, Laravel ou CakePhp) sont déjà utilisés depuis plusieurs années avec succès, mais qu’en est-il des frameworks front-end ?
Depuis deux ans environ, ces frameworks sont devenus presque incontournables. Nous allons découvrir dans cet article, ce qu’est un framework front-end, pourquoi en utiliser un, identifier les différents frameworks et enfin en analyser les limites.

Qu’est-ce qu’un framework front-end ?

Concrètement, c’est un ensemble de fichiers et dossiers livré de façon structurée; le tout est codé en respectant les standards actuels et fonctionne uniformément sur toutes les plateformes et navigateurs actuels.
Ce pack de fichiers fournit un lot de comportements et d’éléments couramment utilisés dans un site web.

Il y a 3 types de fichiers dans le framework : HTML, CSS et JS.
Le language HTML structure les données, le CSS stylise ces données pour les rendre visuellement compréhensibles et esthétiques, le JS (acronyme de Javascript) permet de produire des animations et interactions améliorant l’expérience utilisateur.

Pour bien comprendre, nous allons identifier les composantes (et donc les besoins) d’une page web classique, ils seront décrits dans l’encadré suivant :

Les composantes d’une page web

La base

– La typographie (police, taille, titres, paragraphe)
– Les autres aspects généraux par défaut que l’on retrouve sur toutes les pages du site

Le Layout

Ce sont les zones principales qui architecturent une page, et que l’on retrouve presque systématiquement sur toute page web :
– Une zone d’en-tête (ou header) comportant le logo par exemple.
– Un menu principal (ou navigation) des pages du site web.
– Une zone de contenu principal, avec éventuellement une barre latérale (ou sidebar)
– Un pied de page (ou footer)* Layout en rouge dans la figure : header, slider area, contenu principal, footer.

* Modules en vert dans la figure : module de recherche, slider, zone image, titre, triptyque colonnes, liste de pages dans le footer.

Les états

Et ces modules peuvent avoir eux-mêmes des états différents :
– visible ou caché
– effet hover
– actif ou inactif
– etc. …

* États en bleu dans la figure : dropdown du menu, slide active du slider représenté par un disque sombre.

Les comportements interactifs

Pour rendre l’expérience utilisateur plus riche, un ensemble d’animations et de comportements interactifs sont identifiables :
– des menus animés (type dropdown, ou off canvas)
– des carrousels (ou sliders)
– ligthbox pour agrandir les images
– des onglets interactifs
– tooltips, alerts, modals …
* Il s’agit dans la plupart des cas de comportements utilisant le langage Javascript.

Le responsive design et la grille

Lorsqu’une page web est conçue pour réorganiser son contenu de façon optimale pour différentes tailles d’écran, il s’agit alors de responsive design.

Un site devient ainsi accessible sur un ordinateur classique (desktop), sur une tablette ou encore un téléphone mobile (type iPhone, Android) tout en réorganisant un contenu unique, certains blocs de contenus seront sur deux ou trois colonnes, cacher ou modifier selon le terminal utilisé.
La grille régit le contenu sous forme de colonnes. Les blocs de contenu seront réorganisés afin de s’adapter à la taille de l’écran et d’offrir une expérience utilisateur optimale.

«Le framework front-end répond au besoin de chacune des composantes d’un site web»

Maintenant que nous avons découpé clairement les composantes d’une page web classique, il est plus aisé de comprendre ce que peut apporter un framework front-end.

Un framework propose des éléments préformatés et paramétrables pour chacune des composantes identifiées ci-dessus :
– Un layout complet et manipulable
– Des modules couvrant tous les aspects et besoins courants
– Des états standards
– Des comportements interactifs multiples
– Un design responsive paramétrable

Le framework est en d’autres termes un « kit de démarrage front-end » composé de briques personnalisables. On peut aisément sortir de l’aspect graphique par défaut proposé par le framework.

Les principaux acteurs

Il existe actuellement une multitude de frameworks front-end, mais nous allons nous attarder sur les deux frameworks les plus populaires : Bootstrap de Twitter et Foundation de Zurb.

Bootstrap de Twitter

Il est le plus connu et le plus utilisé. Certainement boosté par la notoriété de Twitter qui a conçu son propre framework et a choisi de le mettre à disposition du public. Bootstrap est ainsi né fin 2011, depuis sa notoriété n’a cessé de grandir, en raison de sa simplicité d’implémentation et de la diversité de ses composants.

Lecture recommandée
Bootstrap 4 pour l’intégrateur web

Bootstrap est fourni avec des fichiers CSS, JS et une police. Il est également possible de télécharger des fichiers HTML d’exemple afin de découvrir ce dont est capable le framework.
Bootstrap propose :
– une grille responsive, des styles CSS pour tous les éléments HTML standards (formulaire, bouton, texte, image …)
– des composants JS comme des listes déroulantes dynamiques, des navigations interactives ou un carousel
– une police qui est en fait un set d’icônes. L’avantage est que les icônes n’étant pas des images mais des polices, elles sont vectorisées et donc toujours nettes sur tout type d’appareils (on pense notamment aux appareils mac disposant d’un écran Retina).

Il est possible de coupler Bootstrap avec le préprocesseur de CSS appelé LESS CSS. Cet outil permet de créer des fichiers CSS encore plus rapidement grâce à un language de programmation bien plus dynamique et intelligent que le CSS standard. Ceci est une option, mais Bootstrap couplé à LESS devient un ensemble d’outil encore plus performant.
À noter que Bootstrap est également compatible avec le préprocesseur SASS (qui se comporte de façon identique à LESS).

Une des options proposées par Bootstrap est de pouvoir personnaliser les couleurs et les aspects graphiques du framework avant même de le télécharger.
Bootstrap est mis à jour régulièrement, au rythme moyen d’une nouvelle version majeure tous les 12 à 18 mois.

En savoir plus sur Bootstrap
Tous les composants de Bootstrap

Foundation de Zurb

Il est moins populaire que Bootstrap, car un peu plus pointu. Mais Foundation est en tout point semblable à Bootstrap.
Foundation propose :
– une grille responsive, des style CSS pour les éléments HTML courants
– des composants JS d’ailleurs un peu plus fournis que sur Bootstrap

Par contre pas de set d’icones fourni par défaut. Il est de toute façon très simple d’en insérer un.
Il est possible de consulter de nombreux templates de pages conçus avec Foundation. Ce framework quant à lui, n’est pas compatible avec le préprocesseur de CSS appelé LESS CSS. Foundation supporte uniquement SASS.

Dans l’ensemble Foundation est un outil qui semble plus complet mais moins évident à prendre en main que Bootstrap. Il s’adresse aux développeurs front-end (ou intégrateur web) plus pointus. Foundation semble également plus à même de répondre pleinement à des projets web d’envergure demandant plus de souplesse.

Attention : Foundation n’a plus connu de mises à jour importantes depuis plusieurs années et le projet a perdu en attractivité. La communauté semble s’amenuiser même si quelques rares développeurs semblent vouloir proposer Foundation version 7 pour la fin 2021. Rien de moins sûr à la vue du très faible engouement.

En savoir plus sur Foundation
Tous les composants de Foundation

Pourquoi utiliser un framework front-end en 5 points

Un framework propose de multiples avantages :

1. Gain de temps

Prenons un cas concret. Un nouveau projet arrive sur la table, le développeur front-end doit évaluer le temps de développement mais souvent le temps presse. Alors le framework front-end peut être une bonne alternative. Car le développeur n’aura pas à partir de zéro. Plutôt que de coder et créer l’ensemble des composantes de la page, il aura la tâche d’assembler les éléments préformatés et proposés par le framework. C’est comme si l’on éliminait une étape dans le processus de travail du développeur front-end.

On élimine l’étape zéro, celle ou le développeur front-end part de rien ou presque pour créer le site web au complet.

2. Standardisation et performance

Un site développé en utilisant un framework sera performant car le framework est optimisé pour les multiples navigateurs web du marché. Plutôt que d’un site performant on parlera plutôt d’un site optimal, ceci sera expliqué dans les limites du framework front-end.

3. Évolutivité et mise à jour

Le framework est régulièrement mis à jour afin de respecter les derniers standards du web mais aussi afin de proposer des modules pertinants et dans l’air du temps. En utilisant un framework, on bénificie d’un ensemble d’améliorations bénéfiques pour la construction et la mise en place d’un site web devant respecter les derniers standards en vigueur.

4. Gratuit et libre

Les frameworks front-end sont (au moins actuellement) gratuits et libres. Cela signifie qu’il est possible de les utiliser sans payer de licence et de pouvoir les modifier à son gré. C’est du moins le cas pour Bootstrap et Foundation.

5. Fiabilité

Les frameworks les plus populaires par des centaines de milliers de développeurs qui attestent de la qualité et de la fiabilité de l’outil. Les bugs sont presque inexistants.

En bref, utiliser un framework permet d’éliminer une étape parfois laborieuse qui est celle de concevoir les bases visuelles du site et de créer les différents modules de zéro. En plus de gagner du temps, il fournit une structure éprouvée, solide, et évolutive testée par des milliers d’utilisateurs.

Les limites du framework front-end en 5 points

1. Des sites qui se ressemblent

Une critique récurrente rencontrée sur nombre de forums spécialisés vise l’aspect visuel similaire qu’ont les sites développés avec un framework front-end. Effectivement, si le développeur ne personnalise pas un minimum l’aspect visuel du site, alors le style par défaut (les couleurs, les angles arrondis, les contours, les ombres, la typographie) sera appliqué. Donc, rien ne ressemble plus à un site Bootstrap avec le style par défaut qu’un autre site Bootstrap avec le style également par défaut.

2. Du code inutilisé qui alourdit les pages

Un framework fournit un lot d’éléments qui ne sont parfois pas utilisés dans un projet web. Or, même si on n’utilise pas certains composants du framework, ils sont tout de même chargés par défaut, notamment leurs styles CSS et également les fichiers JS. On se retrouve avec code lourd et partie inutile. Les effets négatifs sont notamment que les pages web se chargeront moins rapidement, et que le développeur en charge de faire évoluer le projet aura parfois du mal à s’y retrouver. Une bonne pratique veut que le développeur qui démarre le projet tâche de rendre muet les appels vers des composants pas nécessaires et qu’il commente et documente un maximum le code généré.

3. Nécessité de modifier ou ajouter du code

Le framework n’a pas réponse à tous les cas de figures. Et il est quasiment certains que le développeur devra modifier ou créer des segments de code supplémentaires pour se rapprocher du design souhaité. Cependant il y a un ensemble de paramètres faciles à modifier au cours du projet, pour peu que l’on utilise un préprocesseur CSS.

4. Modifier ou adapter le code originel du framework peut être long voire laborieux

Lorsque cela est nécessaire, la modification du code ou l’adaptation de celui-ci peut s’avérer laborieuse, car on tente de défaire une architecture en imposant de nouveaux critères. Et il n’est pas toujours simple et rapide de modifier des éléments dont le code mêle à la fois du CSS et du HTML et parfois même du JS.

5. Risque de conflits avec d’autres bibliothèques ou plugins

Sur un projet mêlant un CMS comme, par exemple WordPress et des plugins comme, par exemple Visual Composer ou Elementor (qui permet d’éditer rapidement le contenu des pages). Donc sur ce type de projet, il risque d’y avoir des conflits notamment en raison de déclarations CSS utilisant les mêmes noms de classes ou utilisant des styles CSS peu compatibles avec le CSS du framework front-end choisi. Dans ce cas il faudra non seulement modifier ou adapter le code du framework mais également apporter des modifications au plugin posant conflit. Dans tous les cas, la solution ne sera pas simple.

Conclusion

Le framework front-end est un outil de plus dans la panoplie du développeur front-end. Il est très pratique pour créer des wireframes, des prototypes ou des maquettes simples dans le cadre de projet web léger. Le temps économisé au début du projet est indéniable. Il faut connaître les limites du framework avant de le choisir pour un projet web plus conséquent. L’idéal est que les designers et wireframers qui imaginent et conçoivent la structure et l’apparence du site web connaissent le framework afin de proposer des wireframes et des maquettes graphiques compatibles. Dans tous les cas, l’utilisation d’un framework pose un cadre de travail standardisé en suivant des règles préétablies. Cela permet de transmettre le projet d’un développeur à un autre en minimisant le temps de réappropriation. Enfin, le framework tire sa pleine puissance en étant utilisé en combinaison avec un préprocesseur CSS (LESS ou SASS). Le code créé sera encore plus modulaire et facilement modifiable.