Blog & ressources

Vagabondage de tweets – Juin 2017 – Drupal 8, Node.js, Contenta CMS

23 Juillet 2017 Commentaires
Veille Drupal

Drupal

10 juin – Ludovic Coullet ‏@lcoullet
A high-level overview of the Plugin system in Drupal 8 http://buff.ly/2r3dxJx 
Un des avantages qui fait la force de Drupal 8 est son puissant système de Plugins qui permet l’extension d’une fonctionnalité facilement réutilisable et remplaçable.
Tout comme le CMS, les plugins de Drupal 8 proposent une approche orientée objet et remplacent ainsi les hooks de Drupal 7 hook_*_info(). Les plugins implémentent de nouvelles fonctionnalités en fournissant une interface de configuration aux utilisateurs. Ainsi, le CMS propose plusieurs types de plugins (par exemple le Plugin Type block) et différents plugins étendant leurs fonctionnalités : il suffit d’implémenter le plugin de votre choix qui contiendra l’ensemble des méthodes nécessaires au paramétrage de votre fonctionnalité.

14 juin – Ludovic Coullet ‏@lcoullet 
Comment mettre en place un site Drupal "Headless» ? http://bit.ly/2td4gCa
Le « Headless Drupal » fait beaucoup de bruit. Le principe repose sur la dissociation de l’utilisation de Drupal en ne conservant que le back-office pour la gestion de contenu. Le front-end est alors développé avec une autre application, généralement avec un framework / une bibliothèque JavaScript.
Avec la multitude d’applications front-end, les choix pour découpler Drupal sont nombreux.
Dans ce post, découvrez les possibilités techniques pour mettre en place un site Drupal 8 en « Headless ».

14 juin – Ludovic Coullet ‏@lcoullet 
Contenta CMS : An API-first #drupal Distribution http://buff.ly/2rZlUbW
Drupal est un CMS remarquable lorsqu’il s’agit de construire des expériences éditoriales avancées et de modéliser des contenus complexes. Cependant les besoins avant-gardistes des utilisateurs ne cessent d’évoluer. Pour répondre à ce besoin, la communauté Drupal a travaillé sur une nouvelle distribution, à présent disponible : Contenta CMS.
Contenta est une distribution Drupal dont le principe est de mettre en place un site Drupal sans front-office - uniquement un back-office d’administration. La distribution nécessite peu de configuration et propose une boite de modules permettant un déploiement rapide de services web REST avec l’API JSON qui permet de récupérer des ressources imbriquées dans une requête. Avec cette distribution, vous pouvez alimenter le contenu de votre site web ou de votre application mobile.
Finalement, Contenta CMS est une possibilité intéressante pour le découplage Drupal puisqu’il permet de mettre en place un back-office opérationnel facilement et rapidement sans avoir une expérience avancée dans Drupal.
L’avez-vous testé ? Si oui, faites-nous part de votre expérience !

17 juin – Ludovic Coullet ‏@lcoullet
Introduction to PHP type-hints for Drupal 8 development http://buff.ly/2sA0lQE 
Le développement Drupal 8 peut devenir un dangereux méli-mélo. Ainsi, connaitre quelques astuces PHP pour améliorer la clarté du code et éviter les erreurs, fait gagner un temps précieux !
Par exemple lorsque vous appelez une fonction/une méthode qui a des arguments, vous ne savez pas systématiquement quel type d’argument (tableau, objet, etc.) est à passer dans une fonction. Pour éviter ce genre de désagrément, les déclarations de type ou « Type hints », permettent aux fonctions de requérir que certains paramètres soient d’un certain type lors de l’appel de celles-ci.
Pour spécifier une déclaration de type, le type doit être ajouté avant le nom du paramètre. Vous pouvez ainsi spécifier les types de données tels que les tableaux, les objets et les interfaces. La déclaration de type est optionnelle et ne fait pas partie des normes de code Drupal mais elle permet entre autres, de faciliter grandement le débogage du code en limitant les erreurs.

21 juin – Ludovic Coullet ‏@lcoullet 
J'avais raté cela : Parse + Open Source = http://buff.ly/2sNWiAf
Vous l’avez peut-être croisé sur votre chemin, Parse est un service MBaaS (Mobile backend as a Service) qui permet de déployer un back-office pour une application web donnée. La version Open Source est enfin sortie, sous le nom de Parse Server. Cette version permet de déployer un back-office pour n’importe quelle infrastructure pouvant exécuter Node.js. Voici quelques particularités de Parse Server :

  • Comme nous l’avons dit, Parse Server est Open Source. Il est extensible et bénéficie des contributions externes pour en corriger et améliorer les fonctionnalités.
  • Parse Server ne dépend pas du back-office hébergé de Parse.
  • Parse Server peut être hébergé n’importe où et il est possible d’exécuter plusieurs instances dans différentes régions pour desservir un public international.
  • Il utilise directement MongoDB et ne dépend pas de la base de données de Parse.  Vous avez la main sur la gestion de l’index, l’optimisation des performances, la sauvegarde et la restauration des fonctionnalités.
  • Parse Server propose une sauvegarde manuelle fournissant des fichiers JSON de vos données. Ces sauvegardes peuvent être importées.
  • Vous pouvez migrer une application existante vers votre propre infrastructure.
  • Vous pouvez développer et tester votre application localement en utilisant Node.js.

21 juin – Ludovic Coullet ‏@lcoullet 
8 Tips for Drupal 8 Performance : http://bit.ly/2sJu9ec
Les enjeux de la performance d’un site sont très importants - Incidences sur les taux de rebond élevé, le faible taux de conversion, l'abandon du panier pour les sites e-commerce, et bien d’autres. Drupal est souvent choisi pour les projets complexes, demandant une performance élevée et ce n’est pas pour rien : plus les fonctionnalités sont complexes plus elles dégradent la performance.
Voici des astuces pour optimiser la performance de votre site Drupal 8 notamment avec Nginx :

  • Définir une architecture robuste et remplacer le serveur : beaucoup de projets utilisent Apache comme serveur par défaut. Suivant la charge, beaucoup se tournent vers Nginx, le serveur le plus utilisé dans les sites à fort trafic. En utilisant Nginx, vous réduisez l’empreinte de la consommation mémoire de votre serveur en cas de fortes charges. Par ailleurs, Nginx peut être également utilisé comme reverse proxy.
  • Réécrire les URLs : si la mise en page du site est complexe, il est souhaitable d’afficher une URL simplifiée, stable et compréhensible. Les URLs courtes sont essentielles pour la sécurité et la convivialité d’un site web.
  • Mettre en place un serveur reverse proxy : celui-ci permet de supporter plusieurs serveurs d’applications en parallèle. Le serveur reverse proxy reçoit les requêtes des navigateurs, examine chaque demande et décide quoi faire : soit effectuer la requête elle-même soit l’envoyer à un autre serveur. Le serveur reverse proxy permet une meilleure redondance et une sécurité améliorée.
  • Mettre en place un système de cache statique : il est également possible d’utiliser Nginx pour la mise en cache de fichiers statiques (graphiques, fichiers de code, JPEG, PNG, fichiers CSS, fichiers JavaScript) pour décharger le serveur Drupal.
  • Mettre en place un système de cache dynamique : il s’agit de contourner le serveur Drupal en utilisant Nginx pour la mise en cache des pages PHP.
  • Utiliser plusieurs serveurs et équilibrer la charge : il s’agit de d’utiliser plusieurs serveurs pour répartir la charge et éviter tout risque de surcharge d’un serveur qui risque d’impacter la performance du site. Cela est vivement recommandé pour les sites à fort volume de données et à fort trafic. Attention, cette option implique un certain coût.
  • Favoriser la persistance des sessions : l’architecture multiserveurs peut présenter un inconvénient celui de rediriger l’utilisateur vers un serveur qui n’est pas au courant de la session http. Grâce à la persistance de session, la répartition des charges se fait autrement : les sessions d’utilisateurs sont réparties entre les serveurs de manière à ce que l’utilisateur soit affecté au même serveur tout au long de la session. Vous pouvez utiliser Nginx Plus pour assurer la persistance des sessions.

27 juin – Ludovic Coullet ‏@lcoullet 
Decoupling #Drupal with Waterwheel for Ember and React | Acquia : http://bit.ly/2sK2zO3
Comme les distributions Contenta CMS et Reservoir, l’écosystème Waterwheel ouvre la voie aux non développeurs Drupal d’utiliser le Drupal découplé pour le back-office facilement. L’équipe Waterwheel a publié plusieurs nouveaux projets qui profitent aux développeurs d’applications JavaScript conçues avec Ember et React.
Découvrez sans attendre les trois projets pour le découplage : Ember - Drupal - Waterwheel, Ember- Waterwheel et enfin React - Waterwheel.

CSS

18 juin – Ludovic Coullet ‏@lcoullet 
The State of CSS http://bit.ly/2sTA9w8
L’écosystème JavaScript ne cesse d’accueillir de nouvelles innovations, notamment initiées par la communauté CSS de JavaScript. Le CSS a été significativement optimisé ces derniers temps, voici les 5 améliorations du CSS :

  • Les méthodologies de code CSS : étant donné que tous les sélecteurs existent dans le même espace de nom global, il est possible de voir des sélecteurs cibler des éléments que nous ne prévoyons pas, ou que les sélecteurs soient remplacés par d’autres. Dorénavant ce problème est résolu, les méthodologies comme OOCSS, SMACSS ou les BEM définissent les conventions de nommage pour nous aider à éviter les collisions de noms de classe. 
  • Le nouveau module Flexbox : vous n’avez plus besoin de la propriété Float, qui permet d’indiquer qu’un élément doit être retiré du flux normal et doit être placé sur le côté droit ou gauche de son conteneur. Le texte et les autres éléments « inline » entourent alors l’élément flottant. Cependant, cette propriété entraîne parfois un comportement non désiré qui nécessite souvent un hack pour le corriger. Le CSS a introduit un nouveau module de mise en page appelé « Flexbox ».  Ce module est un système de mise en page garantissant que les éléments se comportent de manière prévisible sur différentes tailles d’écran. Il résout le problème du centrage vertical et horizontal.
  • Le module CSS Grid Layout supporté par les navigateurs : tout le monde utilise une grille, c’est un peu la base du code CSS. Les grilles permettent de créer des mises en page complètes en alignant des éléments sous forme de lignes et de colonnes. Les framework CSS répondent efficacement à ce besoin. Dorénavant en mars dernier, la plupart des navigateurs supportent le module CSS Grid Layout, un système de mise en page bidimensionnel intégré directement dans le CSS. Etant donné que la plupart des frameworks CSS reposent sur l’utilisateur de Float, Grid Layout est une alternative intéressante.
  • Plus besoin de préprocesseurs : les extensions de langage telles que Sass et Less ont apporté des fonctionnalités pertinentes dans le code CSS comme la réutilisation des données avec des variables, une meilleure organisation avec le nesting, et la réutilisation des propriétés avec des mixins. Dans le cas de Sass, vous avez besoin d’un binaire supplémentaire pour compiler les fichiers Sass en CSS. L’inconvénient des préprocesseurs est qu’il est impératif d’apprendre le CSS et la syntaxe spécifique du préprocesseur. A présent les navigateurs modernes ont maintenant un support natif pour les variables CSS et calc() mais également des fonctionnalités comme la modification des couleurs et les mixins.
  • Les bibliothèques UI : Le CSS reste le seule langage de style de document que les navigateurs comprennent. Cependant, vous pouvez personnaliser les applications web sans avoir jamais écrit un seul fichier CSS grâce à des bibliothèques UI comme React ou Vue.JS. 

20 juin – Ludovic Coullet ‏@lcoullet 
Oh No! Our Stylesheet Only Grows and Grows and Grows! (The Append-Only Stylesheet Problem) | CSS-Tricks http://bit.ly/2sUcPOF
Beaucoup de développeurs front-office se sont confrontés à des feuilles de style CSS interminables. En plus d’impacter négativement la performance du site, les gros fichiers CSS font fuir les développeurs ! Vous souhaitez optimiser vos fichiers CSS ? Ce post est fait pour vous !
Eliminez le CSS inutilisé grâce à des solutions comme :

  •  l’outil d’audit Chrome qui permet d’analyser la quantité de CSS inutilisé et de voir ce qui est utilisé ou non avec les barres rouges et vertes ;
  • l’outil UnCSS, l’un des plus populaires. Lui aussi permet de supprimer le CSS inutilisé en faisant la liste des URLs à tester ;
  • les frameworks CSS qui permettent d’éviter de faire grossir les fichiers CSS !

Node.JS

15 juin – Ludovic Coullet ‏@lcoullet 
Using Node.js with Drupal: the time has come for some real-time magic! http://bit.ly/2u3Z7wX
Il est possible de combiner Drupal avec un large choix de Framework/bibliothèques JavaScript pour une plus grande possibilité d’extension des fonctionnalités notamment côté front-end. Ici nous allons vous parler de Node.JS, une solution basée sur le V8 de Google et écrit en JavaScript, dont sa puissance réside dans le traitement en temps réel d’un grand nombre de requêtes notamment pour les dashboards, les jeux, les chats, les sondages, les messages d’alerte, les notifications push, etc.
En plus du temps réel sans rechargement de pages, Node.js présente d’autres avantages :

  • JavaScript partout : avec Node.js vous pouvez utiliser JavaScript aussi bien pour le script côté client que pour le côté serveur. Malgré ses inconvénients, le JavaScript est le langage le plus actif sur Github et impose également une forte présence sur le côté front des applicatifs.
  • Moteur V8 de Google : Node.js utilise le moteur JavaScript V8 de Google qui confère une vitesse spectaculaire.
  • Les IO non bloquantes : Node.js gère les entrées et les sorties en utilisant des IO non bloquantes permettant la réalisation d’actions asynchrones et maximise le traitement rapide et immédiat.

Coupler Node.js avec Drupal en utilisant le module Node.js disponible aussi bien en Drupal 7 que 8, pour rendre votre site particulièrement dynamique, riche et interactif !

GraphQL

1 juin – Ludovic Coullet ‏@lcoullet 
REST 2.0 Is Here and Its Name Is GraphQL - SitePoint: http://bit.ly/2uyHPpv
Depuis une dizaine d’années maintenant, l’apparition du Smartphone a perturbé inéluctablement le développement web. En réponse, les développeurs ont commencé à utiliser les API RESTful pour servir les données aux applications sous toutes les formes (desktop, tablettes et Smartphones). Si les API REST sont la référence quand il s’agit de partager les services, ils n’en restent pas moins imparfaits :

  • Avec REST, si vous requêtez un objet vous aurez automatiquement tous les champs de l’objet.
  • REST oblige souvent à enchaîner plusieurs appels pour obtenir les données souhaitées.
  • REST ne permet pas une gestion facile entre les objets.
  • Et bien d’autres.

Nous avons découvert une alternative sérieuse à REST : GraphQL. Créé par Facebook et libéré de ses sources depuis 2015, GraphQL est un langage de requête SQL pour les API, dont le format de requête est le même que celui de la réponse. Voici les raisons qui font de GraphQL un atout considérable :

  • GraphQL n’est lié à aucune base de données spécifique.
  • GraphQL est capable de requêter un nombre inconnu d’éléments et d’y appliquer des conditions et des filtres.
  • Ce langage permet de limiter les allers-retours et toutes les données peuvent être retournées en une seule requête ;
  • GraphQL confère une référence unique partagée entre le serveur et le client, concernant le typage des données échangées.
  • L’implémentation de GraphQL peut s’opéré en parallèle d’une API REST déjà en place.

MongoDB/ Elasticsearch

1 juin – Christophe Dugué @chdugue 

Et hop ! Une petite analyse #MongoDB et #ElasticSearch en cours... Qui se ressemble... http://bit.ly/2rsTLub
MongoDB est une base de données NoSQL orientée documents (JSON), tandis qu’ElasticSearch est outil d’indexation et un moteur de recherche à l’intérieur des données mais également orienté documents. Les deux solutions présentent beaucoup de similitudes pourtant leur différence de conception marque bien leurs spécificités :

  • Flexibilité : MongoDB stocke l’information en JSON avec aucun schéma imposé tandis qu’ElasticSearch stocke également les objets JSON mais attend un schéma les décrivant pour l’indexation des données.
  • Rapidité : le schéma imposé par ElasticSearch sur les données insérées permet une indexation beaucoup rapide et visible sur des volumes de données conséquentes. Quand à MongoDB, les temps de réponses augmentent avec le volume recherché.
  • Scalabilité : que ce soit ElasticSearch et MongoDB, les deux solutions sont prévus pour assurer une scalabilité horizontale par la répartition des données sur plusieurs nœuds et par un mécanisme de réplication des données sur plusieurs nœuds. Pour créer un cluster MongoDB, il faut 3 type de serveurs : un dédié pour la configuration, un autre assurant le routage des requêtes et enfin les serveurs contenant les données tandis que chacun des serveurs d’ElasticSearch assure toutes ces fonctions. Par ailleurs, dans MongoDB, l’administrateur de la base doit choisir une clef qui sera utilisée pour la répartition des données sur les nœuds alors qu’Elastic Search automatise les choix sur les nœuds disponibles. Chaque nœud étant détecté et ajouté au cluster.

Polymer

4 juin – Ludovic Coullet ‏@lcoullet 
Building a #Polymer App for the web, then #Drupal | DPE http://buff.ly/2rA3fnf
Drupal a démontré sa capacité à être découplé avec d’autres frameworks pour un front-end répondant efficacement à la demande exigeante actuelle. Ici, Polymer se présente comme un candidat sérieux pour le développement d’applications web avec Drupal.
Polymer est une bibliothèque Javascript qui permet de concevoir rapidement des applications performantes et durables par la création d’éléments HTML réutilisables et personnalisés. Pour les intéressés, vous êtes servis : voici un tutoriel qui vous dévoile le processus de construction !

Divers

19 juin – Bluedrop Agence Web @bluedrop_drupal  
Accélérez le #développement de votre #projet #web sur #Drupal grâce aux #distributions ! On vous en parle ici : http://bit.ly/2sFZgTI
Le développement Drupal est déjà assez compliqué pour en réinventer la roue ! Pour cela, les distributions sont devenues incontournables dans les projets de développement de site web surtout si le projet consiste à déployer plusieurs sites reposant sur un même process métier : c’est un gain de temps de développement assuré !
Ces petites boîtes composées de modules sélectionnés après mûre réflexion permettent de déployer un site en répondant à une grande partie des fonctionnalités envisagées, et ce en un temps record ! Pour aller plus loin, nous vous invitons à visionner notre 3ème numéro de mémo-dessin qui vous explique le grand bénéfice caché derrière les distributions Drupal.