Drupal
25/01/2018

Vagabondage de tweets – Décembre 2017 – Drupal 8, Contenta CMS, Progressive Web App...

Veille Drupal
Au sommaire des tweets du mois de décembre : Drupal 8, Aegir, Contenta CMS, JavaScript, VueJS, performance et Progressive Web App… Un concentré de veille sur les sujets qui nous ont intéressés.

Drupal

2 décembre – Ludovic Coullet @lcoullet
Migrate & Drupal 8 https://buff.ly/2Ap4HOd
Que ce soit pour la migration d’un site vers un autre, l’import RSS dans Drupal 8, l’import massif de données, la suite de modules Migrate de Drupal 8 a su se montrer pertinente. Migrate a été intégré dans le core de Drupal 8 et est devenu un standard pour les migrations de données. Chaque partie de la migration est présentée par un plugin qu'il est possible de brancher ou débrancher. En effet, on y trouve les plugins « Source » qui servent à décrire la source des données, des plugins « Destination » qui permettent d’indiquer ce que l’on veut créer (Node, Taxonomy, Menu, Block, User…) et enfin des plugins « Process » qui concernent le traitement de la migration. La suite Migrate propose plusieurs modules, dont le module Migrate Tools qui permet de lancer des migrations facilement et rapidement depuis Drush. Il existe le module Migrate Plus qui propose des fonctionnalités supplémentaires, les plugins « Process » :

  • EntityLookup qui permet de chercher une entité pour migrer un champ Entity Reference ;
  • EntityGenerate qui permet de créer une entité si elle n’existe pas durant la migration.

Voici une présentation efficace de la suite Migrate avec des exemples de migrations de données (CSV, RSS…) en utilisant plusieurs types de process (simple, medium et complexe). 

7 décembre – Ludovic Coullet @lcoullet
Drupal 8, React, Vue, JSON API and ES6 learning resources https://buff.ly/2Bb6iYS
Vous cherchez une documentation assez exhaustive sur les technologies telles que Drupal 8, VueJS, React, GraphQL et plus encore ? Voici une liste de ressources qui vous aidera grandement dans les problématiques que vous traitez notamment dans le cas de découplages avec Drupal !

14 décembre – Christophe Dugué @chdugue
Voici les nouveautés du module #Workflow dans #Drupal 8.4 - http://bit.ly/2rbblnD
Tout comme Content Moderation, le module expérimental Workflows permettant de mettre en place un processus de publication, est devenu stable lors de la sortie de la version Drupal 8.4.0. Workflows a été séparé de Content Moderation, ces deux modules peuvent être utilisés indépendamment pour créer des flux de travail personnalisés mais en couplant les deux modules, il est possible de mettre en place un processus de publication complet. Workflows fournit le moteur de State Machine sur lequel s’appuie Content Moderation. Une State Machine permet de définir un ensemble d’états et de règles sur la façon de gérer les transitions entre ces états. Par ailleurs, en installant le module Workflows Field, ce dernier permet de fournir un champ qui permet de stocker les états de n’importe quelle entité de contenu et de s’assurer que les états changent en fonction des transitions définies par le module. Pour mettre en place un workflow de publication, suivez le tutoriel !

14 décembre – Christophe Dugué @chdugue
Débat : Pourquoi l'adoption de #Drupal8 est bien plus lente que celles de #Drupal7, 6 ou 5 - http://bit.ly/2kr2HLc  - Moi j'y vois un effet de masse (nombre de D7 en production... Mais les commentaires sont instructifs ! http://bit.ly/2mKu458
Voilà maintenant plus de deux ans que la version 8 de Drupal a été libéré. Cependant, dès les premiers mois nous avons constaté une adoption timide de cette version par rapport à ses prédécesseurs Drupal 5, 6 et 7. En effet, l’adoption de Drupal 8 est nettement inférieure à Drupal 7 voire à celle de Drupal 6. Quelles sont les raisons du retard de l’adoption de Drupal 8 ? Si certains reprochent le manque de modules portés vers la dernière version ou la rupture technologique conférant une complexité difficile à prendre en main, d’autres ne ressentent pas le besoin de migrer vers la dernière version malgré les améliorations…Le débat est lancé !

15 décembre – Bluedrop Agence Web @bluedrop_drupal
Pour mettre en valeur les extraits de #code d'un contenu #Drupal8 dans un joli format, voici le module #CKEditorCodeSnippet et un tutoriel qui vous explique comment procéder ! http://bit.ly/2B7Kmeh
Pour des raisons esthétiques et surtout de lisibilité, le surlignage des extraits de code est apprécié notamment dans les articles tutoriels. Pourtant la solution « out of box » de Drupal ne dispose pas de cette fonctionnalité. En effet Drupal propose seulement les balises HTML5 <pre> et <code>, mais le résultat avec ces dernières ne permettent pas le surlignage du code. Pour cela, il est possible d’utiliser le module CKEditor CodeSnippet qui permet d’activer le plugin CodeSnippet de CKEditor dans le WYSIWYG. Le plugin inclut la bibliothèque highlightjs et d’autres styles disponibles. Dans ce tutoriel, vous découvrirez comment afficher des extraits de code dans le contenu Drupal, dans un joli format !

19 décembre – Ludovic Coullet @lcoullet
Embed a Youtube Player as Media Asset Into CKEditor in Drupal 8 : http://bit.ly/2mhmbD2
La sortie de la version de Drupal 8.4 a apporté de nouvelles fonctionnalités intéressantes pour la gestion des médias, si bien que nous pouvons dorénavant créer une bibliothèque avec un nombre varié d’assets média et les utiliser n’importe où sur le site. Intégrer une vidéo Youtube comme un asset média dans CKEditor avec Drupal est possible en suivant quelques étapes :

  • Installer les modules nécessaires : pour intégrer un player vidéo directement dans l’éditeur il convient d’installer les modules Media Entity, Video Embed Field, Entity, Embed (ces deux derniers sont des dépendances nécessaires pour Entity Embed) et enfin Entity Embed ;
  • Créer le bundle média vidéo : il suffit de se diriger dans Structure, d’aller vers Media bundles et enfin de cliquer sur le bouton Add Media Bundle. Après avoir donné un nom dans le champ Label, vous pouvez choisir le type de fichier Video embed Field, sous le champ Type provider. Cliquez sur Save Medial Bundle. Vous pouvez gérer les champs du bundle grâce au bouton Manage Field.
  • Créer les assets media : dirigez-vous vers l’onglet Content, cliquez sur Media et ensuite cliquer sur Add Media. Il suffit d’ajouter une étiquette média et ensuite d’entrer une URL correctement formatée. Cliquez sur Save and Publish.
  • Créer le bouton d’intégration dans l’éditeur : en cliquant sur Configuration, vous pourrez accéder à Content authoring et enfin à Test editor embed buttons. Bien qu’il existe déjà un bouton par défaut, ce dernier permet d’intégrer des noeuds dans la zone de texte. Le bouton Embed permet d’intégrer les entités médias. Vous pouvez cliquer sur Add embed button, lui donner un nom et l’utiliser pour choisir le fichier média que vous souhaitez intégrer dans l’éditeur.
  • Ajouter l’icône à la barre d’outils de CKEditor : le bouton pour intégrer les médias peut être disponible dans la barre d’outils de CKEditor. Il convient d’ajouter l’icône du bouton en cliquant sur Configuration > Content Authoring > Test formats and editors.  Sélectionnez le bouton d’intégration de vidéo et faites un drag-and-drop vers la rubrique media de la barre d’outils de l’éditeur.

Pour créer facilement un article avec une vidéo intégrée ou tout autre asset média, nous vous invitons à lire ce tutoriel efficace et complet !

Aegir

8 décembre – Ludovic Coullet @lcoullet
Aegir is ten! | ComputerMinds https://buff.ly/2BgWjkt  #Drupal
Le projet Drupal Aegir fête ses 10 ans. Aegir est une distribution qui permet d’industrialiser les tâches courantes relatives au déploiement, à la maintenance et à la sauvegarde des sites Drupal. Très utile dans le cas des architectures multi-sites ou des sites à fort trafic hébergés par plusieurs serveurs, Aegir est une « super-distribution » permettant d’administrer l’ensemble des distributions installées sur le serveur. Quel avenir pour Aegir ? Le développeur sénior en charge du projet annonce que la distribution est en passe de devenir une solution « Headless » dont l’interface utilisateur sera un front-end léger pour la gestion du cluster d’Aegir. A suivre de prés !

Contenta

5 décembre – Ludovic Coullet @lcoullet
Contenta CMS reaches 1.0 – Mateu Aguiló Bosch – Medium https://buff.ly/2AQdVTH  #drupal
Contenta est une distribution Drupal orientée API-first. Sans connaitre Drupal, Contenta est simple à utiliser et ne nécessite que peu de configurations. C’est en quelques sortes un starter-kit qui permet de mettre en place facilement une architecture découplée grâce à des fonctionnalités d’API modernes et prêtes à l’emploi. Contenta permet d’extraire des ressources imbriquées en une seule requête et prévoit d’inclure le service GraphQL. La distribution propose d’alimenter le contenu du site web via JavaScript. Contenta 1.0 est à présent disponible ! En quelques mois, cette distribution a bien fait du chemin : nombreux articles et tutoriels autour de l’API, nouvelles fonctionnalités, stabilité de la distribution, collaboration pour une configuration Docker, succès florissant auprès de la communauté Drupal… jetez un coup d’œil sur la rétrospective de Contenta CMS !

JavaScript

12 décembre – Richard Feldman‏ @rtfeldman
State of JS: about as many people are using @elmlang as @preactjs! The numbers keep on climbing...I remember when I could list all the companies using Elm in production because there were only a few of us.
L’écosystème JavaScript ne cesse de se densifier laissant apparaître de nouvelles technologies chaque mois. Jetons un d’œil sur l’état d’adoption des frameworks et bibliothèques Javascript : React semble garder la première position comme Framework le plus utilisé dans le monde JavaScript. Angular, Angular2 et VueJS arrivent en deuxième position dans une bataille très serrée. Vient ensuite les autres bibliothèques comme Backbone, Ember et Polymer. Mais qu’en est-il des autres librairies ? Preact et Elm se hissent largement en top position dans la catégorie « Autres ». Si React est trop difficile, vous pouvez utiliser la petite bibliothèque « clone » Preact. Proposant la même API performante de React, cette dernière possède des implémentations rapides pour détecter les différences entre le DOM dans la page et le Virtual DOM. Quant à Elm, ce langage a fait beaucoup parler depuis cette année 2017. Ce dernier est un langage de programmation fonctionnel statiquement typé pensé pour le front-end et les interfaces graphiques. Pour ceux qui recherchent une technologie JavaScript prometteuse, vous avez dorénavant une piste à explorer !

VueJS

14 décembre – Christophe Dugué @chdugue
REX : Pourquoi ils sont passés de #AngularJS à #VueJS - http://bit.ly/2jUqqnv  - Et pourquoi pas ? Puisque nous aussi :)
Vous ne savez pas quel framework adopter surtout dans le monde confus de JavaScript ? Ne perdez plus de temps, lisez les retours d’expérience pour vous aiguillez. Ici, Luis, développeur chez Rever, nous raconte pourquoi il est passé d’Angular 2 à VueJS, et pourquoi il n’a pas choisi React. Par ailleurs, notre équipe Drupal a également choisi VueJS notamment pour les projets nécessitant un découplage Drupal. Si React a su s’imposer par sa robustesse et sa performance, nous avons tout de même préféré VueJS en raison de sa vitesse impressionnante. En effet VueJS est deux fois plus rapide que React dans un environnement de test identique. Comparé à Angular, nous constatons que VueJS se concentre sur l’essentiel, il n’y a pas d’outils superflus ni de syntaxe difficile à comprendre et maîtriser. Pour aller plus loin, nous expliquons les avantages de la combinaison VueJS et Drupal plus précisément ici.

Performance

30 décembre – Christophe Dugué @chdugue
Etude de cas sur la performance de la #PWA de @Tinder - Edifiant ! http://bit.ly/2CcAkvX  - #Mobile #Web #Workers
Selon une étude Google, 53% des utilisateurs abandonnent leur session lorsque le site met plus de 3 secondes à charger. L’analyse de la performance est devenue indispensable pour optimiser la rapidité d’un site web. La performance est de nos jours, une des exigences les plus sollicitées mais également une des plus laborieuses à mettre en place et à suivre. Aujourd’hui certaines technologies ont su répondre efficacement à cette problématique, notamment les Progressive Web App (PWA) qui proposent de nombreux avantages comme une performance plus puissante, des fonctionnalités hors connexion et des notifications push entre autres. Le cas de la nouvelle Progressive Web App de Tinder a été étudié pour démontrer la puissance et le potentiel des PWA par rapport aux applications natives. Les différences sont claires :

  • La taille : l’application Android pèse 30MB contre seulement 2,8 MB pour la PWA Tinder.
  • Comportement de l’utilisateur : les temps de session sont plus longs sur le web que sur les applications natives. Les utilisateurs envoient plus de message sur le web que sur les applications natives et idem pour l’édition des profils qui se font davantage sur le web.
  • Performance : en testant la nouvelle application avec WebPageTest et Lighthouse avec par exemple un Samsung Galaxy S7, nous constatons qu’il faut moins de 5 secondes pour que l’application soit chargée et interactive.

Microsoft

3 décembre – Christophe Dugué @chdugue
#Microsoft no more... Et voici pourquoi : http://bit.ly/2nqHfuI  - #Liberté
Les solutions propriétaires ont souvent été critiquées, notamment depuis la démocratisation et le succès grandissant des logiciels libres. Ici, c’est Windows et plus largement la société Microsoft et ses méthodes qui sont pointés du doigt.  Les raisons de quitter les solutions de Microsoft dont Windows sont nombreuses, dont notamment :

  • Le fait de ne pas prévenir ses utilisateurs de failles de sécurité en les laissant en danger presque 1 mois après leur découverte et laisser volontairement le gouvernement américain exploiter ces failles pour leur bénéfice;
  • Le fait de permettre la création de faux certificats SSL permettant à des gouvernements d’espionner et pirater les citoyens.

…Les raisons sont nombreuses... Lisez la suite !

Veille synthétisée par @Myriam à partir des comptes twitter de l'équipe de bluedrop.fr.

Bluedrop Agence web‏
@bluedrop_drupal
Le concept du #headless #Drupal est encore un mystère pour vous ? Coup d’œil dans l'architecture d'une application #Drupal découplée avec #Ember !  http://bit.ly/2CKxfzz