20 Février 2018

Vagabondage de tweets – Janvier 2018 – Drupal 8, PatternLab, React, Lit, Nuxt.JS...

Commentaires

Voici le premier numéro de vagabondage de tweets de 2018. Au sommaire : Drupal 8, PtaternLab, React, état des frameworks JavaScript en 2018, le framework CSS Lit, HTML 5.2, Nuxt.JS…

Drupal

3 janvier – Ludovic Coullet @lcoullet
Drupal et le cache: https://buff.ly/2DK4LWM
Le cache est devenu indispensable pour améliorer les performances d’un site. Plus un site est complexe, plus il demande des ressources nécessaires à son exécution le rendant moins rapide. En plus de répondre à des exigences d’UX, la performance est l’un des critères les plus importants de Google pour le référencement SEO. Optimiser la rapidité d’un site n’est plus une option mais devient une nécessité. Voici un guide pour comprendre les notions de bases et choisir la meilleure solution de cache en fonction de votre besoin : 

  • Caches en amont de Drupal ;
  • Cache anonyme de page ;
  • Cache dynamique de page ;
  • Cache de « rendu » ;
  • Utilisation du cache dans son code ;

5 janvier – Ludovic Coullet @lcoullet
Sidr Module for Drupal: Responsive Menus and Regions : http://bit.ly/2sHG24D
L’optimisation mobile du web est un enjeu laborieux notamment pour un site complexe avec des menus déroulants exhaustifs. Le module contribué Drupal Responsive Menus est utile pour adapter les menus d’un site à la version mobile, en utilisant des styles CSS. Cependant, ce dernier ne fonctionne qu’avec des blocs de menu et ne prend pas en compte le logo ou d’autres blocs Drupal. Le module Sidr permet de rendre responsive un site en intégrant le logo du site, le menu et les blocs. En effet, ce dernier propose à l’administrateur de créer des blocs « déclencheurs » qui, lorsqu’on clique dessus, extraient un élément cible spécifié. Ce module est utile pour implémenter des menus réactifs. Il suffit de créer une ou plusieurs régions dédiées dans le thème puis de configurer un bloc Sidr pour le basculer. Pour aller plus loin, dans cet article vous découvrirez comment fonctionne ce module et comment l’implémenter dans votre projet Drupal.

15 janvier – Ludovic Coullet @lcoullet
How to decouple Drupal in 2018 : https://buff.ly/2DdK2OC
Voilà presque deux ans que le principe du découplage Drupal a envahi la communauté. Le concept de séparation du front-end et du back-end pour optimiser l’expérience utilisateur et améliorer la performance, en a séduit plus d’un. Si utiliser Drupal comme application monolithique est l’approche la plus courante, il y a toutefois plusieurs manières de procéder pour mettre en place une architecture découplée notamment grâce au large choix de frameworks et librairies JavaScript. Faisons le point : comment découpler Drupal en 2018 ? Plusieurs approches sont possibles :

  • Le site progressivement découplé : cette manière de procéder offre un équilibre entre les besoins éditoriaux (comme la gestion de la mise en page) et l’utilisation d’un framework JavaScript dans le front-end Drupal, pour étendre les possibilités au niveau de l’expérience utilisateur. Cette approche permet de conserver la plupart des fonctionnalités importantes de Drupal, où Drupal gère les fonctionnalités de gestion de contenu et JavaScript gère certaines sections de pages.
  • Le site entièrement découplé : cette approche implique une séparation complète entre la structure du contenu et sa présentation. Même si le découplage complet peut entraîner une perte de fonctionnalités prêtes à l’emploi comme l’édition de contenu in-place ou l’aperçu du contenu, cette approche connaît un franc succès en raison de la liberté et du contrôle qu’elle offre aux développeurs front-end.

Mais avant cela, il convient de se poser la question : Quel type de site vais-je construire ? En effet, en fonction de la nature du projet, certaines manières de découpler Drupal peuvent convenir ou non. Par exemple si le projet concerne la création d’un site Drupal autonome qui demande des fonctionnalités éditoriales, le découplage peut ne pas être pertinent...

18 janvier – Christophe Dugué @chdugue
La qualité de l'#UX dépend fortement de la vitesse de chargement des pages, d'où l'importance d'analyser la #performance de votre site. Voici un guide pratique pour optimiser la performance sur #Drupal8 : http://bit.ly/2mLMQYN
La performance est devenue un critère très sensible dans la construction d’un site web étant donné que la vitesse de chargement des pages impact directement la qualité de l’expérience utilisateur. Il existe principalement deux types de mise en cache :

  • La mise en cache côté client ;
  • La mise en cache côté serveur.

A l’exception de ces deux méthodes de mise en cache, il est possible de mettre en cache des pages dans la base de données, d’ailleurs c’est ce que permet Drupal organise par défaut. Avec Drupal 8 il est possible d’opter pour plusieurs outils et modules pour optimiser la performance, dont :

  • Les modules de cache inclus dans le core de Drupal tels que les modules comme Internal Dynamic Page Cache ou Internal Page Cache qui sont installés et activés par défaut. Internal Dynamic Page Cache est utile pour la mise en cache de données pour les utilisateurs connectés et les utilisateurs anonymes tandis que le module Internal Page Cache est utilisé pour les utilisateurs anonymes uniquement.
  • Les solutions externes de cache tels que CSS/JS Aggregation, Varnish, Memcach ou Redis. Tous ces outils permettent la mise en cache de pages. Chez bluedrop.fr, nous avons une préférence pour Varnish puisqu’il permet de mettre en place un processus de cache efficace pour les utilisateurs anonymes.
  • Utiliser MariaDB à la place de mysql. MariaDB transforme les données en informations structurées dans les applications. Cette technologie présente des avantages en termes de performance et de fonctionnalités telles qu’un moteur de stockage efficace. MariaDB prend en charge TokuDB qui gère les Big data pour des grandes entreprises. Les moteurs de bases de données MySQL (MyISAM et InnoDB) sont respectivement remplacés dans MariaDB par Aria et XtraDB. Aria propose une meilleure mise en cache quant à XtraDB, celui-ci élimine tous les problèmes d’InnoDB notamment la faible performance et la stabilité lente, en particulier dans les environnements à forte charge.
  • Utiliser Nginx à la place d’Apache. Ces deux derniers sont les serveurs web Open source les plus courants mais Nginx s’est démarqué d’Apache, grâce à sa rapidité et sa faible consommation en mémoire. Nginx sait gérer un grand nombre d’utilisateurs simultanés avec des ressources minimales.

Il existe d’autres bonnes pratiques à suivre pour minimiser la consommation de ressources et améliorer la performance comme : désactiver les modules inutiles, mettre à jour le core ainsi que les modules contribués, utiliser le module Devel qui permet d’analyser les requêtes pour repérer les problèmes... Et surtout... Traquer les fichiers CSS ou JS non minifiés par les modules contribués !

Pattern Lab

15 janvier – Christophe Dugué @chdugue
Voyage dans le #frontend de #Drupal avec @patternlabio : http://bit.ly/2EMSiGH
Pattern Lab est un outil permettant de créer des guides de styles dynamiques en responsive Design.  La particularité de cet outil est qu’il est basé sur un pattern d’Atomic Design. Le principe d’Atomic Design permet de bien séparer tout le webdesign du projet en différentes parties pour faciliter la maintenabilité. Les éléments graphiques sont découpés et classifiés de la manière suivante :

  • Les atomes représentent les plus petites briques graphiques tels que les couleurs, les typographies …
  • Les molécules regroupent un ensemble d’atomes formant une partie du design, comme par exemple une ligne de formulaire.
  • Les organismes concernent les blocs fonctionnels complets du site comme par exemple le formulaire de recherche.
  • Le template est un modèle de page mais sans contenu ;
  • La page représente la page avec le contenu complet c’est-à-dire un template intégré avec le contenu, telle que la voit l’utilisateur dans une situation réaliste. 

Cette approche de découpage et de classification favorise la réutilisation des éléments. En plus d’avoir une meilleure organisation du code, l’Atomic Design permet une meilleure cohérence du design et de réaliser plus rapidement des guides de style de qualité. Voici un tutoriel, qui vous permettra d’utiliser Pattern Lab pour vos projets Front-end Drupal.  

ReactJS

25 janvier – Christophe Dugué @chdugue
#Drupal et #ReactJS : L'environnement (1/3) http://bit.ly/2Gf6TYH  - Les principales notions (2/3) http://bit.ly/2Gf6YLZ  - Traductions et pièges (3/3) http://bit.ly/2GfjsmV  - #ContentaCMS
Voici une série de posts expliquant les fondements sur le découplage React et Drupal, en réalisant une application web multilingue de guide audio pour les visites dans les Musées, entièrement découplée et en étant hébergée sur un autre domaine que celui de Drupal. Découvrez les trois posts :

  • Le premier tutoriel concerne l’installation de l’environnement à savoir : l’installation et la configuration de Drupal, la mise en place d’un webservice avec le module JSON API et enfin l’installation du kit starter React qui contient les outils de développement tels que Webpack, Babler et Browsersync.
  • Le second tutoriel explique les concepts de bases pour mettre en place le back-end avec Drupal et décrit notamment la création d’un type de contenu audio traduisible avec des champs supplémentaires. Ce dernier expose également les notions de bases de React (route, composant, extraction de données…) en décrivant les étapes pour afficher une liste et une page détaillée de contenu audio.
  • Le troisième tutoriel se concentre sur les problèmes de traduction et les différents pièges que l’on peut rencontrer avec Drupal et React (filtrage des termes de taxonomie, tri personnalisé, prise en charge du multilinguisme avec la localisation et l’internationalisation, les styles des images, le déploiement en production…)

JavaScript

3 janvier – Christophe Dugué @chdugue
#Javascript 2018 : ça se confirme pour #ReactJS et #VueJS - http://bit.ly/2DVBRTx  #Frontend #PWA
Dans monde le JavaScript, quel framework semble remporter le bras de fer pour 2018 ? Faisons le point :

  • React semble être LE framework de 2018. Ce dernier a déjà connu une certaine popularité en 2017 et continue de conquérir de nombreux développeurs laissant de côté de nombreux Frameworks JavaScript comme Angular.
  • Vue.JS risquerait-il de détrôner Angular ? Vue.JS a fait l’objet de nombreux articles de veille technologique depuis ces douze derniers mois en raison de son succès grandissant, témoigné par le nombre conséquent de téléchargements (plus de 1.000K de téléchargements en novembre 2017) et d’étoiles sur Github. Si Vue.JS n’a pas atteint le potentiel et le succès de React (environ 7.000K de téléchargements en novembre 2017), le framework JavaScript semble être en bonne voie pour détrôner le très connu AngularJS, avec des résultats de téléchargements assez serrés.

Découvrez dans ce post, les autres technologies sur lesquelles il faudrait jeter un coup d’œil en 2018.

CSS

7 janvier – Christophe Dugué @chdugue
Le #framework #css #responsive le plus léger au monde - #Lit - 407 bytes - http://bit.ly/2ADYs53  - #FrontEnd
Découvrez le plus petit framework CSS responsive au monde pour construire des front-end en Responsive Design : Lit. Ce dernier ne pèse que 395 bytes (après minification et compression) et propose les fonctionnalités de base que l’on retrouve chez d’autres mini-frameworks CSS comme Skeleton (grille, boutons, formulaires et quelques styles supplémentaires pour la mise en forme des listes, des codes source, et des tableaux).  Découvrez ce tutoriel qui explique les bases pour utiliser ce petit outil qui peut s’avérer intéressant pour construire facilement vos petits projets « mobile-first » pour lesquels vous ne voudriez pas vous encombrer de solutions lourdes nécessitant d’être compilées. 

HTML 5.2

11 janvier – Christophe Dugué @chdugue
Quoi de neuf dans #html 5.2 : http://bit.ly/2Fq9Bu0  - Mention particulière à <dialog> :)
Il y a quelques mois, HTML5.2 est finalisée et devient la nouvelle recommandation officielle du W3C. Cette nouvelle recommandation a fait l’objet d’un nettoyage important des éléments qui ne font plus partie de la plateforme web moderne, d’une correction des bogues, mais également d’ajouts de nouvelles fonctionnalités. Parmi les améliorations majeures introduites dans HTML 5.2, nous citons :

  • L’API Payment Request qui permettra de faciliter le commerce sur le web en proposant aux commerçants d’utiliser une ou plusieurs méthodes de paiement avec une intégration minimale. Par ailleurs, les navigateurs serviront d’intermédiaires entre les parties de la transaction.
  • Le Content Security Policy qui vise à protéger les utilisateurs, en définissant un mécanisme par lequel les développeurs web peuvent contrôler les ressources d’une page pour récupérer ou exécuter. Le CSP couvre également plusieurs stratégies de sécurité notamment que les développeurs pourront verrouiller une application par injection de contenu (ex : XSS) pour réduire les risques de vulnérabilité.
  • De nouveaux travaux sont incorporés à ARIA (Accessible Rich Internet Applications) pour permettre d’aider les développeurs à concevoir une meilleure expérience utilisateur notamment pour les personnes atteintes d’un handicap.
  • La définition de l’élément « main » a été mise à jour pour prendre en charge les conceptions en Responsive Design. De plus, l’élément style peut être utilisé à l’intérieur du body.
  • L’introduction du nouvel élément <dialog> permettra de bénéficier d’une boîte de dialogue native et accessible.

… et quelques autres nouveautés. 

Nuxt.js

11 janvier – Christophe Dugué @chdugue
Next + Vue = Nuxt.js | #Nuxt.js 1.0 est arrivé !! - Principes, histoire, nouveautés ici : http://bit.ly/2FoeVhv  - #VueJS #FrontEnd
Nuxt.js 1.0 est enfin disponible. Ce dernier un framework est basé sur les dernières fonctionnalités de Vue.JS (vue-router, vuex et vue-meta) et Next.JS, permettant de créer rapidement une application web sans avoir de configuration à écrire. Nuxt.JS apporte également quelques nouvelles fonctionnalités et de corrections de bugs, et promet une meilleure stabilité et performance. Les nouveautés dans la version 1.0 sont, entre autres :

  • Les fichiers commençant par un ‘_’ sont ignorés ;
  • Route.meta est dorénavant disponible ;
  • Il est possible de définir un middleware comme fonction ;
  • Vous avez dorénavant accès à this.$router et this.app ;
  • Vous pouvez définir body:true dans votre head.script[] pour déplacer vos scripts à la fin de <body> ;
  • La nouvelle configuration build.styleResources est disponible et permet d’importer automatiquement les ressources du pré-processeur vers les composants Vue.

… à tester !

 

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