API-First Drupal and the Future of the CMS

©2016 Acquia Inc. — Confidential and Proprietary

API-first Drupaland the future of the CMSPreston SoDevelopment Manager, Acquia LabsMarch 8, 2017

©2016 Acquia Inc.

Welcome!Preston So (@prestonso) has been a web developer and designer since 2001, a creative professional since 2004, and a Drupal developer since 2007. As Development Manager of Acquia Labs, Preston leads new open-source and research initiatives at Acquia. Preston has presented keynotes at conferences on three continents in both English and Portuguese and speaks about diverse topics such as decoupled Drupal, responsive design, front-end development, and user experience.

– drupal.org/u/prestonso– [email protected]

©2016 Acquia Inc.

Welcome!

©2016 Acquia Inc.

What we’ll cover– Imagining the future– The world around us is evolving– API-first Drupal– Web services and SDKs– The JavaScript renaissance– Epilogue: Drupal’s API-first future

©2016 Acquia Inc.

Imagining the future

Think back to your firstDrupal site

Think aboutwhere Drupal is now

What did digitalexperiences look like in2008?

What did digitalexperiences look like in2012?

What do digitalexperiences look like in2016?

What will digitalexperiences look like in2020?

Simone Biles

Katie Ledecky

Wearables Conversational interfaces

Internet of Things (IoT)

Augmented and virtual reality

AI and machine learning

Wearables Conversational interfaces

Internet of Things (IoT)

Augmented and virtual reality

AI and machine learning

©2016 Acquia Inc.

The world around us is evolving

We are in the midst of a content revolution ...

… and a reinvention of content delivery.

The web is now just the bare minimum among touchpoints.

IoT apps

Native apps

Chat apps

Single-

page apps

Other back ends

Set-top

boxes

We’re moving from standalone digital experiences to entire digital ecosystems ...

Native mobile

appWebsit

e

IoT app

Native app

Chat app

Single-

page app

Other back ends

Set-top box

Content

store

Pull-based Push-based

… from pull-based content delivery to push-based content delivery ...

Amazon Echo push notification

AR/VR notification overlay

In-store product alerts

… and from consumption of content to interaction with content.

Amazon Echo push notification

User-generated response

Interaction with AR/VR interface

AR/VR notification overlay

In New York City, Drupal feeds information to kiosks in the MTA.

Drupal 8 provides data to smartphone apps linked to Tesla vehicles.

Lufthansa supplies its in-flight entertainment systems with Drupal 8.

Drupal is now a centerpiece of application ecosystems.

IoT apps

Native apps

Chat apps

Single-

page apps

Other back ends

Set-top

boxes

But we have new competition: the headless CMS.

IoT apps

Native apps

Chat apps

Single-

page apps

Other back ends

Set-top

boxes

And we have new devices or touchpoints every day.

IoT apps

Native apps

Chat apps

Single-

page apps

Other back ends

Set-top

boxes

Smart watch

es

Fitness

devices

Arduino

boards

Beacons AR/VR

apps

Rasp-berry

Pi

Conver-

sational UIs

LED displa

ys

IoT apps

Native apps

Chat apps

Single-

page apps

Other back ends

Set-top

boxes

Smart watch

es

Fitness

devices

Arduino

boards

Beacons AR/VR

apps

Rasp-berry

Pi

Conver-

sational UIs

LED displa

ys

Our mission is to make Drupal the best API-first CMS.

©2016 Acquia Inc.

API-first Drupal

Think of Earth as one contiguous unit: a monolith.

Earth responds to requests from decoupled bases.

request

response

Drupal is a monolithic CMS backing decoupled applications.

HTTP request

HTTP response

HTTP request

HTTP response

Site or repository built in Drupal

Decoupled application

HTTP request

HTTP response (JSON, XML)



REST API Decoupled applicationHTTP client

©2016 Acquia Inc.

API-first (decoupled) Drupal– Decoupled Drupal, or API-first Drupal, is the

process of employing Drupal as a data service which exposes data for consumption by other applications.

– Drupal can be used to back other back-end applications (Rails, .NET, PHP) as well as native applications, single-page JavaScript applications, and IoT applications.

– A REST API is the most common entry point for decoupled applications.

Monolithic vs. decoupled

Drupal

Drupal front end

PHP

Data

Templates

HTML

Drupal


PHP

Data

Templates

HTMLOther

language

JSONREST API

Drupal

Native Android application

PHP

Data

Templates

App code

Java

JSON

Drupal

Single-page application(universal JavaScript)

PHP

Data

Templates

HTML

JS

JSONREST API REST API

Silex application

Data

Templates

HTML or app code

JSON

Drupal

Native iOS application

PHP

Obj-C PHP

REST API

©2016 Acquia Inc.

Web services and SDKs

HTTP request

HTTP response (JSON, XML)



Web services


Software development kit (SDK)

API-first ideal

Web servicesFull feature set

Single REST API in coreSpecification flexibility

SDKsFor JavaScript apps

For native appsFor back-end apps

How can we outperform headless CMSes?

Web services in Drupal 8 are currently spread across a variety of implementations.

Core REST

modulesServices

(D8)RELAXed

Web Services

Content entity CRUDViews REST exportsResource plugins

Configuration entity CRUDConfigurable route prefixesUser login and logout

TranslationsRevisionsFile attachments

Entity Query

API

Sorting and rangeConditionsPagination

We need a full feature set and unified REST API in Drupal core.

Future core REST

Content entity CRUDViews REST exportsResource plugins

Configuration entity CRUDConfigurable route prefixesUser login and logout

TranslationsRevisionsFile attachments

Sorting and rangeConditionsPagination

Application developers should be able to use the specification of their choice.

HAL+JSON JSON APICouchDB GraphQL

DEVELOPERSDEVELOPERSDEVELOPERSDEVELOPERS

DEVELOPERSDEVELOPERSDEVELOPERSDEVELOPERS

JavaScriptNative app

RailsIoT app

Currently, consuming Drupal data requires a basic understanding of Drupal’s REST API.

JavaScript application

I need the title of node/1. But where can

I get to it? And how do I get just the title?

Current core REST

Here is the node ID, the node UUID, the node type, the node language, the node

title, the node author, the node created

Waterwheel is an ecosystem of SDKs that accelerate development of Drupal-backed applications.


I need the title of node/1. But where can

I get to it? And how do I get just the title?

Current core REST Waterwheel.js

SDKI need to get node/1(and I know the route

is /node/1?_format=json).

Waterwheel is an ecosystem of SDKs that accelerate development of Drupal-backed applications.


Current core REST Waterwheel.js

SDK

Here is the node ID, the node UUID, the node type, the node language, the node

title, the node author, the node created

The title of the first article is “Blueberry Hill”

(and I know it’s in the response at

response.title[0].value).

github.com/acquia/waterwheel-jsgithub.com/acquia/waterwheel-swift

©2016 Acquia Inc.

The JavaScript renaissance

Static pages

Subscribe to our newsletter

You have been successfully subscribed!

E-mail address

Submit

full-page refresh

Drupal

Drupal front endPHP

Data

Templates

HTML

Drupal

Drupal front end

Data

Templates

HTML

Dynamic pages with Ajax

Subscribe to our newsletterE-mail address

Submit

Drupal

Drupal front endPHP

Data

Templates

HTML

Subscribe to our newsletter

Success!

E-mail address

Submit

Subscribe to our newsletterE-mail address

Submit

AJAX request

AJAX response

Dynamic pages with client-side rendering

Subscribe

E-mail

Submit

HTTP request

HTTP response

Lorem ipsum dolor sit amet, consectetuer adipiscing.


Success! Here are others that might interest you:


Drupal

Decoupled front end

REST API

©2016 Acquia Inc.

Rewards of fully decoupled Drupal– Separation of concerns (structure vs.

presentation)– Content syndication (write once, publish

everywhere)– Differentiated development velocities between

front and back end (independent front-end redesigns)

– Rich application ecosystem (auxiliary applications such as SPAs, native mobile, and IoT)

©2016 Acquia Inc.

Risks of fully decoupled Drupal– Additional point of failure (REST API, other

hosting)– No cross-site scripting protection or input

sanitization– No in-place, in-context editing or administration– No layout and display management– No previewable content workflow– No modules affecting the front end– No system notifications (errors, messages)– No BigPipe progressive loading or cache tags– No accessible markup or user experience

benefits

©2016 Acquia Inc.

When should you decouple Drupal?– A site powering one or more other sites– A site powering one or more other applications– A site powering multiple sites or applications– Standalone applications– Standalone sites

©2016 Acquia Inc.

For standalone sites and apps … – You don’t need the overhead of a decoupled

architecture to power a standalone site or application.

– Doing so can lead to workarounds that duplicate, interrupt, or otherwise obfuscate the integrity of end-to-end Drupal.

– There is a better solution: progressive decoupling.

Fully decoupled Drupal

Subscribe

E-mail

Submit

HTTP request

HTTP response





Drupal

JavaScript framework

REST API

Fully decoupled Drupal

Subscribe

E-mail

Submit

HTTP request

HTTP response





Drupal

JavaScript framework

REST API

Progressively decoupled Drupal

Subscribe

E-mail

Submit

HTTP request

HTTP response





Drupal

REST API

Drupal front endJS framework

©2016 Acquia Inc.

Risks of fully decoupled Drupal– Additional point of failure (REST API, other

hosting)– No cross-site scripting protection or input

sanitization– No in-place, in-context editing or administration– No layout and display management– No previewable content workflow– No modules affecting the front end– No system notifications (errors, messages)– No BigPipe progressive loading or cache tags– No accessible markup or user experience

benefits

©2016 Acquia Inc.

Rewards of progressively decoupled Drupal– No additional point of failure (REST API, other

hosting)– Cross-site scripting protection and input

sanitization– In-place, in-context editing and administration– Layout and display management– Previewable content workflow– Modules affecting the front end– System notifications (errors, messages)– BigPipe progressive loading and cache tags– Accessible markup and user experience benefits

©2016 Acquia Inc.

Epilogue: Drupal’s API-first future

Think again aboutwhere Drupal is now

How can we make Drupal more API-first?

How can we benefit froma native user experienceandeditorial capabilities?

Should Drupal bedecoupled out of the box?

Should all CMSes bedecoupled out of the box?

More information➔ API-first initiative

◆ www.drupal.org/node/2757967

➔ API-first initiative at DrupalCon Dublin◆ events.drupal.org/dublin2016/sessions/api-first-initiative

➔ API-first initiative at DrupalCon Baltimore◆ events.drupal.org/baltimore2017/sessions/api-first-initiative

https://www.drupal.org/node/2757967

https://events.drupal.org/dublin2016/sessions/api-first-initiative

https://events.drupal.org/dublin2016/sessions/api-first-initiative

©2016 Acquia Inc.

Thank you!Preston So (@prestonso)drupal.org/u/[email protected]

Learn more about Acquia Labs:acquia.com/resources/acquia-labs

Technology

API-First Drupal and the Future of the CMS