Headless Drupal en pratique

Simon Morvan
 https://www.drupal.org/u/garphy
 @simonmorvan
http://www.icilalune.com/
2

Pourquoi Drupal ?
Modélisation du contenu
Richesse fonctionnelle
Multilingue
E-commerce
Communauté
Back-o ce
...
4 . 2

Canaux multiples
Web
Applications
Di usion automatique
IoT, AR, ...
4 . 6

Différents composants
Backend: stable, pérenne (investissement) ;
Frontend(s): évolutif et rapidement à jour.
Cycles de développement di érents.
4 . 7

Choix technologique
Angular
Ember
React
Vue.js
...
4 . 8

Drupal 7, Drupal Commerce, AngularJS
https://www.patrickroger.com
5 . 2

Drupal 7, Node.js, AngularJS
https://www.entrainement-athle.fr
5 . 3

Drupal 8, Angular 4, ThreeJS
https://www.icilalune.com
5 . 4

Drupal
Modèle de contenu
Logique, Contrôle
Interface visuelle
6 . 2

Headless Drupal
Modèle de contenu
Logique, Contrôle
Interface visuelle ⭬ API
6 . 3

Solution SaaS
Contentful
Backendless
GraphCMS
Tchop
...
6 . 5

L'équation headless :
un projet = deux projets
(voire plus)
7 . 2

Composants
Drupal (+PHP, MySQL)
Angular (+Javascript, Sass, Webpack)
Node.js (+Javascript, NPM)
7 . 3

Conséquence(s)
Prévoir plus de temps
Hébergement disparate
Autorise un recrutement plus large
Permet un certain parallélisme
7 . 4

API pour Drupal 8
REST (core)
JSON API
GraphQL
Pour Drupal 7 : Services (& Services Entity)
ou RestWS
8 . 2

REST
Core
Entity normalizer
XML, JSON, ...
Create, Retrieve, Update, Delete
Pas de collections ⭬Views
8 . 3

Exemple
/node/3?_format=json
{
"nid": [
{
"value": 3
}
],
"uuid": [
{
"value": "a75a24f1-241a-4e77-9e2e-903e5f5f8563"
}
],
"vid": [
{
"value": 3
}
],
"langcode": [
{
"value": "en"
}
],
"type": [
{
"target_id": "container",
"target_type": "node_type",
"target_uuid": "1e009f03-6fc7-456f-8ce6-e2d911860b59"
}
],
"revision_timestamp": [
{
"value": "2017-09-14T14:25:09+00:00",
"format": "Y-m-dTH:i:sP"
}
],
"revision_uid": [
{
"target_id": 1,
"target_type": "user",
"target_uuid": "a3015686-d17a-44db-8231-c4a77fab44b9",
"url": "/user/1"
}
],
"revision_log": [],
"status": [
{
"value": true
8 . 4

Views REST export
GET /rest/node?_format=json
8 . 5

Des issues qui restent
File
Test coverage
Cache
Authentication
...
8 . 6

GraphQL
A query language for your API
http://graphql.org/
https://www.drupal.org/project/graphql
Beta!
8 . 7

Query
Result
{
hero {
name
height
mass
}
}
{
"hero": {
"name": "Luke Skywalker",
"height": 1.72,
"mass": 77
}
}
8 . 8

A speci cation for building APIs in JSON
«your anti-bikeshedding tool»
http://jsonapi.org/
https://www.drupal.org/project/jsonapi
8 . 9

JSON API
CRUD
Collection ( ltrage, pagination)
Inclusion des références
8 . 10

JSON API ⬄ Drupal
Attributs ⭬ Fields
Relations ⭬ Entity Reference
Collections ⭬ Views
8 . 11

Typage
Type: Entity Type + Bundle
Notation: node--article
/jsonapi/node/article
Deux content-types: deux types
Pas de collection pour plusieurs types
https://www.drupal.org/node/2886540
8 . 12

Entité
/jsonapi/node/article/42
{
"data": {
"type": "node--article",
"id": "42",
"attributes": {
"title": "First node",
"created": 2147483647
},
"relationships": {
"author": {
"data": { "type": "user--user", "id": "9" }
}
},
}
}
8 . 13

Collection
/jsonapi/node/article
{
"data": [
{
"id": "42",
"attributes": {...}
},
{
"id": "84",
"attributes": {...}
}
]
}
8 . 14

Inclusion
/api/node/product/4?include=field_category
{
"data": {
"id": 4,
"type": "node--product",
"attributes": ...,
"relationships": {
"field_category":{
"data":{
"type":"taxonomy_term--category",
"id":"3"
}
}
}
},
"included": [{
"id": 3,
"type": "taxonomy_term--category",
"attributes": {
"name": "Drupalcamp goodies",
...
}
}]
}
8 . 15

Filtre
ltrage
également tri, pagination
GET /jsonapi/node/article?
filter[published][condition][path]=status
&filter[published][condition][value]=1
&filter[published][condition][operator]=%3D // URL encoded "="
GET /jsonapi/node/product?
filter[published][condition][path]=field_category.id
&filter[published][condition][value]=42
&filter[published][condition][operator]=%3D // URL encoded "="
8 . 16

Documentation
https://www.drupal.org/docs/8/modules/json-api
8 . 17

Liste
loadNews(){
this.http.get('/jsonapi/node/article?sort=-created')
.subscribe(result => {
this.nodes = result.data;
});
}
<ul>
<li *ngFor="let node of nodes" (click)="loadNode(node.id)">
{{node.attributes?.title}}
</li>
</ul>
8 . 19

Detail
loadNode(id){
this.http.get(['/jsonapi/node/article',id].join('/')])
.subscribe(result => {
this.node = result.data;
});
}
<div>
<h1>{{node?.attributes?.title}}</h1>
<div [innerHTML]="node?.body?.value">
</div>
</div>
8 . 20

Distributions
Contenta
http://www.contentacms.org/
Reservoir
https://github.com/acquia/reservoir
⭬ JSON API
8 . 21

SPA
Single Page Application
<html>
<body>
<script src="app.js"></script>
</body>
</html>
9 . 2

Deep linking
Chaque contenu devrait avoir sa propre URL
Google
Bookmarks
Précédent/Suivant
Réseaux sociaux
9 . 3

Techniques
URL Fragment
https://www.escapefactory.fr/#!/fr/news/halloween
<a href="#!/fr/bowling/20-pistes-de-bowling">Bowling</a>
History API
https://www.icilalune.com/fr/articles
history.pushState({}, "Contact", "/fr/contact")
9 . 4

Routing
Fonctionnement par motif
 Dé nit les états
 Modélise les paramètres
 Couplage avec l'URL
const appRoutes: Routes = [
{ path: 'news/:id', component: NewsDetailComponent },
{ path: 'news', component: NewsListComponent },
{ path: '', redirectTo: '/news' },
{ path: '**', component: PageNotFoundComponent }
];
9 . 5

From scratch
Base de donnée: Clé primaire 42
API: /api/article/42
Front: https://fromscratch.wtf/news/42
9 . 6

Content Management System
L'URL désigne le contenu.
L'URL doit être stable.
L'URL est une propriété du contenu.
9 . 8

Problématique
https://www.icilalune.com/fr/articles/2017/04/objectif-montreal
https://www.icilalune.com/fr/breaking-news
Activer le bon contexte ("newsDetail")
Charger le bon contenu (nid = 42)
9 . 9

Résolution de l'URL
Contextes indépendants de l'URL
Service (API) spécialisé
9 . 10

Routing, revisité
Pour Angular et React : UI-Router
https://ui-router.github.io/
9 . 11

Etats de l'application
export const STATES: any[] = [
{
name: 'front',
component: FrontPageComponent,
params: {
id: {
type: 'string'
}
}
},
{
name: 'newsList',
component: NewsListComponent
},
{
name: 'newsDetails',
component: NewsDetailComponent,
params: {
id: {
type: 'string'
}
},
}]
9 . 12

Path request
https://backend.icilalune.com/api/path?path=/fr/articles/2017/04/objectif-montreal
Module Services
$provided_path = $request->query->get('path');
$provided_path_request = Request::create($provided_path);
$route = $router->matchRequest($provided_path_request);
if(preg_match('/^entity.([a-zA-Z0-9_]+).canonical$/', $route['_route'])){
$entity_key = preg_replace('/^entity.([a-zA-Z0-9_]+).canonical$/', '1',
$route['_route']);
$entity = $route[$entity_key];
$result['entity'] = [
'type' => $entity->getEntityTypeId(),
'id' => $entity->id(),
'uuid' => $entity->uuid(),
'bundle' => $entity->bundle(),
];
}
9 . 13

Path response
https://backend.icilalune.com/api/path?path=/fr/articles/2017/04/objectif-montreal
{
"language":"fr",
"frontPage":false,
"entity":{
"type":"node",
"id":"33",
"uuid":"4affd605-30ee-4169-972c-b4eeb8e0cb89",
"bundle":"article",
},
}
9 . 14

Routing, end
resolvePath(path:string){
httpClient.get('/api/path', {
params: new HttpParams().set('path', path),
headers:new HttpHeaders({'Accept':'application/json'})
}).map(pathInfo => {
if (pathInfo.frontPage) {
return {
name: 'front',
params: {
id: pathInfo.entity.uuid
}
};
}
if (pathInfo.entity && pathInfo.entity.type === 'node') {
switch (pathInfo.entity.bundle) {
case 'article':
return {
name: 'newsListDetails',
params: {
id: pathInfo.entity.uuid
}
};
}
}
return {'name': '404'};
}).subscribe(state => {
this.uiRouter.stateService.go(state.name, state.params);
});
}
9 . 15

A la recherche d'une
Solution générique
Côté Drupal
https://www.drupal.org/project/services_path
 Experimental
Côté Front : dépend du framework
Module pour angular et ui-router "bientôt"
9 . 16

Crawlers
Google
Facebook
Twitter
...
A partir de l'URL
10 . 4

cURL
$ curl http://www.headlessisfun.com/
$ curl http://www.headlessisfun.com/about
$ curl http://www.headlessisfun.com/article/42
<html>
<body>
<script src="app.js"></script>
</body>
</html>
10 . 5

http://example.com
#document
<html>
<body>
<h1> <p><h2><p>
#text#text#text #text
<head>
10 . 6

Prerender
https://github.com/prerender/prerender
Node.js
PhantomJS
Execution complète
DOM.toString()
10 . 7

#document
<html>
<body>
<h1> <p><h2><p>
#text#text#text #text
<head>
10 . 9

Prerender
Solution générique
Résultat statique
Browser ou bot ?
10 . 10

Google AJAX Crawling
Proposé en 2009
Dépréciée en 2015
Toujours largement utilisée
https://www.icilalune.com/?_escaped_fragment_
Pour les autres bots : User-agent
<meta name="fragment" content="!">
10 . 11

Progressive enhancement
Prerender généralisé
Résultat dynamique
Dépendant du framework
10 . 12

Server-side rendering
Angular Universal
Ember fastboot
...
10 . 13

The Headless Game
Level #1 : L'API
Level #2 : La navigation
Level #3 : Les crawlers
11 . 1

Et ensuite...
Authenti cation : OAuth2
Caching
JSONAPI et/ou GraphQL in core
Sécurisation du back
...
11 . 2

Merci !
Des questions ?
http://www.icilalune.com/
12

Headless Drupal en pratique

More Related Content

What's hot (19)

Similar to Headless Drupal en pratique (20)

Recently uploaded (20)

Headless Drupal en pratique