Drupaldelphia 2018: Drupal Unhitched: The CMS in Decoupled Architectures

Drupal Unhitched
The CMS in Decoupled
Architectures
Drupaldelphia 2018
Drupal Unhitched / @dirtystylus 1

View Slide

Hi.
Mark Llobrera
Technology Director, Bluecadet Philadelphia
@dirtystylus
@bluecadet

View Slide


View Slide

Descriptive, Not
Prescriptive
I’m not telling you how to do this
stuﬀ. But I hope all of this helps.

View Slide

3 Things

View Slide

3 Things
1. What is a decoupled CMS?

View Slide

3 Things
2. Decoupled Scenarios

View Slide

3 Things
2. Decoupled Scenarios
3. Decoupling Drupal

View Slide

1. What is a
Decoupled CMS?

View Slide

What is a decoupled CMS?

View Slide

What is a decoupled CMS?
—An architecture for websites and applications
where the CMS is not used to render the user-
facing site or application.

View Slide

Stop me if you’ve heard
this one before

View Slide

Separating
CONTENT
from
PRESENTATION

View Slide

2. Decoupled
Scenarios

View Slide

CMS (Drupal 8)
+
Touchscreen Interactive (React)
+
JS Website (React)

View Slide


View Slide

CMS (Drupal 8)
+
CMS-rendered Website
+
Digital Signage (React)

View Slide


View Slide

CMS
+
+
React components

View Slide


View Slide

CMS
+
Statically Published React (GatsbyJS)

View Slide


View Slide

CMS (Drupal 7)
+
+
Touch Wall (Cinder/C++)
+
2 Touchscreen Interactives (AngularJS)
+
iOS / Android Native Applications

View Slide


View Slide

PROS
and
CONS

View Slide

Pros

View Slide

Pros
—Back and Front End systems are swappable

View Slide

Pros
—Back and Front End systems are swappable
—Teams can divide and conquer

View Slide

Cons

View Slide

Cons
—Larger tech stack (Drupal, JS, multiple
environments)

View Slide

Cons
environments)
—Maintenance

View Slide

Cons
environments)
—Maintenance
—For websites you lose built-in functionality of
CMS: menus/routing/accessibility/SEO

View Slide

3. Decoupling
Drupal

View Slide

Start with Content

View Slide

Start with Content
—Getting content ready to travel

View Slide

Start with Content
—NO Presentation speciﬁc names NO

View Slide

Start with Content
—Decouple your mind

View Slide

Start with Content
—Decouple your mind
—Content in many forms/faces

View Slide

Two Content Types

View Slide

Two Content Types
—Author

View Slide

Two Content Types
—Author
—Book

View Slide

Author

View Slide

Book

View Slide

HOW??

View Slide

HOW??
—Core: RESTful Web Services

View Slide

HOW??
—Custom Controller

View Slide

HOW??
—JSON API

View Slide

HOW??
—JSON API
—GraphQL

View Slide

RESTful Web Services
Two basic approaches:

View Slide

—Core RESTful Services

View Slide

—Core RESTful Services
—REST Exports

View Slide

Core RESTful Services

View Slide

—Core REST Module

View Slide

—Core REST Module
—REST UI Module https://drupal.org/project/restui

View Slide

Request:
/node/1?format=json

View Slide

{
"nid": [
{
"value": 1
}
],
"uuid": [
{
"value": "3036ea2d-7502-4c64-8bc6-2e9ee3a0f897"
}
],
"vid": [
{
"value": 1
}
],
"langcode": [
{
"value": "en"
}
],
"type": [
{
"target_id": "book",
"target_type": "node_type",
"target_uuid": "a3c32842-68b2-46fd-b70e-d6ed9e71ee2d"
}
],
"revision_timestamp": [
{
"value": "2018-04-23T18:10:59+00:00",
"format": "Y-m-d\\TH:i:sP"
}
],
"revision_uid": [
{
"target_id": 1,
"target_type": "user",
"target_uuid": "a7484c09-d013-402e-b070-46c0d84a7b28",
"url": "/user/1"
}
],
"revision_log": [],
"status": [
{
"value": true
}
],
"title": [
{
"value": "The Fifth Season"
}
],
"uid": [
{
"target_id": 1,
"target_type": "user",
"target_uuid": "a7484c09-d013-402e-b070-46c0d84a7b28",
"url": "/user/1"
}
],
"created": [
{
"value": "2018-04-23T18:10:29+00:00",
}
],
"changed": [
{
"value": "2018-04-23T18:10:59+00:00",
}
],
"promote": [
{
"value": true
}
],
"sticky": [
{
"value": false
}
],
"default_langcode": [
{
"value": true
}
],
"revision_translation_affected": [
{
"value": true
}
],
"path": [
{
"alias": null,
"pid": null,
"langcode": "en"
}
],
"body": [
{
"value": "Part one of the Broken Earth trilogy.\r\n",
"format": "basic_html",
"processed": "Part one of the Broken Earth trilogy.",
"summary": ""
}
]
}

View Slide

{
"nid": [
{
"value": 1
}
],
"type": [
{
"target_id": "book",
"target_type": "node_type",
"target_uuid": "a3c32842-68b2-46fd-b70e-d6ed9e71ee2d"
}
],
"title": [
{
"value": "The Fifth Season"
}
],
"body": [
{
"summary": ""
}
]
}

View Slide

REST Exports

View Slide

REST Exports
—Views! (! old friend)

View Slide

REST Exports
—Views! (! old friend)
—“Provide a REST Export” checkbox ✅

View Slide


View Slide

[
{
"title": "Kim Stanley Robinson",
"body": "Author of the Mars trilogy and New York 2140.\r\n",
"field_books": [
"2"
]
},
{
"title": "N. K. Jemisin",
"body": "Hugo Award-winning author of the Broken Earth trilogy.\r\n",
"field_books": [
"1"
]
}
]

View Slide

Custom Controller

View Slide

Custom Controller
—Routing (YML)

View Slide

Custom Controller
—Routing (YML)
—Controller Class

View Slide

Routing
mann.season:
path: 'api/season'
defaults:
_controller: \Drupal\mann_api\Controller\Season::api
methods: [GET]
requirements:
_access: 'TRUE'

View Slide

…
$a_query = \Drupal::entityQuery('node');
$a_query->condition('status', 1);
$a_query->condition('type', 'event');
$entity_ids = $a_query->execute();
$events = Node::loadMultiple($entity_ids);
foreach ($events as $event) {
$item['id'] = (int) $event->nid->value;
$date = $event->field_event_date->value;
$item['date'] = $date;
$item['title'] = $event->title->value;
$item['display_title'] = $event->field_display_title->value;
$image_data = MediaAssetService::getMediaPathSingle($event, 'field_featured_image');
$item['image'] = urldecode($image_data['image']);
$item['image_relative'] = urldecode($image_data['image_relative']);
$data[] = $item;
}
$response = new JsonResponse(['data' => $data]);
return $response;
…

View Slide

JSON API
https://www.drupal.org/project/jsonapi

View Slide

Out of the box:
/jsonapi/node/[Content Type]
for example:
/jsonapi/node/author

View Slide

{
"data": [
{
"type": "node--author",
"id": "88223a76-278d-4fc6-9945-0bdb56cc78d3",
"attributes": {
"nid": 2,
"body": {
"value": "Winner of the Hugo Award.\r\n",
"processed": "Winner of the Hugo Award.",
"summary": ""
},
"field_display_name": {
"value": "N. K. Jemisin",
"processed": "N. K. Jemisin"
}
},
"relationships": {
"field_books": {
"data": [
{
"type": "node--book",
"id": "e8c31c68-4fe5-4046-ab3f-1cb42e1f314f"
}
],
},
}
],
}

View Slide

{
"attributes": {
"nid": 2,
"body": {
"value": "Winner of the Hugo Award.\r\n",
"processed": "\Winner of the Hugo Award.",
"summary": ""
},
"field_display_name": {
"value": "N. K. Jemisin",
"processed": "N. K. Jemisin"
}
},
}

View Slide

{
"relationships": {
"field_books": {
"data": [
{
}
],
},
}

View Slide

Relationships are complicated
/jsonapi/node/[Content Type]?include=[Field Name]
for example (we want ﬁeld_books):
/jsonapi/node/author?include=field_books

View Slide

{
"included": [
{
"id": "e8c31c68-4fe5-4046-ab3f-1cb42e1f314f",
"attributes": {
"nid": 1,
"title": "The Fifth Season",
"body": {
"summary": ""
}
},
}
}

View Slide


View Slide

GraphQL
https://www.drupal.org/project/graphql

View Slide

Installation Note

View Slide

Installation Note
—Download the module (or use drush dl
graphql)

View Slide

Installation Note
graphql)
—Run composer require webonyx/graphql-php
at root level (error otherwise)

View Slide

Installation Note
graphql)
—Run composer require webonyx/graphql-php
at root level (error otherwise)
—Enable the module

View Slide

Explorer allows
you to test out
queries

View Slide


View Slide

Auto-complete!

View Slide


View Slide

Simple Query
query {
nodeQuery {
entities {
entityId,
entityLabel
}
}
}

View Slide

{
"data": {
"nodeQuery": {
"entities": [
{
"entityId": "1",
"entityLabel": "The Fifth Season"
},
{
"entityId": "2",
"entityLabel": "New York 2140"
},
{
"entityId": "3",
"entityLabel": "N. K. Jemisin"
},
{
"entityId": "4",
"entityLabel": "Kim Stanley Robinson"
}
]
}
}
}

View Slide

Node Query w/ Types (Author)
query {
nodeQuery {
entities {
...on NodeAuthor {
entityId
title
body {
value
}
fieldDisplayName {
value
}
fieldBooks {
entity {
entityId
title
}
}
}
}
}
}

View Slide

References are Easy(ish)
fieldBooks {
entity {
entityId
title
}
}

View Slide

{
"data": {
"nodeQuery": {
"entities": [
{},
{},
{
"entityId": "3",
"body": {
"value": "Hugo Award-winning author of the Broken Earth trilogy.\r\n"
},
"fieldDisplayName": {
"value": "N. K. Jemisin"
},
"fieldBooks": [
{
"entity": {
"entityId": "1",
"title": "The Fifth Season"
}
}
]
},
{
"entityId": "4",
"title": "Kim Stanley Robinson",
"body": {
"value": "Author of the Mars trilogy and New York 2140.\r\n"
},
"fieldDisplayName": {
"value": "Kim Stanley Robinson"
},
"fieldBooks": [
{
"entity": {
"entityId": "2",
"title": "New York 2140"
}
}
]
}
]
}
}
}

View Slide

query {
nodeQuery {
entities {
...on NodeAuthor {
entityId
title
body {
value
}
fieldDisplayName {
value
}
fieldBooks {
entity {
entityId
title
}
}
}
...on NodeBook {
entityId
title
body {
value
}
}
}
}
}

View Slide

Filter by Node Type
query {
nodeQuery (filter: {conditions: [{
field: "type"
value: "author"
operator: EQUAL
}]
} ) {
…
}
}

View Slide

query {
nodeQuery (filter: {conditions: [{
field: "type"
value: "author"
operator: EQUAL
}]
} ) {
entities {
...on NodeAuthor {
entityId
title
body {
value
}
fieldBooks {
entity {
title
body {
value
}
}
}
}
}
}
}

View Slide

{
"data": {
"nodeQuery": {
"entities": [
{
"entityId": "3",
"body": {
"value": "Hugo Award-winning author of the Broken Earth trilogy.\r\n"
},
"fieldBooks": [
{
"entity": {
"title": "The Fifth Season",
"body": {
"value": "Part one of the Broken Earth trilogy.\r\n"
}
}
}
]
},

View Slide

Bonus:
Communication

View Slide

We’ve tried:

View Slide

We’ve tried:
—Polling for changes (are we there yet?)

View Slide

We’ve tried:
—Polling for changes (are we there yet?)
—NodeJS (get a server in the middle, maybe Socket
I/O)

View Slide

Enter Progressive Web Applications

View Slide

—CMS to Application communication is a use case

View Slide

—CMS to Application communication is a use case
—PWAs have Service Workers and Push
Notiﬁcations

View Slide

Web Push API

View Slide

Web Push API
—Gives web applications the ability to receive messages
pushed to them from a server

View Slide

Web Push API
—Requires a subscription to be activated, but once
allowed, the subscription is saved by the browser

View Slide

Web Push API
—You can pass “messages”, but fundamentally you are
passing data for your app or website to interpret as you
see ﬁt

View Slide

Web Push API
—You can pass “messages”, but fundamentally you are
passing data for your app or website to interpret as you
see ﬁt
—Browsers handle pushing the data through Service
Workers, so a third party is not required

View Slide

Fine Print

View Slide

Fine Print
—Limited browser support: ✅ Chrome, ✅ Firefox, "
Safari (coming soon?)

View Slide

Fine Print
—Spec is considered experimental, so it may change
in the future

View Slide

Fine Print
in the future
—Great for kiosks, but in the wild, you can’t
guarantee that a user will subscribe

View Slide

Fine Print
in the future
—Great for kiosks, but in the wild, you can’t
guarantee that a user will subscribe
—Sockets for non-web-based projects (Cinder/C++,
Unity)

View Slide


View Slide

Where to Next?

View Slide

Where to Next?
—Two-way communication

View Slide

Where to Next?
—Two-way communication
—Content Authoring via JS Front End (WordPress
and Drupal)

View Slide

Takeaways

View Slide

Takeaways
—Start with your Content, and make that portable

View Slide

Takeaways
—There’s many diﬀerent ways to expose your
content

View Slide

Takeaways
—There’s many diﬀerent ways to expose your
content
—You can do this!

View Slide

We’re
hiring.

View Slide

THANK YOU.
Mark Llobrera
Technology Director, Bluecadet Philadelphia
@dirtystylus
@bluecadet

View Slide

Drupaldelphia 2018: Drupal Unhitched: The CMS in Decoupled Architectures

Drupaldelphia 2018: Drupal Unhitched: The CMS in Decoupled Architectures

dirtystylus

More Decks by dirtystylus

Other Decks in Technology

Featured

Transcript