tag:linuxfr.org,2005:/tags/semantic/publicLinuxFr.org : les contenus étiquetés avec « semantic »2016-02-03T15:19:03+01:00/favicon.pngtag:linuxfr.org,2005:Diary/363432016-01-31T17:34:57+01:002016-01-31T17:34:57+01:00Test du framework front-end Semantic UILicence CC By‑SA http://creativecommons.org/licenses/by-sa/4.0/deed.fr<p><em>Suite à une discussion récente <a href="//linuxfr.org/forums/general-hors-sujets/posts/les-geeks-et-les-reseaux-sociaux">ici-même</a>, j'ai décidé de tenter le coup et de vous proposer un article initialement <a href="https://www.athaliasoft.com/test-du-framework-front-end-semantic-ui">publié sur mon site</a>. J'accueille avec grand plaisir vos remarques afin d'améliorer ce journal et les suivants.</em></p>
<blockquote>
<p>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.</p>
</blockquote>
<p>Parmi les frameworks front-end, on connait surtout <a href="http://getbootstrap.com/">Bootstrap</a> (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 <a href="https://usablica.github.io/front-end-frameworks/compare.html">bien d'autres</a>, et j'ai décidé de jeter mon dévolu sur <a href="http://semantic-ui.com/">Semantic UI</a> pour une raison toute personnelle: l'esthétique des contrôle me plaît mieux qu'un autre grand framework: <a href="http://foundation.zurb.com/">Foundation</a>.</p>
<p><img src="//img.linuxfr.org/img/68747470733a2f2f7777772e617468616c6961736f66742e636f6d2f696d616765732f706f73742f64376266386438376539616536366632386564363139376238666563653934662f73656d616e7469632d75692d627574746f6e732e6a706567/semantic-ui-buttons.jpeg" alt="Semantic UI" title="Source : https://www.athaliasoft.com/images/post/d7bf8d87e9ae66f28ed6197b8fece94f/semantic-ui-buttons.jpeg"></p>
<p>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 <code>ui floated right image</code>.</p>
<p>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 <a href="http://cakephp.org/">CakePHP</a> puis <a href="https://laravel.com/">Laravel</a>: 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.</p>
<p>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.</p>
<p>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 <code><i></i></code>. D'après <a href="https://www.w3.org/TR/html51/semantics.html#the-i-element">la documentation du W3C</a>:</p>
<blockquote>
<p>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.</p>
</blockquote>
<p>La documentation fournit par ailleurs les exemples suivants qui montrent bien l'utilisation attendue de la balise:</p>
<pre><code><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>
</code></pre>
<p>Semantic UI (et d'autres, Bootstrap et <a href="http://fontawesome.io/">Font-awesome</a> me venant à l'esprit) réutilisent cette balise pour insérer des icônes.</p>
<p>C'est d'autant plus dommageable pour Semantic UI puisque contrairement à Bootstrap ou Font Awesome, <a href="https://github.com/Semantic-Org/Semantic-UI/blob/master/src/definitions/elements/icon.less">il n'est pas possible</a> d'utiliser une balise <code><span></span></code> à la place. Utiliser la balise <code><i></i></code> dans la documentation des frameworks peut être considéré pour ainsi dire comme un abus de langage. Surtout que la balise <code><span></span></code> <a href="https://www.w3.org/TR/html51/semantics.html#the-span-element">n'a aucune signification particulière dans le markup</a>, 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 <code><div></div></code> au lieu de balises <code><ul></ul></code> ou <code><ol></ol></code>. </p>
<p>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.</p>
<p>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.</p>
<p>Je l'ai dis plus haut, ce que j'apprécie avec Semantic UI, c'est <a href="http://semantic-ui.com/examples/theming.html">l'esthétique des contrôles</a>. Aujourd'hui, il faut reconnaître que Bootstrap <a href="http://getbootstrap.com/examples/theme/">s'est pris un petit coup de vieux</a>. Certes, on est dans l'attente d'<a href="http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/">une nouvelle version majeure</a> (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.</p>
<p>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.</p>
<p>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 <a href="http://semantic-ui.com/modules/dropdown.html">dropdown</a>, <a href="http://semantic-ui.com/modules/popup.html">les tooltips qui peuvent contenir du code HTML</a>, <a href="http://semantic-ui.com/elements/step.html">les étapes d'assistant</a>, <a href="http://semantic-ui.com/elements/flag.html">les drapeaux</a>, 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.</p>
<p>Je relativise cependant certaines fonctionnalités présentes dans le framework. Par exemple, l'intégration des drapeaux de <a href="http://famfamfam.com/lab/icons/flags/">famfamfam</a> 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.</p>
<p>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.</p>
<p>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.</p><div><a href="https://linuxfr.org/users/richarddern/journaux/test-du-framework-front-end-semantic-ui.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/108054/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/richarddern/journaux/test-du-framework-front-end-semantic-ui#comments">ouvrir dans le navigateur</a>
</p>
Richard Dernhttps://linuxfr.org/nodes/108054/comments.atom