CRÉERUNEFOIS,PUBLIERPARTOUTGRÂCEAUDÉCOUPLAGED’APPLICATIONSETÀ LAMISEENPLACED’API

JulienDubreuilConsultantDrupalspécialisédanslesproblématiquesBack-end,industrialisationetqualité

SOMMAIRE1. 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

JulienDubreuilContributeurDrupaldepuis2009

Co-organisateurdugroupeutilisateursDrupalàParisdepuis2011

@juliendubreuilJuliendubreuil.fr

ConsultantDrupalspécialisédanslesproblématiquesBack-end,industrialisationetqualité

2ansentantqu’indépendant3anschezCommerceGuys3ansauFigaro

2014, CE QUE L’AVENIR NOUS RÉSERVAIT

1.

ApplicationsmonolithiquesVS

Applicationmicro-services

DrupaletWPpeuvent alors êtreconsidéréscommedessolutions

monolithiques

• Themingcompliqué

• Courbed’apprentissagetropgrande

• Manquederessourcesdisponibles

• FrustrationdesDevFront

DesWebhooks quipermettentàl’applicationconsommantl’APIderéagirencasdemodification

UneAPIRESTquiretournebiensouventduJSON

DescontenusaccessiblesviauneAPIREST

UnCMSdansleclouddustockagedescontenus

Uneinterfacewebpourl’éditiondecontenus Content-as-

a-Service(CaaS)

Latendance dessolutionsCaaS

Pourleséquipestechniques

Pourlesdéveloppeurs

Pourlesentreprises

SéparerlesproblématiquesBack-endetFront-end

Permetauxéquipesdetravaillerenparallèle.

Pasdepertedetempsàmonterencompétence

Utilisationdesdernièrestechnosettechniques

Mutualiseretréutiliserleurscontenus

Publierinstantanémentsurplusieursplateformesenmêmetemps

• Pasdefront-end,cen’estqu’unendroit

pourstockerducontenu

• Limitéentermed’outilsd’édition

• Trèspeuadaptableauxbesoins,voirenon

modifiable

• Délaissetouteslesproblématiquesde

présentationauxdéveloppeursfront-end

Pourlemeilleuretpourlepire

TECHNIQUEMENT, DÉCOUPLER SON SITE CA VEUT DIRE QUOI ?

2.

• UnCMSutilisécommegestionnairedecontenus• DescontenussontaccessiblesviauneAPIREST• UneAPIRESTretournebiensouventduJSON• Uneinterfacewebpourl’éditiondecontenu

Back-end• UneinterfacegraphiquedéveloppéedeA-Z• BâtiavecdestechnologiesJavascript

modernes• Uneconsommationdecontenusviades

webservices,• UnetransformationdeJSONenHTML

Front-end

Serveur Client

Requête

Réponse

Couplé,Découplé&Co

« Couplé »ou« Classic »,estl’utilisationnormaledel’outil.Drupalest chargédegénérér duHTMLqu’ilrenverra auclient

L’autreoptionestlemodedécouplé,ouDrupaln’estchargéquedemettreàdisposition desdonnéesetl’équipe front-end delesconsommeretafficher.

Ilexisteunealternative,unmixteentrelesdeuxappellée « Progressively Decouple ».Danscecas,Drupalestutilisécommeoutildegénérationdecontenupour l’équipe front-end toutenétantcapabledefournirdeladonnée viauneAPIpourdesélémentsdepages.

Avantages duHeadless• Flexibilitéetcontrôletotalpourlesdevs Fronts(pluslimitéparDrupalet

Twig)

• Lefrontdevientplusfacilementinterchangeable.

• Pasbesoindemigrerdescontenuspourchangerlefront.

• Permetdefairetravaillerl’équipeBack-endenparallèledel’équipeFront-

end

• MoinsdedépendanceenverslesspécialistesDrupal

• Unendroituniquedecontributiondecontenus

InconvénientsduHeadless• Lesfonctionnalités«out-of-the-box »deviennent(contentpreview,action

links,inplace-enditing)

• Ilfaudraréinventerlaroue(password reset)

• D’unsitewebonpassealorsàunécosystème(coûtdemaintenance,coût

dehosting,coûtd’évolution)

• Uneapplicationcomposéedeplusieurscouchesaugmenteaussila

complexitédecelle-ci(debug pluscompliqué.fortbesoindeloguerles

échanges)

InconvénientsduHeadless• Uneséparationstricteentrelesdonnéesetl’affichagedoitêtrefaiteet

perdurer(unemodificationdestructuredansleBack-endpeutavoirdes

conséquencessurl’unedesapplicationsfront)

• Potentiellementbesoind’uneéquipetechniqueplusimportantequedans

uneapprocheclassique.

• ByebyeauxfonctionnalitésdeSEOnative

EN PRATIQUE, DÉCOUPLER DRUPAL, ÇA DONNE QUOI ?

3.

Drupal7

• Services https://www.drupal.org/project/Services

• ViewsDatasource https://www.drupal.org/project/views_datasource

• RESTWS https://www.drupal.org/project/restws

• RESTful https://www.drupal.org/project/RESTful

• Codecustom

Drupal8IntègredésormaisplusieursmodulespermettantdemettreenœuvreuneAPI

REST

• RESTmodule

• Serializer

• HAL

• BasicAuthentification

RESTUILacommunauté a crée unmoduleRESTUIpermettant deréaliser lesmêmes

actionsqu’undéveloppeurdevraitécriredirectementdepuisuneUI

vouspermettantalorsdechoisirlesméthodesdisponibles(GET,POST,

PATCH,DELETE),lesformats(json,xml)renvoyés,etlesméthodes

d'authentification(cookieouhttpsilemoduleestactivé)supportées

ViewsPermetdemettreàdispositiondesressourcesetcollectionsderessources

Avantages

• Simpleàutiliser

• Faciledecréerunnouveauendpoint

Inconvénients

• Peut-êtreseretrouverlimité

• Pasdesplusperformantpourdesrequêtescomplexes

RESTaveclesmodulescore

• WebservicesRESTful traditionnel, centrésurles

ressourcesetdescollections.

• Permetplusieursformats:JSON,HAL+JSON

• Peutexposerautrechosequedesentités

• Peutêtreétenduaumoyendeplugins

RelaxedwebservicesAméliore lesmodulescoredeD8

• Traduction

• Révisions

• Fichiers attachés

• Gère lesréferences UUID

Permet defaireoffline.InspireddeCouchDB,lemodule

permet decréer une approche "offline-first”enutilisant une

librairie telle-que PouchDBou Hood.ie.

Json API• Unmodulecontrib enaccordaveclestandard

http://jsonapi.org/

• Exposetouteslesressources(entitées) contenuesdans

Drupal.

• Permetdefiltre/trier/paginer/ descollections

• Injectelescheminsdesentitésliéeslorsdelaréponse

• PermetderéduirelenombrederequêtesHTTPduesà

laconnaissancedesrelations

• Contenuplus lisible

Json APIExtras• Permet d’activer ou dedésactiver certaines ressources

• Surchargelenomdesressources.Exemple:articleà laplacedenode--article.

• Surchargelechemin d’accès auxressources:/jsonapi/node/article devient

/api/articles

• Permet dedésactiver certains champs

• Permet d’améliorer lerendu deschamps,comme pour leschampsdate

Nesteddata

Donnéespluspropresetpluslisibles

GraphQL• ExposetouteslesentitésDrupalselon lestandard

graphql.orgstandard.(non-RESTful)

• Permetdefiltre/trier/paginer/ descollections

• Injectelescheminsdesentitésliéeslorsdelaréponse

• Réduitlenombrederequêteshttp

• Dèsl’activationdumodule touteslesdonnéessont

accessibles(contrôled’accèsréaliséparEntity AccessAPI)

http://example.com/jsonapi/node/article?sort=created&filter[status][value]=1

APINamespace

Bundle

Typed’entités Filtres

Reservoir

• UnedistributionsignéeAcquia

• Undépôtdecontenus,configurépour

fonctionneravecJSONAPIetOAuth2.

• Fonctionnelledèssoninstallation

• 4axes:Contenus,API,Modélisationdecontenu,

Contrôled’accès

ContentaCMS• UnedistributionorientéAPI-first

• Maintenuparunecommunautédecontributeur

• Starterkitpourmettreenplaceunearchitecture

découplé

• Ceveut,simpleetnenécessitantquepeutde

configurationetsansavoirbesoindeconnaîtreDrupal

• Disposed’exemplesElm,React,Ember,Ionic,Angular

METTRE EN PLACE UNE STRATEGIE CONTENT-AS-A-SERVICE

4.

Unestratégiedecontenusrobuste

&APIdequalité

Stratégiedecontenus(Phase1)• Analysezl’existant

• Pensezcontenusetcomposants

• Imaginezdifférentsrendus(page,bloc,list,teaser…)

• Déterminezlesoutilsd’édition(prévisualisation,systèmederévisions,

publicationàdate…)

• Utilisezdescontenusdédiéspourleslandingpages

• Réfléchissezauxtaxonomiesàmettreenplacepourstructurervotre

contenu

Stratégiedecontenus(Phase2)

• ConvertissezlesrésultatsdevotreauditauformatdedonnéesdeDrupal

• Pensezauresponsiveavanttout,surtoutpourlesimages

• Utilisezlesbonstypesdechamps

• Servezvousdeschamps« entity références »dèsquepossible

Une APIdequalitéUneAPIc’estuncontratdéterminéentreleBack-endetleFront-end

• Documentée

• Versionnée

• Testable

• Permettrelesréponsespartiellespour filtreroulimiterlesrésultats

• Résiliente

• Utiliserunestratégiedecacheintelligente.

• Loguer lesrequêtesentrantesetlesréponses

QUELLES OCCASIONS POUR DÉCOUPLER UNE APPLICATION ?

5.

- S’ilyaplusd’uneapplicationquiconsommeducontenu

- Sivousn’avezpasd’expertiseDrupaleninterne

- Sil’équipefrontabesoind’uncontrôletotaldelastructuredespages

- Sivotreprojetestcomposédeplusieurséquipes

POUR ALLERPLUS LOIN6.

liens&références

RESTful WebAPIsServicesforaChangingWorldO'ReillyMediaSeptembre2013

liens&références• Tag#decoupleddublogdeDriesBuytaertDriesBuytaerthttp://buytaert.net/tag/decoupled

• CommentmettreenplaceunsiteDrupal« Headless »SimonGeorgeshttps://makina-corpus.com/blog/metier/2017/comment-mettre-en-place-un-site-drupal-headless

• LeblogdeYineoYannBoisselierhttps://yineo.fr/

Liens&Références• DistributionReservoirhttps://github.com/acquia/reservoir

• Contentacms initiativehttp://contentacms.org

• ContentaMakes Your ContentHappyLullabothttps://lullabot.com/articles/contenta-makes-your-content-happy

• 7Ways toMake Your APIMoreSuccessful -DanielJacobsonhttp://www.danieljacobson.com/blog/231

Liens&Références• Howshould you decouple Drupal?http://buytaert.net/how-should-you-decouple-drupal

• Json API,moduleDrupalhttps://drupal.org/project/jsonapi

• JSONAPI,lestandardpourconstruiredesAPIsenJSONhttp://jsonapi.org

• REST2.0IsHere andIts NameIsGraphQLhttps://sitepoint.com/rest-2-0-graphql/

• GraphQL forDrupal (Brouillon)https://fgm.gitbooks.io/graphql-for-drupal

CONCLUSION

#tl;dr• Drupalpeutêtreutilisédefaçoncouplée(traditionnelle),découpléeouun

mixteentrelesdeux• Leheadless n’estpastoujoursunebonneoption• Lecore fournitunesolutionRESTetilestpossibledel’étendre• DesalternativesexistenttellesqueJSONAPIetGraphQL• Passerdutempsendébutdeprojetàanalyseretpréparerleterrainpour

lescontenus• DéveloppezuneAPIdequalitéetinvestissezdutempssurla

documentation

Credit• Images- https://www.pexels.com• Icones - https://thenounproject.com/

Questions ?

71

MERCI

72

t w i t t e r : @ dr upa gor a

Drupagora 2017 – Créer une fois,publier partoutgrâceaudécouplage d’applications età lamise enplaced’API - Julien DubreuilTwitter : #drupagora