Un framework, c’est quoi ?
Un framework est un ensemble d'outils et de composants logiciels organisés conformément à un plan d'architecture et des patterns, l'ensemble formant ou promouvant un « squelette » de programme, un canevas. Il est souvent fourni sous la forme d'une bibliothèque logicielle et accompagné du plan de l'architecture cible du framework. (Source : Wikipedia)
Un framework est conçu afin de venir en aide aux programmeurs dans leur travail. Son organisation vise à maximiser la productivité de ceux-ci qui vont l'utiliser en misant sur une diminution des coûts de construction et de maintenance du programme. Il existe des frameworks Js, tels que Vue JS ou encore REACT JS, qui sont des librairies de code relativement complexes nécessaires lors de la création d’un site web.
Les framework Bootstrap et Foundation sont quant à eux des librairies HTML, CSS et JavaScript de styles prédéfinis pour les composants communs d'un site web : grille, typographie, boutons, systèmes de navigation, systèmes de présentation du contenu (accordéon, slider, tabs...) ou encore animations. Cette base permet aux développeurs front-end de gagner en efficacité dans la mise en page de sites web au design personnalisés.
Il existe beaucoup de frameworks disponibles (Semantic UI, Skeleton, KNACSS, BluCSS,...). Dans cet article nous nous pencherons sur Bootstrap, qui est probablement le framework HTML, CSS et JavaScript le plus connu, et Foundation que nous utilisons chez WebstanZ.
Bootstrap
Bootstrap est un framework développé par l'équipe du réseau social Twitter. Il est proposé en open source (sous licence MIT).
Avantages
- Populaire : il jouit d'une grande communauté, ce qui engendre beaucoup de collaborations et/ou de contributions;
- Grande compatibilité avec la plupart des navigateurs (Chrome, Firefox, Internet Explorer, Safari, Opera…) grâce à Jquery;
- Compatible avec IOS et Android;
- Utilisable pour la création d'applications grâce aux variables SASS, à des plugins et à son système de grille;
- Possibilité d’installer des templates et des thèmes gratuitement.
Inconvénients
- Si le design s’éloigne un tant soit peu des éléments Bootstrap, les modification de code sont nombreuses et fastidieuses.
- Nécessite plus de temps de développement pour des sites avec un design personnalisé.
Foundation
Foundation est un projet développé par ZURB en octobre 2011. Le framework est distribué de façon Open source sous la licence MIT.
Avantages
- Légèreté de la plateforme. C’est un framework modulable qui permet de n’installer que les modules dont on a besoin;
- Développé pour le mobile first;
- Flexibilité de la mise en page en grille;
- Ses composants sont responsive;
- Mise à disposition d'une librairie pour la vérification des formulaires;
- Menu interactif très développé en termes de fonctionnalités qui peut facilement être stylisé à l’aide de CSS.
Inconvénients
- Pas compatible avec les versions anciennes d’Internet Explorer;
- Difficile à prendre en main car il dispose de plus d’options de personnalisation.
Bootstrap vs. Foundation
Au premier abord, Bootstrap et Foundation semblent similaires sur de nombreux points. Leur usage est pourtant bien différent :
- Bootstrap est un outil qui permet de se concentrer sur le développement de fonctionnalités, sans forcément se préoccuper du style visuel de l’interface. Ou du moins, la personnalisation est plus complexe. Il permet de fournir un style, certes très répandu, mais qui sera suffisant pour obtenir un produit fini sans perdre de temps sur le style.
- Foundation quant à lui, a été développé comme un outil de prototypage. Il instaure des bases sur lesquelles travailler, ce qui permet une personnalisation plus facile et rapide.
Pourquoi nous avons choisi Foundation
Chez Webstanz, nous créons des sites web “from scratch”. Chaque interface possède son design unique. De ce fait, il y a peu d’éléments récupérables d’un thème prédéfini comme on pourrait le faire avec Bootstrap. C’est pourquoi nous avons opté pour le thème Foundation qui est plus flexible et plus simple à utiliser pour les sites personnalisés que nous développons.
