Drupal 8, améliorations front-end - partie 5

Lundi 31 Août 2015

Suite de l'article librement traduit à partir de l’excellente série Ultimate Guide to Drupal 8 par Angela Byron de chez Acquia, consacrée aux améliorations front-end.

Drupal 8, front-end

HTML5

Toute la chaîne d’affichage de Drupal 8 a été remaniée pour produire des balises HTML5. Les balises telles que <nav>, <header>, <section>, etc. sont donc utilisées dans les templates par défaut.

Les nouveaux types de champs input disponibles en HTML5 comme date, tel, email sont aussi disponibles par défaut.

Ils sont très utiles pour modifier l’interface de saisie des terminaux mobiles et améliorer l’expérience utilisateur.

D’autres fonctionnalités HTML5/CSS3, aujourd’hui très largement supportées par l’ensemble des navigateurs récents ont été rajoutées. Par exemple, l’abandon des classes CSS first, last, odd, even jusqu’ici générées en PHP et qui sont facilement faisables aujourd’hui avec des pseudo-sélecteurs CSS.

Nouvelles librairies front-end et utilitaires

En plus de jQuery et jQuery UI, de nouvelles librairies javascript font leur apparition :

  • Modernizr : détection de fonctionnalités HTML5/CSS3 supportées par le navigateur en cours, afin de pouvoir adapter l’affichage.
  • Underscore.js : un série d’utilitaires qui rajoute des fonctionnalités manquantes par défaut à javascript.
  • Backbone.js : un framework javascript MVC

Balisage schema.org natif

Le module inclus RDFa inclus dans le core de Drupal supporte le marquage schema utilisé notamment par Google pour son indexation.

Accessibilité améliorée

Drupal8 va encore plus loin que Drupal7 en intégrant toujours plus d'attributs WAI-ARIA, que ce soit sur le front ou même dans l’administration du site (ex : barre d’administration responsive).

Drupal8 rajoute également des librairies JS spécifiques pour améliorer l’accessibilité du site, que ce soit pour les éditeurs comme pour les internautes anonymes (ex : pouvoir faire des annonces vocales au chargement d’une page).

Un nouveau langage pour le theming : Twig

Drupal 8 abandonne l’ancien système de templating PHPT (un mélange simple de balises HTML et PHP difficiles à comprendre pour les non-développeurs) pour le remplacer par Twig.

A savoir que Twig et sa syntaxe sont déjà employés sur de nombreux autres CMS et applicatifs. Twig fait également partie de Symfony.

Twig utilise une syntaxe beaucoup plus simple et claire à mettre en place, qui sera compilée en php par Drupal. L’autre avantage de cette méthode est qu’elle interdit l’exécution de code PHP dans les templates et améliore ainsi la sécurité du CMS.

Exemple :

{% if sidebar_second %}
      <aside class="layout-sidebar-second" "complementary">
        {{ sidebar_second }}
      </aside>
    {% endif %}

Mais comment savoir quelles variables utiliser si on ne peut plus utiliser directement de PHP ? Et bien il faut toujours passer par un le THEME_preprocess_HOOK() comme c’était le cas en Drupal7. La différence est que le fichier s’appelle désormais THEME.theme au lieu de template.php.

De plus, Twig dispose d’un mode debug qu’il est possible d’activer en rajoutant $settings['twig_debug'] = TRUE; dans le fichiers settings.php. A la manière du module contribué Thème developer qui existe déjà pour Drupal7, Drupal rajoutera des informations utiles au développeur dans l’affichage des pages et leur code source.

Rapide par défaut

Un autre grand changement et l’activation par défaut de fonctionnalités telles que l’agrégation des CSS et JS qu’il fallait auparavant manuellement mettre en place.

Le revers de cette médaille, c’est qu’un site Drupal 8 est par défaut beaucoup plus difficile à thémer.

Heureusement, Drupal 8 introduit un fichier de préférences spécifique pour le développement en local qui désactive les agrégations et active le mode debug de Twig : sites/default/settings.local.php.

Nouveaux éléments d'interface

Drupal 8 inclus dans son core des éléments en provenance du module Ctools tels que des fenêtres modales, des boutons dropdown et autres pour enrichir les interfaces d’administration.

Thémer Responsive

En plus des améliorations mobiles et responsive déjà évoquées plus haut, D8 introduit plusieurs fonctionnalités utiles pour les développeurs.

Ex : la balise <picture> qui devrait permettre un chargement à la demande des images dans différentes résolutions (et donc poids) pour accélérer le chargement des pages sur un terminal mobile !

Ex : les breakpoints sont définis dans un fichier Yaml lié au thème.

Nouvelles méthodes pour ajouter des JS/CSS à une page

Auparavant, pour ajouter un feuille de style CSS ou un JS sur une page en particulier, il fallait utiliser respectivement les fonctions drupal_add_css() et drupal_add_js(). Ce ne sera plus le cas avec Drupal 8, les assets JS/CSS doivent être insérées dans la propriété #attached d’un render array.

Exemple :

seven.theme

function seven_form_node_form_alter(&$form, &$form_state) {
...
  $form['#attached'] = array(
    'css' => array(drupal_get_path('module', 'node') . '/css/node.module.css'),
  );
...
}

Si cette nouvelle manière de faire fonctionne parfaitement pour charger des éléments à usage unique qui ne nécessitent pas de dépendances, l’approche communément conseillée est de déclarer ces assets CSS/JS (ainsi que leurs dépendances) comme une librairie dans le fichier MODULE/THEME.libraries.yml pour y faire référence dans la propriété #attached de son render array.

seven.libraries.yml

maintenance-page:
  version: VERSION
  js:
    js/mobile.install.js: {}
  css:
    theme:
      maintenance-page.css: {}
  dependencies:
    - system/maintenance

install-page:
  version: VERSION
  js:
    js/mobile.install.js: {}
  css:
    theme:
      install-page.css: {}
  dependencies:
    - system/maintenance

drupal.nav-tabs:
  version: VERSION
  js:
    js/nav-tabs.js: {}
  dependencies:
    - core/matchmedia
    - core/jquery
    - core/drupal
    - core/jquery.once
    - core/jquery.intrinsic

seven.theme

<?php
function seven_preprocess_install_page$variables// ...
  $libraries = array(
    '#attached' => array(
      'library' => array(
        'seven/maintenance-page''seven/install-page',
      ),
    ),
  );
  drupal_render$libraries?>

Ceci est plus contraignant désormais qu’un simple appel direct d’une fonction drupal_add_FOO(), mais l’avantage est que ces assets sont dorénavant mis en cache et réutilisables à d’autres endroits du code.

R.I.P. IE 6, 7, and 8

Drupal 8 abandonne officiellement le support d’Internet Explorer dans ses versions 6, 7 et 8.

Ceci étant, la librairie JS html5shiv est toujours inclue dans le core pour que les sites continuent quand même de s’afficher en mode dégradé pour IE8. Il y aura également un projet contribué pour le support d’IE8.

@lcoullet

> Partie 1 : Présentation des nouveautés et spécificités de Drupal 8

> Partie 2 : Drupal 8, mobile first

> Partie 3 : Améliorations pour les sites builders

> Partie 4 : Le multilinguisme

> Partie 5 : Améliorations Front-end

> Partie 6 : Améliorations Back-end