Drupal 8 - Découplez votre site grâce à une API afin de mettre à disposition votre contenu
3 j'aime1,577 vues
Le document aborde le découplage des applications et la mise en place d'API, en se concentrant sur Drupal comme solution pour gérer les contenus. Il décrit les avantages et inconvénients de l'approche headless ainsi que les stratégies pour concevoir des applications découplées, tout en proposant des exemples de modules et de bonnes pratiques. Enfin, il insiste sur l'importance d'une API bien documentée et de la préparation des contenus au début du projet.
![http://example.com/jsonapi/node/article?sort=created&filter[status][value]=1
API Namespace
Bundle
Type d’entités Filtres](https://image.slidesharecdn.com/drupagora-lefuturdedrupal-creerunefoispublierpartout-170703075709/85/Drupal-8-Decouplez-votre-site-grace-a-une-API-afin-de-mettre-a-disposition-votre-contenu-47-320.jpg)
Drupal 8 - Découplez votre site grâce à une API afin de mettre à disposition votre contenu
- 2. SOMMAIRE 1. Retour sur 2014 et l’avenir du web à cette époque 2. Ce que cela signifie de découpler son site 3. Comment mettre en place une telle stratégie avec Drupal 4. Faire du content-as-a-service 5. Quels projets pour une telle architecture
- 4. 2014, CE QUE L’AVENIR NOUS RÉSERVAIT 1.
- 13. Drupal et WP peuvent alors être considérés comme des solutions monolithiques • Themingcompliqué • Courbe d’apprentissage trop grande • Manque de ressources disponibles • Frustration des Dev Front
- 18. • Pas de front-end, ce n’est qu’un endroit pour stocker du contenu • Limité en terme d’outils d’édition • Très peu adaptable aux besoins, voire non modifiable • Délaisse toutes les problématiques de présentation aux développeurs front-end Pour le meilleur et pour le pire
- 19. TECHNIQUEMENT, DÉCOUPLER SON SITE CA VEUT DIRE QUOI ? 2.
- 20. • Un CMS utilisé comme gestionnaire de contenus • Des contenus sont accessibles via une API REST • Une API REST retourne bien souvent du JSON • Une interface web pour l’édition de contenu Back-end • Une interface graphique développée de A-Z • Bâti avec des technologies Javascript modernes • Une consommation de contenus via des webservices, • Une transformation de JSON en HTML Front-end Serveur Client Requête Réponse
- 21. Couplé, Découplé & Co « Couplé » ou « Classic », est l’utilisation normale de l’outil. Drupal est chargé de générér du HTML qu’il renverra au client L’autre option est le mode découplé, ou Drupal n’est chargé que de mettre à disposition des données et l’équipe front-end de les consommer et afficher. Il existe une alternative, un mixte entre les deux appellée « Progressively Decouple ». Dans ce cas, Drupal est utilisé comme outil de génération de contenu pour l’équipe front-end tout en étant capable de fournir de la donnée via une API pour des éléments de pages.
- 22. Avantages du Headless • Flexibilité et contrôle total pour les devs Fronts (plus limité par Drupal et Twig) • Le front devient plus facilement interchangeable. • Pas besoin de migrer des contenus pour changer le front. • Permet de faire travailler l’équipe Back-end en parallèle de l’équipe Front- end • Moins de dépendance envers les spécialistes Drupal • Un endroit unique de contribution de contenus
- 23. Inconvénients du Headless • Les fonctionnalités «out-of-the-box » deviennent (content preview, action links, in place-enditing) • Il faudra réinventer la roue (password reset) • D’un site web on passe alors à un écosystème (coût de maintenance, coût de hosting, coût d’évolution) • Une application composée de plusieurs couches augmente aussi la complexité de celle-ci (debug plus compliqué. fort besoin de loguer les échanges)
- 24. Inconvénients du Headless • Une séparation stricte entre les données et l’affichage doit être faite et perdurer (une modification de structure dans le Back-end peut avoir des conséquences sur l’une des applications front) • Potentiellement besoin d’une équipe technique plus importante que dans une approche classique. • Bye bye aux fonctionnalités de SEO native
- 25. EN PRATIQUE, DÉCOUPLER DRUPAL, ÇA DONNE QUOI ? 3.
- 30. Drupal 7 • Services https://www.drupal.org/project/Services • Views Datasource https://www.drupal.org/project/views_datasource • RESTWS https://www.drupal.org/project/restws • RESTful https://www.drupal.org/project/RESTful • Code custom
- 31. Drupal 8 Intègre désormais plusieurs modules permettant de mettre en œuvre une API REST • REST module • Serializer • HAL • Basic Authentification
- 32. REST UI La communauté a crée un module REST UI permettant de réaliser les mêmes actions qu’un développeur devrait écrire directement depuis une UI vous permettant alors de choisir les méthodes disponibles (GET, POST, PATCH, DELETE), les formats (json, xml) renvoyés, et les méthodes d'authentification (cookie ou http si le module est activé) supportées
- 35. Views Permet de mettre à disposition des ressources et collections de ressources Avantages • Simple à utiliser • Facile de créer un nouveau endpoint Inconvénients • Peut-être se retrouver limité • Pas des plus performant pour des requêtes complexes
- 40. REST avec les modules core • Web services RESTful traditionnel, centré sur les ressources et des collections. • Permet plusieurs formats: JSON, HAL+JSON • Peut exposer autre chose que des entités • Peut être étendu au moyen de plugins
- 41. Relaxed web services Améliore les modules core de D8 • Traduction • Révisions • Fichiers attachés • Gère les réferences UUID Permet de faire offline. Inspired de CouchDB, le module permet de créer une approche "offline-first” en utilisant une librairie telle-que PouchDB ou Hood.ie.
- 42. Json API • Un module contrib en accord avec le standard http://jsonapi.org/ • Expose toutes les ressources (entitées) contenues dans Drupal. • Permet de filtre/trier/paginer/ des collections • Injecte les chemins des entités liées lors de la réponse • Permet de réduire le nombre de requêtes HTTP dues à la connaissance des relations • Contenu plus lisible
- 43. Json API Extras • Permet d’activer ou de désactiver certaines ressources • Surcharge le nom des ressources. Exemple: article à la place de node--article. • Surcharge le chemin d’accès aux ressources: /jsonapi/node/article devient /api/articles • Permet de désactiver certains champs • Permet d’améliorer le rendu des champs, comme pour les champs date
- 44. Nested data
- 46. GraphQL • Expose toutes les entités Drupal selon le standard graphql.org standard. (non-RESTful) • Permet de filtre/trier/paginer/ des collections • Injecte les chemins des entités liées lors de la réponse • Réduit le nombre de requêtes http • Dès l’activation du module toutes les données sont accessibles (contrôle d’accès réalisé par Entity Access API)
- 50. Reservoir • Une distribution signée Acquia • Un dépôt de contenus, configuré pour fonctionner avec JSON API et OAuth2. • Fonctionnelle dès son installation • 4 axes : Contenus, API, Modélisation de contenu, Contrôle d’accès
- 52. Contenta CMS • Une distribution orienté API-first • Maintenu par une communauté de contributeur • Starter kit pour mettre en place une architecture découplé • Ce veut, simple et ne nécessitant que peut de configuration et sans avoir besoin de connaître Drupal • Dispose d’exemples Elm, React, Ember, Ionic, Angular
- 55. METTRE EN PLACE UNE STRATEGIE CONTENT-AS-A- SERVICE 4.
- 57. Stratégie de contenus (Phase 1) • Analysez l’existant • Pensez contenus et composants • Imaginez différents rendus (page, bloc, list, teaser…) • Déterminez les outils d’édition (prévisualisation, système de révisions, publication à date…) • Utilisez des contenus dédiés pour les landing pages • Réfléchissez aux taxonomies à mettre en place pour structurer votre contenu
- 58. Stratégie de contenus (Phase 2) • Convertissez les résultats de votre audit au format de données de Drupal • Pensez au responsive avant tout, surtout pour les images • Utilisez les bons types de champs • Servez vous des champs « entityréférences » dès que possible
- 59. Une API de qualité Une API c’est un contrat déterminé entre le Back-end et le Front-end • Documentée • Versionnée • Testable • Permettre les réponses partielles pour filtrer ou limiter les résultats • Résiliente • Utiliser une stratégie de cache intelligente. • Loguer les requêtes entrantes et les réponses
- 61. - S’il y a plus d’une application qui consomme du contenu - Si vous n’avez pas d’expertise Drupal en interne - Si l’équipe front a besoin d’un contrôle total de la structure des pages - Si votre projet est composé de plusieurs équipes
- 65. liens & références • Tag #decoupled du blog de Dries Buytaert Dries Buytaert http://buytaert.net/tag/decoupled • Comment mettre en place un site Drupal « Headless » Simon Georges https://makina-corpus.com/blog/metier/2017/comment-mettre-en-place-un-site-drupal- headless • Le blog de Yineo Yann Boisselier https://yineo.fr/
- 66. Liens & Références • Distribution Reservoir https://github.com/acquia/reservoir • Contentacms initiative http://contentacms.org • Contenta Makes Your Content Happy Lullabot https://lullabot.com/articles/contenta-makes-your-content-happy • 7 Ways to Make Your API More Successful - Daniel Jacobson http://www.danieljacobson.com/blog/231
- 67. Liens & Références • How should you decouple Drupal? http://buytaert.net/how-should-you-decouple-drupal • Json API, module Drupal https://drupal.org/project/jsonapi • JSONAPI, le standard pour construire des APIs en JSON http://jsonapi.org • REST 2.0 Is Here and Its Name Is GraphQL https://sitepoint.com/rest-2-0-graphql/ • GraphQL for Drupal (Brouillon) https://fgm.gitbooks.io/graphql-for-drupal
- 68. CONCLUSION
- 69. #tl;dr • Drupal peut être utilisé de façon couplée (traditionnelle), découplée ou un mixte entre les deux • Le headless n’est pas toujours une bonne option • Le core fournit une solution REST et il est possible de l’étendre • Des alternatives existent telles que JSONAPI et GraphQL • Passer du temps en début de projet à analyser et préparer le terrain pour les contenus • Développez une API de qualité et investissez du temps sur la documentation
- 70. Credit • Images - https://www.pexels.com • Icones - https://thenounproject.com/
- 71. Questions ? 71
- 72. MERCI 72 t w i t t er : @ dr upagor a Drupagora 2017 – Créer une fois, publier partout grâce au découplage d’applications et à la mise en place d’API - Julien Dubreuil Twitter : #drupagora