Secrets of the decoupled Drupal practitioner Preston So April - PowerPoint PPT Presentation

Secrets of the decoupled Drupal practitioner Preston So • April 11, 2019 • DrupalCon Seattle 2019

Welcome! Preston is a product strategist, innovation lead, developer advocate, speaker, and author of Decoupled Drupal in Practice (Apress, 2018). A globally recognized voice on decoupled Drupal and subject matter expert in the decentralized web and conversational design, Preston is Principal Product Manager at Gatsby, where he works on improving the Gatsby developer experience and driving product development. Having spoken at over 50 conferences, Preston is a sought-after presenter with keynotes on five continents and in three languages. preston@gatsbyjs.com • @prestonso • #decoupleddrupalsecrets

Gatsby ✋ Gatsby’s ecosystem Come say Hi! @gatsbyjs Meet me and members of the github.com/gatsbyjs/gatsby Gatsby team at booth #319! www.gatsbyjs.org

Decoupled Drupal in Practice Pre-order now: tiny.cc/decoupled-in-practice In the first and only comprehensive guide to decoupled Drupal across the stack, with a foreword by Drupal project lead Dries Buytaert, learn everything you need to know about decoupled Drupal—from building the back end and designing APIs to integrating with front-end technologies. 4

Call for papers Sponsorships @decoupleddays The Decoupled Days 2019 call For sponsorship information, Follow us on Twitter to stay for papers is extended until reach out to our team at updated on important May 3, 2019 at 11:59pm EST . decoupleddays@gmail.com . announcements. #decoupleddays • decoupleddays.com • @decoupleddays

What we'll cover A brisk reintroduction to decoupled Drupal ● An alternative API: RELAXed Web Services ● Extending JSON:API with Extras and Defaults ● Running Drupal remotely: JSON-RPC ● Derived schemas and docs: Schemata and OpenAPI ● Rev up with reverse proxies: Contenta.js ● Epilogue: What to expect in decoupled Drupal in the 8.7 ● era

Psst … secrets ahead!

Decoupled Drupal in Practice Chapter 4 1 A brisk reintroduction to decoupled Drupal

Drupal front end Client Client Server Server Drupal Monolithic Drupal

HTTP request Decoupled Web service HTTP client application HTTP response Site or repository built in Decoupled Drupal application

HTML HTML Other language Decoupled application Drupal front end Templates Templates PHP Web service JSON Drupal PHP Drupal Data Data Monolithic vs. decoupled Drupal

JavaScript application framework JavaScript framework (client-side execution) Initial markup Client Client Server Server JavaScript framework (server-side Drupal execution) Node.js Drupal Server-side JavaScript

Synchronous Subscribe Lorem ipsum dolor sit Asynchronous E-mail amet, consectetuer adipiscing. Submit JavaScript framework (client-side execution) HTTP Subscribe to our newsletter Lorem ipsum request dolor sit E-mail address amet, Client consectetuer adipiscing. Server Submit JavaScript framework (server-side execution) Success! Lorem ipsum Node.js Here are dolor sit HTTP others that amet, request consectetuer might interest you: adipiscing. Drupal Dynamic pages with server-side prerendering

Server Client responds Node.js executes JavaScript framework renders flush HTML HTML bindings by JavaScript framework calls REST API Synchronous Universal (isomorphic) JavaScript Asynchronous

Server Client Node.js calls REST responds executes API Drupal JavaScript framework responds renders flush HTML HTML bindings by JavaScript framework calls REST API Synchronous Universal JavaScript consuming Drupal Asynchronous

Risks and rewards Area Rewards Risks Architecture Separation of Loss of contextual concerns administration Development Pipelined Maintainability experience development difficulties Security and Administrative Additional point of performance security failure Project management Easier resourcing On-boarding overhead

Decoupled Drupal is the use of Drupal as a content service for consumer applications

Decoupled Drupal in Practice Chapters 8 and 13 2 An alternative API: RELAXed Web Services

RELAXed Web Services RELAXed Web Services (maintained by timmillwood and ● jeqq) implements the Apache CouchDB specification and emphasizes content staging use cases as part of the Drupal Deploy ecosystem. CouchDB stores data within JSON documents ● (resources) exposed through a RESTful API. Unlike Drupal’s core REST API, CouchDB allows not only ● GET , POST , and DELETE but also PUT and COPY . https://www.drupal.org/project/relaxed

Drupal core Depends on (with HAL normalization) REST and Serialization RELAXed Web Services HAL REST Waterwheel depends on Depends on Serialization Serialization JSON API Drupal core (raw JSON structures, no HAL) GraphQL Drupal's web services ecosystem (not exhaustive)

REST APIs RELAXed Web Core REST JSON API GraphQL Services REST APIs Web services Euler diagram of Drupal web services

A note about code examples HTML JavaScript (ES5, ES6) JSON Command line

Installing RELAXed # Use Composer to install RELAXed Web Services and # its dependency relaxedws/replicator. $ composer require relaxedws/replicator:dev-master $ composer require drupal/relaxed $ drush en -y relaxed

RELAXed Web Services configuration, including Replicator user

RELAXed Web Services RELAXed Web Services doesn’t require you to use its ● content staging capabilities (but you will need to configure the Replicator user and install Workspaces if so). Without Workspaces enabled, the default workspace ● accessible in RELAXed Web Services is live .

Testing RELAXed Web Services GET /relaxed → 200 OK { "couchdb": "Welcome", "uuid": "02286a1b231b68d89624d281cdfc0404", "vendor": { "name": "Drupal", "version": "8.5.6", }, "version": "8.5.6" }

Retrieving with RELAXed URI Description Example GET /relaxed/_all_dbs Retrieve all workspaces /relaxed/_all_dbs GET Retrieve a single /relaxed/live workspace /relaxed/{workspace} /relaxed/stage GET Retrieve all document /relaxed/live/_all_docs identifiers (entity ids) in a /relaxed/{workspace}/_ workspace all_docs GET Retrieve a single /relaxed/live/462e86f6-0 document (Drupal entity) 123-43a6-a71e-914d9432ab /relaxed/{workspace}/{ 6e document_id}

Sample RELAXed response for a single Drupal entity

Creating documents (entities) POST /relaxed/live → 201 Created { "@context" : { "_id" : "@id", "@language" : "en" }, "@type" : "node", "_id" : "b6cea743-ba86-49b0-81ac-03ec728f91c4", "en" : { "@context" : { "@language" : "en" }, "langcode" : [{ "value" : "en" }], "type" : [{ "target_id" : "article" }], "title" : [{ "value" : "REST and RELAXation" }],

Creating documents (entities) POST /relaxed/live → 201 Created "body" : [ { "value" : "This article brought to you by a request to RELAXed Web Services!" } ] } }

RELAXed Web Services is a powerful RESTful alternative

Decoupled Drupal in Practice Chapter 23 3 Extending JSON:API with Extras and Defaults

JSON:API Extras Sometimes, we need to override the defaults that are ● preconfigured upon installing the JSON:API module. JSON:API Extras provides interfaces to override default ● settings and establish new ones that the resultant API ought to follow, including: enabling/disabling individual resources ○ aliasing resource names and paths ○ disabling individual fields in entities ○ aliasing field names ○ modifying field output through field enhancers ○

Installing both modules # Install JSON:API Extras. $ composer require drupal/jsonapi_extras $ drush en -y jsonapi_extras # Install JSON:API Defaults. $ drush en -y jsonapi_extras jsonapi_defaults

Configuring JSON:API Extras

Configuring JSON:API Extras

JSON:API Defaults Formerly a separate module maintained by Martin Kolar ● (mkolar), JSON:API Defaults allows you to set default includes and filters for resources. JSON:API Defaults is particularly useful when consumers ● prefer issuing slimmer requests without the parameters required to yield a response including relationships. In other words, you can issue a request without params ● and receive a response having predetermined defaults such as includes.

Decoupled Drupal in Practice Chapter 23 4 Running Drupal remotely: JSON-RPC

Justifying JSON-RPC Sometimes, deeper functionality in Drupal needs to be ● made available to consumers, particularly actions like performing a cache rebuild or running a cron job. RPCs are remote procedure calls that execute a ● procedure on another system, written as if they were local actions, without direct coding. RPCs in Drupal would be useful for any action not ● representable through REST.

JSON-RPC provides a lightweight protocol for remote procedure calls