Divers frameworks de développement apparaissent les uns après les autres, chacun avec ses atouts. Lesquels sont les plus adaptés aux développeurs ? En se basant sur leur popularité sur GitHub, cet article recense les 6 frameworks de développement front-end les plus populaires de 2014 et en propose une explication comparative, en espérant aider les personnes qui en ont besoin à choisir le framework front-end qui leur convient.

Aujourd’hui, divers frameworks de développement apparaissent les uns après les autres, chacun avec ses mérites. Lesquels ont attiré davantage l’attention des développeurs l’année dernière ? Il n’y a pas longtemps, Yunshipei a recensé les 6 frameworks de développement front-end les plus populaires de 2014 en se basant sur leur popularité sur GitHub, et a fourni une explication comparative, en espérant aider les personnes qui en ont besoin à choisir le framework front-end approprié.

1. Bootstrap

Bootstrap est sans aucun doute le leader parmi les frameworks actuels. Il n'est pas seulement populaire, mais sa base d'utilisateurs s'agrandit également chaque jour. Vous pouvez être sûr que cet outil ne vous décevra pas, et vous pouvez également l'utiliser seul pour créer vos propres pages web.

• Créateur : Mark Otto et Jacob Thornton
• Sortie : 2011
• Version actuelle : 3.3.1
• Popularité : 75,000+ étoiles sur GitHub
• "Bootstrap est le framework HTML, CSS et JavaScript le plus populaire pour développer sur le web des projets responsives et mobile-first."
• Concept/principe de base : RWD et mobile-first
• Taille du framework : 145 KB
• Préprocesseur : Less et Sass
• Responsive : Oui
• Modulaire : Oui
• Modèle de démarrage/squelette : Oui
• Jeu d'icônes : Glyphicons
• Autres plugins : Aucun plugin intégré ; plugins tiers disponibles
• Composants uniques : Jumbotron
• Documentation : Bonne
• Personnalisation : Personnalisation de l'interface graphique de base, mais nécessite une modification manuelle car il n'existe pas d'outil de sélection de couleur.
• Prise en charge des navigateurs : Firefox, Chrome, Safari, IE8+ (IE8 nécessite Respond.js)
• Licence : MIT

2. Foundation par ZURB

Comparé à Bootstrap, Foundation se classe deuxième, mais cela ne signifie pas pour autant qu'il soit impopulaire. Avec le solide soutien de ZURB derrière lui, Foundation devient encore plus puissant ! Foundation est utilisé par de grands sites web tels que Facebook, Mozilla, eBay, Yahoo, National Geographic, etc.

• Créateur : ZURB
• Sortie : 2011
• Version actuelle : 5.4.7
• Popularité : 18,000+ étoiles sur GitHub
• « Le framework front-end responsive le plus avancé au monde »
• Concept/principe fondamental : RWD, Mobile First, Sémantique
• Taille du framework : 326 KB
• Préprocesseur : Sass
• Responsive : Oui
• Modulaire : Oui
• Gabarit de démarrage/mise en page : Oui
• Jeu d’icônes : Foundation Icon Fonts
• Autres composants : Oui
• Composants exclusifs : Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
• Documentation : bonne. De nombreuses ressources sont disponibles pour référence.
• Personnalisation : aucune personnalisation de l’interface graphique, mais vous pouvez écrire la vôtre.
• Prise en charge des navigateurs : Chrome, Firefox, Safari, IE9+, iOS, Android, Windows Phone 7+
• Licence : MIT
• Ce qui le différencie : Pour des secteurs tels que le transport d'entreprise, l'éducation et la formation, et le conseil, Foundation est un framework professionnel. Il fournit également de nombreuses ressources pour vous permettre d'apprendre rapidement.

3.Semantic UI

Semantic UI déploie des efforts constants pour rendre le développement web plus sémantique. Les règles de langage naturel rendent le code plus facile à lire et à comprendre.

• Créateur : Jack Lukic
• Sortie : 2013
• Version actuelle : 1.2.0
• Popularité : 12,900+ étoiles sur GitHub
• "Un framework de composants d'interface utilisateur basé sur des principes utiles issus du langage naturel."
• Concept/principe fondamental : Sémantique, ambivalence des balises, responsive
• Taille du framework : 552 KB
• Préprocesseur : Less
• Responsive : Oui
• Modulaire : Oui
• Modèle de démarrage/mise en page : Non
• Jeu d'icônes : Font Awesome
• Autres composants : Non
• Composants uniques : Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape
• Documentation : Très complète. Semantic fournit une documentation à plusieurs niveaux structurels, avec un site web séparé pour les débutants ainsi que d'autres tutoriels de personnalisation, etc.
• Personnalisation : aucune personnalisation de l’interface graphique, mais vous pouvez écrire la vôtre.
• Ce qui le distingue : On peut dire que Semantic est le framework le plus innovant et le plus complet en fonctionnalités parmi ceux abordés aujourd'hui. Son architecture globale et ses règles de nommage ont une logique et une sémantique claires, dépassant les autres frameworks.

4. Pure par Yahoo!

Pure est un framework modulaire léger en CSS pur qui inclut divers composants intégrés et autonomes.

• Créateur : Yahoo
• Sortie : 2013
• Version actuelle : 0.5.0
• Popularité : 9,900+ étoiles sur GitHub
• "Un ensemble de petits modules CSS responsives que vous pouvez utiliser dans chaque projet web."
• Concept/principe de base : SMACSS, minimalisme
• Taille du framework : 18 KB
• Préprocesseur : Aucun
• Responsive：Oui
• Modulaire : Oui
• Gabarit de démarrage/mise en page : Oui
• Jeu d'icônes : Aucun. Font Awesome peut être utilisé comme alternative.
• Autres composants : Aucun
• Composants uniques : Aucun
• Documentation : Bonne
• Personnalisation : Basic GUI Skin Builder
• Prise en charge des navigateurs : dernières versions de Firefox, Chrome, Safari, IE7+, iOS 6.x, 7.x, Android 4.x.
• Licence : Yahoo! Inc. BSD
• Ce qui le distingue : Pure fournit un framework de base épuré pour votre projet. Pour les développeurs qui n'ont pas besoin d'un framework complet et qui n'ont besoin que de composants spécifiques, Pure est un bon choix.

5. UIkit par YOOtheme

UIkit est un ensemble concis de composants faciles à utiliser et à personnaliser. Bien qu'il ne soit pas aussi populaire que ses concurrents, il offre les mêmes fonctionnalités que les frameworks ci-dessus, et la qualité est également très bonne.

• Créateur : YOOtheme
• Sortie : 2013
• Version actuelle : 2.13.1
• Popularité : 3,800+ étoiles sur GitHub
• "Un framework front-end léger et modulaire pour développer des interfaces web rapides et puissantes."
• Concept/principe fondamental : RWD, Mobile First
• Taille du framework : 118 KB
• Préprocesseur : Less, Sass
• Responsive : Oui
• Modulaire : Oui
• Gabarit de démarrage/mise en page : Oui
• Jeu d'icônes : Font Awesome
• Autres composants : Oui
• Composants uniques : Article, Flex, Cover, HTML Editor
• Documentation : Bonne
• Personnalisation : personnalisation avancée de l’interface graphique
• Prise en charge des navigateurs : Chrome, Firefox, Safari, IE9+
• Licence : MIT
• Ce qui le différencie : UIkit est utilisé dans de nombreux thèmes WordPress. Grâce à son éditeur graphique et à l’édition manuelle, il offre un mécanisme de personnalisation flexible et puissant.

6.Amaze UI

Amaze UI est construit autour de la philosophie Mobile First. Comparé aux frameworks étrangers, il accorde plus d'attention à la typographie chinoise et est salué par les ingénieurs front-end comme le framework front-end qui comprend le mieux le chinois. À peine quatre mois après son lancement officiel, il avait déjà obtenu plus de 1,500 étoiles sur GitHub, ce qui montre sa forte dynamique.

• Créateur : Yunshipei
• Sortie : 2014
• Version actuelle : 2.0.0
• Popularité : 1500+ étoiles sur GitHub
• Description : Amaze UI est un framework front-end multi-écran mobile-first avec des composants riches qui vous permettent de créer rapidement des pages multi-écran avec d'excellentes interfaces et une excellente expérience utilisateur, ce qui améliore grandement l'efficacité du développement.
• Concepts/principes de base : Responsive, Web Components
• Taille du framework : CSS 40KB, JS 48KB (compressé avec gzip)
• Préprocesseur : Less
• Responsive : Oui
• Modulaire : Oui
• Modèles de démarrage/mises en page : Oui
• Jeu d'icônes : Font Awesome
• Autres composants : Oui
• Composants uniques : barre de progression de chargement, barre latérale, carrousel d'images, éléments fixes, pagination, panneaux repliables, galerie d'images, etc.
• Documentation : La documentation d’Amaze UI est très complète et adaptée aux développeurs à tous les niveaux. Elle fournit une documentation à plusieurs niveaux structurels, avec une conception d’API raisonnable et facile à apprendre et à utiliser. Les retours de bogues s’appuient sur GitHub, le groupe QQ officiel, les commentaires Duoshuo, etc., ce qui permet aux utilisateurs de signaler les problèmes en temps opportun.
• Personnalisation : Il n’existe actuellement aucune personnalisation via GUI. Pour personnaliser, vous devez télécharger un fichier de configuration de personnalisation. Téléchargez le code source d’Amaze UI et utilisez l’outil de build gulp pour le compiler avec des configurations personnalisées.
• Prise en charge des navigateurs : développé pour les navigateurs modernes, avec une prise en charge limitée d’IE 8.
• Ce qui le distingue : Amaze UI ajoute davantage d’éléments adaptés au marché chinois : une typographie chinoise optimisée, la compatibilité avec les principaux navigateurs locaux en Chine, et des composants Web implémentés selon le modèle Web Components, en divisant les composants courants de développement mobile en différentes parties afin d’améliorer grandement l’efficacité du développement.

Quel type de framework vous convient ?Enfin, voici quelques suggestions pour vous aider à choisir le framework qui vous convient le mieux :

• Le framework est-il assez populaire ?

Plus il est populaire, plus il y a de personnes qui l’utilisent, plus les ressources sont disponibles et plus il y a de façons d’échanger des idées. Plus la probabilité qu’il soit abandonné est faible, plus vous pouvez l’utiliser en toute sérénité.

• Le framework est-il en développement continu ?

Un bon framework a besoin de mises à jour et d’améliorations constantes pour s’adapter aux technologies actuelles, en particulier sur mobile.

• Le framework est-il mature ?

Si un framework n’a pas été testé sur de vrais projets, vous pouvez l’utiliser sans problème pour vous entraîner. Mais si vous devez l’utiliser pour un projet dédié, il est plus sûr de choisir un framework relativement mature.

• Fournit-il une documentation complète ?

Pendant la phase d’apprentissage, une documentation complète peut nous aider à obtenir deux fois plus de résultats avec deux fois moins d’efforts.

• Dans quelle mesure est-il spécialisé ?

Comparé à un framework spécialisé, un framework polyvalent peut simplifier le développement. Dans la plupart des cas, choisir des styles minimaux facilite la personnalisation ; ajouter du nouveau CSS est plus simple, plus facile à gérer et plus efficace que de remplacer des styles existants.

Enfin, si vous n'êtes toujours pas sûr que ce framework vous convienne, vous pouvez prendre un ou deux composants de différents projets et les intégrer à votre propre projet. Une telle combinaison devrait également être utile.