Suite à une discussion récente ici-même, j'ai décidé de tenter le coup et de vous proposer un article initialement publié sur mon site. J'accueille avec grand plaisir vos remarques afin d'améliorer ce journal et les suivants.
Dans le domaine des frameworks front-end, il n'y a pas que Bootstrap. Il y a aussi Semantic UI, qui, comme son nom l'indique, cherche à se différencier par sa syntaxe moins programmatique, plus naturelle. Malgré une version 2.1 très réussie, il reste toutefois quelques écueils.
Parmi les frameworks front-end, on connait surtout Bootstrap (notamment parce que ce sont les gars de chez twitter/github qui l'ont fait, le framework bénéficie donc d'une bonne image de marque). Il y en a bien d'autres, et j'ai décidé de jeter mon dévolu sur Semantic UI pour une raison toute personnelle: l'esthétique des contrôle me plaît mieux qu'un autre grand framework: Foundation.
Le parti pris par Semantic UI m'a quelque destabilisé. En effet, les noms des classes CSS ont une cohérence linguistique. Par exemple, une image floatée à droite se verra attribuer les classes ui floated right image.
Quand j'ai commencé à développer avec Bootstrap, ce qui m'a le plus contrarié est de devoir garder la documentation à portée de main: impossible de me rappeler de toutes les possibilités et leur syntaxe. Finalement, j'ai accepté que c'était indispensable. J'ai eu le même cas en développant en back-end avec CakePHP puis Laravel: la documentation doit toujours être à portée de main pour pouvoir s'y référer rapidement. C'est chiant, mais on s'y fait.
C'est exactement la même chose avec Semantic UI: bien que la syntaxe ait une cohérence linguistique, il faut tout de même utiliser constamment la documentation pour se rappeler de l'ordre des classes (qui semble avoir une importance, je n'ai pas vérifié pour confirmer) ou, surtout, la structure HTML des contrôles.
Car c'est à mon avis là que réside le principal problème de Semantic UI: le markup. Dans la documentation, ils ont la fâcheuse tendance, comme beaucoup d'outils modernes, à détourner certaines balises HTML de leur utilité initiale. C'est notamment le cas de la balise <i></i>. D'après la documentation du W3C:
The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.
La documentation fournit par ailleurs les exemples suivants qui montrent bien l'utilisation attendue de la balise:
<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
<p>The term <i>prose content</i> is defined above.</p>
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>
Semantic UI (et d'autres, Bootstrap et Font-awesome me venant à l'esprit) réutilisent cette balise pour insérer des icônes.
C'est d'autant plus dommageable pour Semantic UI puisque contrairement à Bootstrap ou Font Awesome, il n'est pas possible d'utiliser une balise <span></span> à la place. Utiliser la balise <i></i> dans la documentation des frameworks peut être considéré pour ainsi dire comme un abus de langage. Surtout que la balise <span></span> n'a aucune signification particulière dans le markup, il est donc plus cohérent de l'utiliser selon moi. De même, la documentation met en avant des listes structurées avec des balises <div></div> au lieu de balises <ul></ul> ou <ol></ol>.
On m'objectera bien sûr, avec raison, qu'on peut toujours modifier le code source pour résoudre le problème des icônes.
Mais Semantic UI est truffé de qualités qui minimisent ce défaut syntaxique. Je ne suis pas encore allé jusqu'à fouiller les sources pour découvrir avec précision toutes les subtilités du framework qui n'apparaissent pas dans la documentation, mais mon tour d'horizon m'a déjà permis de voir ce qu'il était possible de faire, et surtout de comparer avec Bootstrap.
Je l'ai dis plus haut, ce que j'apprécie avec Semantic UI, c'est l'esthétique des contrôles. Aujourd'hui, il faut reconnaître que Bootstrap s'est pris un petit coup de vieux. Certes, on est dans l'attente d'une nouvelle version majeure (la 4.0), mais ce passage ne s'accompagnera pas de réelles nouveautés sur le plan esthétique (du moins, pas avec le thème de base). Je ne vais pas me lancer dans un comparatif des deux frameworks, mais je vais évoquer quelques différences qui m'ont semblé importantes ou intéressantes.
Je considère que l'utilité d'un framework (qu'il soit front-end ou back-end) est d'apporter un maximum de choses, et réduire au minimum le travail du développeur. Par conséquent, j'apprécie par exemple que Semantic UI fournisse un jeu de couleurs largement étendu par rapport à celui de Bootstrap. Avec ce dernier, il faut se contenter de cinq couleurs de base, alors que Semantic UI fourni une palette de treize couleurs. C'est probablement peu de chose, mais pour un développeur comme moi, qui préfère le code back-end que front-end, et qui n'a pas l'âme d'un artiste, c'est plutôt intéressant.
Sur un tout autre sujet, j'apprécie la possibilité qu'offre Semantic UI d'avoir des menus déroulants sur plusieurs niveaux, ou encore la quantité de composants fournis (notamment le dropdown, les tooltips qui peuvent contenir du code HTML, les étapes d'assistant, les drapeaux, etc.). Par ailleurs, certains choix techniques (par exemple, les sous-menus s'ouvrent sans clic sur l'élément parent) offrent une sensation de fluidité, de légèreté et de réactivité bienvenues.
Je relativise cependant certaines fonctionnalités présentes dans le framework. Par exemple, l'intégration des drapeaux de famfamfam est une bonne chose, parce que ces drapeaux changent extrêmement rarement. Par contre, l'intégration de Font Awesome est une moins bonne chose parce qu'actuellement, c'est la version 4.3 qui est intégrée, alors que la dernière en date est la 4.5. Il faut donc soit se contenter des icônes et fonctionnalités de la 4.3, soit charger à part la 4.5 et se passer de l'intégration avec Semantic UI.
Ces petits défauts ne sont pas insurmontables, mais ils me laissent un petit goût d'inachevé. Encore une fois, il est tout à fait possible de corriger soi-même ces problèmes, ou peut être qu'ils le seront dans une prochaine version.
Quoiqu'il en soit, je vais délaisser Bootstrap pour Semantic UI pour certains de mes nouveaux projets, parce que ce framework mérite toute notre attention. Il n'a peut être pas l'aura de Bootstrap ni même de Foundation, mais il a des qualités techniques indéniables qui, en sa version actuelle (2.1), laissent présager le meilleur pour l'avenir.
# avantages/inconvénients
Posté par stopspam . Évalué à 8.
Je suis aussi de cet avis mais au final le design, ça va, ça vient. Celui de semantic-ui est du flat design qu'on retrouve dans un des nombreux thèmes bootstrap. J'attends avec impatience la v4…
Je me suis reconnu dans ces propos. J'ai beau rajouter tous les snippets qui vont bien (dans sublime ou visual studio), j'ai toujours besoin de la doc pour un truc à la con.
Ce qu'il manque vraiment à Bootstrap se sont ces 2 plugins juste indispensables : select2 et datetimepicker.
Beuk ! Rien de plus détestable qu'un menu au survol. J'ai un exemple tout simple en tête : sur developpez dot com je balance des noms d'oiseaux à chaque fois que ce put*** de menu s'ouvre quand je lis une actu.
Sur le fond, j'ai un avis contraire à toi : j'ai essayé plusieurs frameworks front-end prometteurs (Pure, Material UI, Materialize) et j'en suis toujours resté à Bootstrap car il me manquait toujours un petit qqch…
# incompatible mobiles ?!
Posté par LeBouquetin (site web personnel, Mastodon) . Évalué à 6.
Je viens de visiter le site de semantic ui avec mon mobile, ça saccade au scrolling, ça "déscrolle" tout seul, bref je ferai jamais un site/une app avec. Dommage, c'est vrai que ça a l'air pas mal.
# Version de bootstrap utilisée pour comparer ?
Posté par grugru . Évalué à 4. Dernière modification le 01 février 2016 à 10:08.
Les défauts et les avantages que tu mets en avant entre Semantic UI et Bootstrap me laisse à penser que tu n'as pas utiliser Bootstrap depuis un moment…
BS n'utilise plus la balise depuis un moment pour les icones. Les dropdown, les tooltips… existent sous BS.
La partie de Semantic UI pour gérer le coté responsive me semble très légère, à voir à l'usage, mais cela ne laisse pas beaucoup de place à la personnalisation de prime abords.
Personnellement, j’apprécie le coté sémantique des couleurs de BS et je l'utilise uniquement pour des back-ends justement : trop de couleurs perturbent l'utilisateur plus qu'autre chose et j'imagine mal avoir treize couleurs différentes sur une page de back-end, ça fait même un peur de l'imaginer : l'utilisateur lambda serait complètement perdu.
Sinon les animations sont sympas, mais doit pas falloir remplir la page avec ça, ça doit faire ramer rapidement.
[^] # Re: Version de bootstrap utilisée pour comparer ?
Posté par Richard Dern . Évalué à 1.
C'est exact, effectivement ça a été changé dans la doc, mais comme c'est une partie de la doc que je ne consulte jamais, ça explique pourquoi je t'ai donné l'impression de ne pas avoir utilisé BS depuis longtemps alors que je l'utilise tous les jours :)
Je ne parle pas des menus mais des
<select></select>à peu près utilisables.Semantic UI rend plus simple l'utilisation de tooltips avec du HTML dedans. Avec BS, faut passer par JS ou mettre du HTML dans un attribut
data-, ce qui n'est pas très propre.Évidemment, mais au moins je peux plus facilement me composer un scheme (enfin, plus varié), étant donné que je suis bien incapable de trouver des couleurs qui vont ensemble par moi-même.
[^] # Re: Version de bootstrap utilisée pour comparer ?
Posté par grugru . Évalué à 1. Dernière modification le 01 février 2016 à 13:42.
Ben faudrait savoir, tu dis plus haut que BS est inutilisable sans avoir la doc sous les yeux…
Euh… Exemple de code de Semantic UI pour l'utilisation des tooltips dans le HTML :
Moi je vois le data-… que tu reproches à BS (et je fais pas de commentaire sur l’icône qui est dans une balise i)
Et pour le "pas très propre", je vois pas comment tu verrais plus propre que de mettre en attribut le tooltip correspondant à un bouton ?
C'est à dire ? restreindre à groupe de 5 couleurs piochées parmi les 13 ? BS ne s'est pas limité à 4 couleurs plus le blanc pour rien : c'est ce qui est préconisé pour l'ergonomie des utilisateurs, et le choix des couleurs aussi, en relation avec l’œil humain.
[^] # Re: Version de bootstrap utilisée pour comparer ?
Posté par Richard Dern . Évalué à 1.
… C'est pour ça que je dis:
Pour les tooltips avec du markup propre, voir ici.
Enfin pour les couleurs, je dis juste que j'apprécie le choix que m'offre SUI, c'est tout. C'est-à-dire que si, par exemple, je veux une couleur particulière pour une icône spécifique, ça m'est utile que SUI me propose une palette de 13 couleur précises étant donné que je ne serai pas moi-même capable de trouver une couleur cohérente par rapport au reste.
[^] # Re: Version de bootstrap utilisée pour comparer ?
Posté par grugru . Évalué à 0.
Oui, je vois que ta notion du propre inclue du javascript apparemment, alors faut savoir : pas d'attribut html et pas de js, on a pas avancé sur les défauts de BS quoi…
Et je vois toujours des icônes dans des balises i aussi.
Le choix de SUI de massacrer l'ergonomie, intégré par défaut ? J’appelle pas ça une qualité. Je préfère largement faire une bricole dans BS pour des cas exceptionnels.
[^] # Re: Version de bootstrap utilisée pour comparer ?
Posté par Richard Dern . Évalué à -2.
Tu m'as mal compris, mais apparemment tu cherche la petite bête alors allons-y.
Oui, je peux avoir du HTML dans un tooltip avec BS à la condition que:
data-: pas propreMassacrer l'ergonomie ? Parce qu'ils me proposent des couleurs que je suis libre d'adopter ou non ?
Tu ne crois pas que tu exagère ?
À ce compte là, Google et son material design, ça doit être une catastrophe pour toi.
[^] # Re: Version de bootstrap utilisée pour comparer ?
Posté par grugru . Évalué à 1. Dernière modification le 01 février 2016 à 16:31.
Les proposer par défaut, c'est inciter à les utiliser pour moi. Et utiliser du jaune, du orange et du vert clair (par exemple), dans la même interface, il se trouve en effet que c'est loin d'être agréable comme expérience utilisateur.
c'est comme les outils empêchant les injections dans les requêtes SQL, intégrés par défaut dans la plupart des libs pour éviter que ceux qui ne s'y connaisse pas fassent des bêtises par méconnaissance.
Peut être que tu aimes ça, mais ça n'en fait pas un avantage par rapport à BS pour moi, plutôt le contraire.
Pour le material design de Google, je t'invite à te renseigner, Google prend très au sérieux l’expérience utilisateur.
Je ne cherche pas la petite bête, je constate juste que la plupart de tes arguments ne sont pas bons.
Tu mets en avant des avantages qui n'en sont pas, ou qui sont faux :
- Des tooltips qui peuvent afficher des montagnes d'informations juste aux survols, déjà ce n'est plus vraiment la fonction d'une tooltip, et ce n'est pas non plus très ergonomique : sans doute pour cela que BS ne l’implémente pas.
- Une intégration mobile qui laisse à désirer
- Des balises i
- Les couleurs
- La documentation, j'utilise pas Bootstrap tous les jours, et j'ai besoin de la documentation uniquement pour les trucs très spécifique personnellement
[^] # Re: Version de bootstrap utilisée pour comparer ?
Posté par Richard Dern . Évalué à 1.
Oui, mais si tu reproche à SUI de proposer 13 couleurs, le MD de Google doit te rendre fou.
Oui, je me suis renseigné avant de parler.
Est-ce qu'une seule fois dans mon article j'ai prétendu avoir fais une analyse objective de SUI ?
Tant mieux pour toi. En ce qui me concerne, j'avoue, je ne suis pas capable de mémoriser les docs de tout ce que j'utilise pour développer.
# Merci pour l'aperçu
Posté par flan (site web personnel) . Évalué à 2. Dernière modification le 03 février 2016 à 15:19.
N'étant pas dév. web (et pas spécialement intéressé par le domaine, d'ailleurs), mais étant amené à concevoir régulièrement des interfaces web, je suis parti sur du Bootstrap pour avoir quelque chose de correct (même si ce n'est pas original).
J'avoue que la différence entre Semantic UI et Boostrap ne me semble pas suffisante pour justifier un nouvel investissement de ma part (d'autant que le gros avantage de Boostrap est d'avoir plein de plugins). Mais ça me permet au moins de savoir qu'il existe autre chose et de garder un œil sur ce qui se fait ailleurs.
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.