Dummy

et ses petits bras musclés

Framework vs UI Toolkit


Survie en milieu hostile

Il existe actuellement beaucoup de “frameworks” CSS, pourquoi ne pas contribuer à un projet existant ?
Réinventer la roue uniquement pour se démarquer du voisin est absurde. Il faut cependant rester ouvert, aucune solution n’est universelle : traverser la manche à vélo n’est pas facile.

Pourquoi un énième framework

Il est compliqué de parler de framework CSS sans aborder Bootstrap, Foundation... Pour bien comprendre le besoins auxquels répond le dummy, il faut d’abord différencier un framework d’un UI toolkit. Le Material Design Lite et Primer en sont des exemples assumés. Github le précise pertinemment dans Primer :

“The CSS toolkit and guidelines that power GitHub

Comprenez par là :

Pour vous aider à assembler un site à la GitHub, voici nos outils.

Comme nous allons l’aborder tout à l’heure, l’objectif du dummy est de prévoir un contexte sain pour fabriquer des interfaces. Si vous voulez des composants préfabriqués pour assembler rapidement une interface, n’utilisez pas le dummy. Pensez à Bootstrap et Foundation comme du prêt-à-porter et le dummy, Inuitcss ou KNACSS comme des mannequins de couture. Les deux apportent des solutions différentes à des besoins différents. Voyons pourquoi nous avons choisi la deuxième approche.

Père Dummy, raconte nous une histoire

Il était une fois une petite équipe de développeurs qui utilisaient la même base de travail pour chaque projet. Les années ont passées, cette base a changé mais une chose est restée constante, nous n’avons fait que simplifier. Les choses “toutes faites”, ont été retirées au profit de concepts plus généraux. C’est donc une demi douzaine d’année et une centaine d’utilisations qui nous ont amenées à ce résultat. Comme Bootstrap fut créé pour aider les développeurs de Twitter à monter rapidement des interfaces orientées back-end, le dummy est là pour nous aider à construire des interfaces sur mesures quelles que soient les contraintes du projet. La fabrication de cette base saine et légère est inhérente aux contraintes de nos projets toujours uniques. L’objectif est d’atteindre un workflow le plus lissé, agréable et efficace possible.

Un esprit sain

Rester simple, épuré, rien a jeter

Lorsque je débute la phase de production du code, j’ai envi d’écrire du CSS, du HTML et du Javascript, du code pertinent, qui affecte directement mon interface. Je ne veux surtout pas que mes premières actions soient de copier-coller des fichiers et encore moins d’en supprimer. Ce qui est aberrant, et m’exaspère au plus au point, c’est d’ouvrir mon éditeur pour supprimer des choses. Le plaisir, le but de mon travail et accessoirement la raison de mon salaire, c’est de créer, d’ajouter de l’intelligence pas de connaitre trois raccourcis claviers.

Une structure, pas de maquillage

Pour obtenir cette structure simple, sans superflu, nous ne prenons aucune décision impliquant des choix graphiques. Les partis pris graphiques doivent résulter d’une réflexion de conception et de design propre au projet. Il n’est pas pertinent d’imposer aux graphistes des contraintes liées au framework utilisé.

“You are now working in spite of — rather than because of — a CSS framework.” – Harry Roberts

Comme le contenu doit primer sur la décoration, le design (au sens large) doit primer sur les outils. Les contraintes techniques dues aux languages du web sont suffisamment présentes, ce n’est pas à nous d’en ajouter. Un framework doit nous aider, pas le contraire. Hors cas particuliers, toute règle qui pourrait être supprimée, ou modifiée pour des raisons graphiques ou ergonomiques n’a pas de raison d’être dans le dummy.

Un reset dans un cocon douillet

Une fois ce regime minceur terminé, il reste un reset nourri aux hormones. Le but est de fournir un cadre et des bonnes pratiques, à vous d’y ajouter vos composants. L’avantage d’une telle approche est de rendre le dummy facilement compatible avec les composants indépendants de bibliothèques externes tels Bootstrap, Material Design Lite… Son empreinte étant très légère, les inclure ne sera que rarement la cause d’un conflit. Comme nous le verrons un peu plus bas sa force vient de ce qui est autour.

La vie c’est avant tout des rencontres

Arrivant à une maturité justifiant une présentation publique, et peu après une première release aboutie, nous avons découvert ITCSS (The Inverted Triangle CSS) à travers la présentation faite par son auteur Harry Roberts. Les préceptes énoncés par cette méthode firent écho à nos méthodes de travail et à ce que nous voulions insuffler dans le dummy. Ils nous ont permis d’expliciter des règles et bonnes pratiques ancrées profondément dans l’âme du dummy. Ce système est conçu pour favoriser un code qui supportera l’extension, limitera les règles redondantes et facilitera le travail d’équipe tout en gardant la dette technique à l’œil.

Dans un corps sain

Sass & Coffee

Malgré sa légèreté, le dummy contient plusieurs astuces pour nous simplifier la vie. Pour faciliter l’utilisation de l’unité relative em pour définir les tailles de police, nous faisons correspondre `1em` avec `10px`. Pour obtenir une police de `18px` sur la plupart des navigateurs nous indiquerons donc `1.8em`. Une collection de variables extensibles est bien sûr présente, elle servira à gérer les dimensions du site, les couleurs ainsi que la typographie. Un système de gestion de la largeur maximum du site est aussi inclus, il va aussi s’occuper des marges intérieures sur les affichages plus petits. Côté javascript, quelques classes CoffeeScript sont disponibles. Pour veiller à ne pas polluer de fonctions inutiles le fichier servi à l’utilisateur, un script principal se chargera d’importer uniquement les classes nécessaires. Nos fichiers sont organisés sous formes de modules, cimentés avec Browserify.

Ses petits bras musclés

Il ne faut pas se fier à son apparente légèreté, son plus grand atout se trouve dans l’automatisation qu’il propose. Comme je le disais plus haut, nous vendons de l’intelligence, c’est pourquoi toutes les petites tâches rébarbatives du développement front-end ne doivent pas nous préoccuper. Le framework est donc livré avec une flopée de tâches grunt opérationnelles dès l’installation.

Une fois le dummy mis en place, grunt se chargera de toute la magie. Du serveur à la compilation de vos sources en passant par le rechargement dynamique et la synchronisation des navigateurs, tout est prêt : browser-sync, sass, Browserify, Autoprefixer avec PostCSS, Scss-lint, Coffee-lint, Uglify et CSSmin.

L‘envers du décor : Représentation simplifiée de l’agencement des engrenages du dummy.

Comme Gregory Copin vous l’a présenté il y a peu dans Diviser pour mieux grunter, la structure de nos tâches grunt est simple et très facile d’accès. Des connaissances très limitées voir inexistantes de grunt suffisent pour ajuster ou ajouter des tâches.

Une complexité bien emballée

Avec tous ces outils intégrés, deux commandes vous suffiront à commencer un nouveau projet dans les meilleurs conditions.

# Dans le terminal qui vous convient le mieux (MAC / LINUX)
# Mise en place 
curl -L https://github.com/Dummy-team/dummy/archive/master.tar.gz | tar zx && cd ./dummy-master/grunt && npm install && grunt build
# Utilisation lors du développement
# Une fois dans le dossier grunt
grunt

Vers l’infini et l’au-delà

Comme tous les outils respectables, le dummy est en constante évolution et se remet sans cesse en question. Voici un aperçu de la direction que le dummy va prendre à court et moyen terme.
Les principes de ITCSS sont en cours d’intégration et devraient être insérés dans la version stable sous peu. Un article dédié à cette méthode est en gestation. Le système de grille a disparu, et il est probable qu’il ne revienne jamais. Nous réfléchissons également fortement à l’abandon du CoffeeScript au profit de l’ECMAS 2015 grâce à l’utilisation de Babel.

La version courte

tl;dr

Le dummy en six points:

  • Le dummy viens se positionner comme un framework au sens strict, ce n’est pas un UI toolkit à la Bootstrap.
  • Vous n’y trouverez pas de composants tout fait, le but est de stocker les composants indépendamment et de les importer au besoin.
  • C’est avant tout un cadre de travail qui pousse à respecter des règles et des bonnes pratiques.
  • La prochaine étape est d’appliquer les principes de ITCSS dans sa structure.
  • Toute sa force vient des taches automatisées simples et puissantes qu’il embarque avec lui.
  • Son objectif est d’être une base solide pour fabriquer des interfaces sur mesure.

Des fils de discussion sont dédiés au dummy et à ses évolutions sur GitHub et Gitter. Toutes les questions, suggestions ou aides sont les bienvenues.