Framework ?
Le terme framework (littéralement "cadre de travail") est défini par wikipedia comme étant un ensemble cohérent de composants logiciels structurels, qui sert à créer les fondations ainsi que les grandes lignes de tout ou d’une partie d’un logiciel.
On pourrait le définir plus simplement comme une boite à outils, pré-codés pour faire gagner du temps aux développeurs, sur base de l’expérience de ceux-ci et la logique de travail guidée par l’industrie : rapidité d’exécution et conformité à des standards de qualité.
Dans le cas des frameworks CSS, il s’agit, plutôt que de créer son code css pour chaque projet, de mettre à disposition des développeurs un ensemble de fichiers css (et javascript) permettant de répondre aux besoins habituels d’un site :
– la remise à zéro et uniformisation de css (des resetters)
– l’usage des typos (h1, h2, p, quote, etc.)
Рla structuration de la page (le syst̬me de grille, header, footer, etc.)
– l’affichage spécifique des menus
– les formulaires et leurs boutons
– les médias queries pour l’adaptation au supports tablette et smartphone
Рquelques autres gadgets (galeries, sliders, modal, etc.) m̬lant html, css et javascript.
Un framework est donc un ensemble de ces codes css utiles compilés dans un ou plusieurs fichiers, avec une taxinomie cohérente (des noms évocateurs et courts), pensés pour leur interaction logique, et accompagnés d’une documentation lisible et agréable. On obtient alors un outil rapide pour démarrer un site. Les frameworks plus ambitieux contiennent aussi des pages html de démo, et des codes javascript prêt à l’usage.
Le projet se présente généralement sous la forme d’un site contenant la présentation et documentation du frameworks, où les graphistes et développeurs peuvent télécharger une version prête à l’emploi (et souvent des fichier source), qui permet de déployer rapidement un site web.
La plupart des développeurs avec un peu de métier constituent intuitivement ce genre d’outil, mais le début des années 10 a marqué un tournant avec l’arrivée sur le web de plusieurs "frameworks css" structurés. Blueprint, 960 grid system, ont été les premiers développés et mis à disposition via des sites web dédiés. Puis Pure, Bootstrap, Mdb et bien d’autres ont poussé la logique du réemploi de code et ont changé la manière de travailler de milliers de graphistes et développeurs.
Construire à l’envers : baser le html sur la css
Si le développement standard commençait par une structure html sur laquelle on applique des déclarations css, les frameworks font travailler les codeurs de manière opposée.
On charge le framework, et on développe le html en fonction des styles codés dans la feuille de style en s’aidant de la documentation.
Ceci veut dire que l’on associe de classes à des tags html. Cette approche nécessite, outre une connaissance générale du code css, une connaissance des styles du framework lui-même.
En Bootstrap, un bouton vert s’écrit comme ceci :
<button type="button" class="btn btn-success">Success</button>Ceci produit un bouton vert qui s’assombrit lorsqu’on passe la souris par dessus. La couleur, taille et comportement ont été précodés dans la feuille de style. Ill faut donc apprendre les noms des classes et les endroits où ils peuvent être employés. Selon la complexité du framework, on aura une "courbe d’apprentissage" plus douce ou plus rude.
Les avantages des frameworks
Les frameworks sont conçus dans une logique open-source, produits par des graphistes-développeurs pour des graphistes-développeurs. On peut donc faire confiance au fait qu’ils sont utiles. Ils permettent un prototypage rapide de maquettes web, et même un développement complet très rapide, une fois que l’on maitrise l’usage des classes précodées.
Ils permettent de rentabiliser l’effort de l’apprentissage sur un grand nombre de projets différents, de la page unique au site complet.
Ils permettent de partager des bouts de code, des templates html, des conseils et didacticiels entre confrères.
Ils permettent de mettre une compétence en plus dans son CV, identifiable par les professionnels du secteur.
Ils permettent en outre de maintenir la cohérence d’un site facilement, puisque la logique des tailles, des couleurs, des grilles est précodée et réemployée, et que le projet du framework évolue en fonction des grandes tendances, porté par des professionnels en équipe.
Les désavantages des frameworks
Tout n’est pas rose évidemment. Il y a un revers à la médaille. On peut critiquer les frameworks CSS pour plusieurs aspects.
Il faut d’abord souligner que les frameworks ne répondent pas à tous les besoins graphiques d’un site. Il faut donc pouvoir personnaliser le code, et dans ce cas, écrire ses propres css qui vont interagir avec un code massif ; ce qui peut du coup paraître opaque et difficile à manÅ“uvrer.
La lourdeur "physique" des frameworks est parfois invoquée pour les critiquer. Certains sont très légers (quelques dizaines de K) mais d’autres peuvent peser un méga et plus, alors que l’on n’en utilisera qu’une partie de ses capacités (pas de formulaire par exemple, ou une navigation personnalisée alors que des centaines de lignes du framework sont censées s’occuper de ça).
Les frameworks essaient de parer à la critique en se faisant personnalisables au téléchargement ou se centrant sur quelques choix (le système de grille et les boutons par exemple) mais on a parfois un bazooka pour tuer des mouches, c’est vrai.
Mais la critique la plus forte concerne la grande homogénéité que les principaux frameworks CSS produisent sur le développement web. Bootstrap, spécifiquement, a été sur-utilisé ces dernières années, jusqu’à énerver certains développeurs.
Enfin, un framework est un outil permettant de coder plus efficacement un site web. Or, un site web est un mélange de html, css et javascript, des langages disponibles et assez facilement appréhendables. Apprendre à coder à travers un framework spécifique qui sera démodé dans un an peut être un risque. Comment être sà »r de ne pas perdre son temps, ou de perdre l’habitude d’écrire par soi-même du code et d’être perdu sans cet outil ?
Offre pléthorique
Les frameworks sont des outils produits par une communauté très vivante et en concurrence constante, ce qui est un peu épuisant à suivre. Il y a des effets de modes dans ce petit milieu et les killer apps se succèdent à grande vitesse. Ceci a pour conséquence une offre énorme dans ce domaine.
Bootstrap, développé par l’équipe de Twitter est le plus connu, mais on trouve aussi PureCSS, développé par l’équipe de Yahoo, Foundation, Miligram, uikit et des dizaines d’autres dont la réputation se fait ou se défait au gré des saisons.
Plutôt que de citer une liste destinée à se ringuardifier dans les mois qui arrivent, il suffit de faire une recherche sur votre moteur préféré avec les termes "framework css" et de faire son marché.
Alors, utiliser un framework ou pas ?
L’utilisation d’un framework est une expérience intéressante dans le parcours d’un codeur, et comme évoqué, c’est une ligne intéressante à ajouter a son CV. Il est cependant utile de ne pas perdre de vue le code html et css fabriqué à la main, base du travail du développeur front-end. Il est possible de combiner des frameworks légers pour produire son propre outil, et parfois il est même plus aisé de produire, sur base de sa propre expérience, un ensemble de classes utiles de site en site, qui devient par la force des choses... votre framework.
Voir en complément l’article de Tétue sur son site, qui plaide pour la fabrication de son propre framework.
Et un complément encore, le fameux motherfucking website d’un certain "thebarrytone". Jetez aussi un oeil à un autre développeur énervé sur cette page.