Quelques questions à notre développeur front-end Drupal en chef - Son métier, Drupal 8, ses outils...
Parce que ce sont nos développeurs qui parlent le mieux de Drupal, que nous avons décidé cette semaine de poser quelques questions à Rouaida, notre thèmeuse Drupal en chef… Sur son métier, Drupal 8 et Twig, sur les frameworks HTML/CSS et sur l’organisation du contrôle qualité front-end… c’est parti !
Hello Rouaida, présente-toi.
Je suis développeuse sénior PHP, spécialiste front-end du CMS Open Source Drupal depuis 8 ans au sein de l’agence Drupal bluedrop.fr | ebizproduction.
Quelle est ta formation et ton expérience?
Après l’obtention de mon master en informatique de gestion, j’ai tout de suite eu un intérêt particulier pour le développement web. Il y a quelques années, j’ai commencé à travailler en tant que développeuse back-end sur Drupal 6 et ensuite sur Drupal 7 en tant que développeuse front-end. Basculer du back-end au front-end n’a pas été évident mais l’avantage indéniable est d’avoir acquis la double compétence back/front.
Je me spécialise dans Drupal 8 depuis maintenant 8 mois notamment avec les templates de Twig. Le développement front-end ne demande pas seulement de savoir utiliser les propriétés CSS mais il demande également une analyse de l'affichage des pages, la mise en place des règles CSS correspondantes et l’application de ces règles dans l’HTML des pages. Cela permet au développeur back-end de créer des pages stylées en utilisant les classes correspondantes.
Que fais-tu chez bluedrop.fr | ebizproduction ?
Je travaille sur le front-end des projets Drupal et j’essaie d’optimiser au maximum mon niveau d’intégration et celui de mes collègues développeurs. J’interviens donc dans la validation des maquettes ergonomiques, dans le theming et la déclinaison en Responsive Design, dans l’intégration des bibliothèques JavaScript et des animations, et enfin dans les tests et le contrôle qualité du front-end.
Qu’a apporté Drupal 8 dans ton travail (notamment Twig?)
Twig dispose de quelques fonctionnalités qui permettent de coder proprement. Le filtre « clean_class » convertit une chaîne en un nom de classe CSS acceptable. Finalement, Twig n’a pas modifié significativement ma manière de développer le front-end étant donné que notre équipe connaît déjà bien les normes CSS.
En revanche, je trouve Sass plus pertinent que Twig pour le front-end, puisqu’il propose l’utilisation de variables, ce qui veut dire que le changement est plus rapide puisqu’il suffit de modifier la valeur de la variable. De plus, si on a des effets « hover », ceux-ci seront basés sur la même couleur de la variable en utilisant les fonctions « Lighten/ darken ». Sass propose également les « mixins » qui offrent un gain de temps considérable puisqu’ils permettent de réutiliser le CSS, les propriétés et les sélecteurs. Bref, Sass m’est d’une grande aide dans mon travail de développement front-end !
Que penses-tu des framework de développement HTML/CSS comme Foundation par exemple ?
Les Framework sont très utiles pour faciliter les tâches de développement notamment front-end. Foundation est génial pour le Responsive Design et propose une flexibilité d’affichage intéressante puisqu’il permet de changer la position des colonnes. La version Sass est d’autant plus pertinente : elle permet de configurer les paramètres du Responsive Design c'est-à-dire les breakpoints mais également d’autres paramètres comme la pagination, le fil d’Ariane, etc.
Quelle serait selon toi la meilleure façon de travailler une charte graphique déjà validée ?
Tout dépend du contexte du projet et de la nature du travail à faire sur le design existant. Si le design est à refaire dans sa majorité, je conseille fortement de recommencer à zéro pour éviter toute perte de temps. Si le projet consiste en une refonte pour rendre le site responsive, le design ne change pas beaucoup, il sera seulement amélioré pour un rendu du Responsive Design optimal.
En somme, il faut regarder le code existant pour repérer les différents points à traiter et savoir comment procéder. Je commence toujours par traiter « du plus grand au plus petit élément » du design - je commence par le layout et passe ensuite aux détails. Après cela, je teste chaque partie du design en responsive et ensuite je finalise mon travail avec un test global des pages du site.
Quelle organisation as-tu mise en place pour assurer un contrôle qualité efficace sur le front-end ?
Le contrôle qualité front-end ne se limite pas à tester le développement front pour voir s’il est similaire à la maquette puisqu’il est ensuite difficile de modifier l’intégration et souvent cela coûte plus cher. Selon moi, il faut suivre de près le code d’intégration. Mais avant cela, il faut comprendre le design et connaître le comportement de chaque élément du site – dans le cas contraire, cela pourrait affecter l’HTML et la méthode d’intégration utilisée. Ainsi, si la méthode utilisée du côté développement front-end est ancienne ou non compatible avec les navigateurs, il faut rapidement envisager une autre méthode.
Une fois que les maquettes ont été analysées, on connaîtra les différentes parties qui composent le site ainsi que les parties qui se ressemblent ou se répètent. On pourra ainsi organiser le code Sass et mettre en place la méthode la plus compatible pour un rendu conforme aux attentes et donc de qualité.
Par ailleurs, il est préférable de déléguer la mission de contrôle qualité front-end à une personne différente que le développeur front en charge du projet, car il est difficile d’avoir un certain recul sur son propre travail. Je pense que la meilleure personne pour réaliser le contrôle qualité est le webdesigner puisqu’il repèrera rapidement les erreurs - mais un autre collaborateur peut très bien faire l’affaire (responsable front-end, chef de projet...).
En somme, pour un contrôle qualité efficace, je respecte les étapes suivantes :
- Comprendre chaque élément de la maquette fournie ;
- Analyser les informations de la maquette et savoir comment les traiter dans Sass ;
- Procéder à l’intégration en suivant de près le code ;
- Tester chaque partie développée et déceler les problèmes ;
- Réaliser un test global du front-end ;
- Réaliser le contrôle qualité : comparaison entre la maquette et le design du front-end réalisé.
Merci Rouaida pour toutes ces réponses, bon courage à toi pour tes projets en cours et à venir… Et longue vie à Drupal 8 :)