Introduction to decoupled Drupal Preston So 26 Sep 2017 - PowerPoint PPT Presentation

Introduction to decoupled Drupal Preston So • 26 Sep 2017 • DrupalCon Vienna 2017

Herzlich Willkommen! Preston So has been a web developer and designer since 2001, a creative professional since 2004, and a Drupal developer since 2007. As Director of Research and Innovation at Acquia, Preston leads new open-source and research initiatives and helms Acquia Labs, the innovation lab featured in international press. Previously, Preston contributed to the Spark initiative in the Drupal project, co-founded the Southern Colorado Drupal User Group (est. 2008), and operated an award-winning freelance web and print design studio. Preston has presented keynotes at conferences on three continents in multiple languages. preston.so@acquia.com • @prestonso • #introdecoupleddrupal

What we'll cover What is decoupled Drupal? ● Motivating decoupled Drupal ● Decoupling the front end from the back end ● Risks and rewards of decoupling Drupal ● Web services and REST APIs ● Decoupled Drupal and developer experience ● Decoupled Drupal and editorial experience ● Epilogue: Drupal's new incongruity ●

1 What is decoupled Drupal?

Think of Earth as one contiguous unit: a monolith .

request response Earth responds to requests from decoupled bases.

HTTP request HTTP response Drupal is a monolithic CMS backing decoupled applications.

HTTP request HTTP response Site or repository Decoupled built in Drupal application

HTTP request Decoupled REST API HTTP client application HTTP response Site or repository built in Decoupled Drupal application

Decoupled Drupal is the use of Drupal as a content service for consumption and manipulation by other applications

Decoupled Drupal Drupal can be used to back other back-end ● applications as well as native applications, single-page applications, digital signage, AR-driven interfaces, and many others. Web services such as the core REST API, JSON API, ● and GraphQL are typical entry points for Drupal consumers.

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

App code HTML Native Android Single-page application Java JavaScript application (universal JavaScript) Templates Templates REST API REST API JSON JSON PHP PHP Drupal Drupal Data Data

HTML or app code PHP Swift Silex application Native iOS application Templates REST API JSON PHP Drupal Data

de•coup•led head•less API•first Aside: What's in a name?

2 Motivating decoupled Drupal

For marketers and publishers decoupled Drupal offers the promise of omnichannel delivery

Fitness Rasp- devices berry Pi AR/VR Beacons apps Conver- Smart sational watches Single- UIs IoT apps page apps Chat Set-top apps boxes Other Native back apps ends Arduino LED boards displays We have new channels every day.

Fitness Rasp- devices berry Pi AR/VR Beacons apps Conver- Smart sational watches Single- ? UIs IoT apps page apps Chat Set-top ? ? apps boxes Other Native back apps ends Arduino LED ? ? boards displays And ones we've never heard of yet.

For developers decoupled Drupal offers the promise of front-end freedom

3 Decoupling the front end from the back end

Drupal front end Client Client Server Server Drupal Monolithic Drupal

Subscribe to our newsletter E-mail address Drupal front end Submit Client two bootstraps full-page refresh Server You have been successfully Drupal subscribed! Static pages

Synchronous Subscribe to our newsletter Asynchronous E-mail address Submit Ajax jQuery request Subscribe to our newsletter Drupal front end E-mail address Client one bootstrap Submit Server Drupal Subscribe to our newsletter E-mail address Success! Submit Dynamic pages with Ajax

JavaScript application jQuery framework Drupal front end Initial markup Client Client Server Server Drupal Drupal Drupal Client-side JavaScript

Synchronous Subscribe Lorem ipsum dolor sit Asynchronous E-mail amet, consectetuer adipiscing. Submit JavaScript application HTTP framework request Subscribe to our newsletter Lorem ipsum dolor sit E-mail address amet, Initial markup consectetuer Client one adipiscing. Submit bootstrap Server Success! Lorem ipsum Drupal Here are dolor sit others that amet, consectetuer might interest you: adipiscing. Dynamic pages with client-side rendering

Synchronous Subscribe Lorem ipsum dolor sit Asynchronous E-mail amet, consectetuer adipiscing. Submit JavaScript application HTTP framework request Subscribe to our newsletter Lorem ipsum dolor sit E-mail address amet, Initial markup consectetuer Client one adipiscing. Submit bootstrap Server Success! Lorem ipsum Drupal Here are dolor sit others that amet, consectetuer might interest you: adipiscing. Dynamic pages with client-side rendering

The JavaScript renaissance ushered in an era of innovation and new development practices

Server-side JavaScript meant client-side frameworks could be executed server-side

Universal JavaScript meant shared code in the form of JavaScript framework executions

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

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 Fully decoupled Drupal

Synchronous Subscribe Lorem ipsum dolor sit Asynchronous E-mail amet, consectetuer adipiscing. Submit HTTP JavaScript request framework Subscribe to our newsletter Lorem ipsum dolor sit E-mail address amet, Drupal front end consectetuer Client one adipiscing. Submit bootstrap Server Success! Lorem ipsum Here are dolor sit Drupal others that amet, consectetuer might interest you: adipiscing. Progressively decoupled Drupal

4 Risks and rewards of decoupled Drupal

Rewards of decoupled Drupal Separation of concerns. Structure versus ● presentation is increasingly relevant in decoupled architectures. Pipelined development. An API-design-first ● approach gives front-end and back-end teams independence.

Rewards of decoupled Drupal Administrative security. Keeping the ● administrative CMS far from public view is increasingly a best practice. Easier resourcing. Drupal developers are now ● considered less affordable than JavaScript developers.

Risks of decoupled Drupal Loss of contextual administration. Crucial ● features such as in-place editing and toolbar can be key for editors. Maintainability difficulties. Maintaining both ● Drupal service and consumers requires extensive planning.

Risks of decoupled Drupal Additional point of failure. Node.js downtime can ● lead to inaccessible content in the case of private Drupal. On-boarding overhead. JavaScript developers ● need to learn consumption; Drupal developers change focus.

Summary 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

5 Web services and REST APIs

HTTP request Decoupled REST API HTTP client application HTTP response Site or repository built in Decoupled Drupal application

HTTP request Web Decoupled HTTP client services application HTTP response Not all web services are REST APIs

Web services support interoperable machine-to-machine interaction over a network