Headless Drupal
Buzzword or Next Big Thing?
Drupal City Berlin
16.11.2014
About me
Boris Böhne, aka drubb
Drupal since 2006
Freelancer, based near Stuttgart, Germany
@drubb
Still using TWIG?
Funny!
“The frontend moves faster
than Drupal, whether Drupal
likes it or not.”
So Drupal 8 taking
5 years?
ARE YOU KIDDING???
WE JUST FIXED THIS!
Well, there’s a solution!
Let’s just kill the Drupal frontend. What’s left?
But wait - there’s a (headless) REST
●
Re
presentational
S
tate
T
ransfer - WTF?
● Architecture style for designing networked
applications - ok!
● Request <=> Response Communication
between Client and Server - ah!
So what about Headless Drupal?
Request
Response
Drupal Backend
Fancy Frontend
So what about Headless Drupal?
Drupal Backend
TARGETED / TAILORED!
Frontend / App 1
Example: Request Header
GET /node/1 HTTP/1.1 Host: backend.drubb.de Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36
Accept-Encoding: gzip,deflate,sdch
Example: Response Header
HTTP/1.1 200 OKServer: nginx
Date: Mon, 03 Nov 2014 18:20:24 GMT Content-Type: text/html; charset=UTF-8 Transfer-Encoding: chunked
Connection: keep-alive Vary: Accept-Encoding
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS Access-Control-Allow-Headers: *
Cache-Control: max-age=300, public
X-Drupal-Cache-Tags: block:bartik_account_menu block:bartik_content block:bartik_footer block:bartik_login block: bartik_main_menu...
X-Generator: Drupal 8 (http://drupal.org) X-UA-Compatible: IE=edge,chrome=1 Content-language: en
Expires: Sun, 19 Nov 1978 05:00:00 GMT Vary: Cookie
Last-Modified: Mon, 03 Nov 2014 18:20:24 GMT Content-Encoding: gzip
Example: Response (HTML)
Request: GET node/1 + Accept: text/html<!DOCTYPE html>
<html lang="en" dir="ltr" prefix="..."> <head>
<meta name="charset" charset="utf-8" />
<meta name="Generator" content="Drupal 8 (http://drupal.org)" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="version-history" href="/node/1/revisions" />
… </head>
<body class="layout-one-sidebar layout-sidebar-first path-node node--type-artist">
<a href="#main-content" class="visually-hidden focusable skip-link">Skip to main content</a> <div id="page-wrapper"><div id="page">
…
</div></div> <!-- /#page, /#page-wrapper --> </body>
Example: Response (JSON)
Request: GET node/1 + Accept: application/json{"nid":[{"value":"1"}],"uuid":[{"value":"e1d6bb85-f100-41cb-a500-a4194607fced"}],"vid":[{"value":"1"}],"type":[{"target_id":" artist"}],"langcode":[{"value":"en"}],"title":[{"value":"Genesis"}],"uid":[{"target_id":"1"}],"status":[{"value":"1"}],"created": [{"value":"1414606204"}],"changed":[{"value":"1414754666"}],"promote":[{"value":"0"}],"sticky":[{"value":"0"}],"
revision_timestamp":[{"value":"1414606230"}],"revision_uid":[{"target_id":"1"}],"revision_log":[{"value":""}],"path":[{"alias": null,"pid":null}],"field_description":[{"value":"Genesis are a British rock band formed in 1967. The band has consisted of its three longest-tenured members: founding members Tony Banks (keyboards) and Mike Rutherford (bass, guitar); and Phil Collins (vocals, drums). Former members Peter Gabriel (vocals, flute), Steve Hackett (guitar) and Anthony Phillips (guitar) also played major roles in the band in its early years. Genesis are among the highest-selling recording artists of all time with approximately 130 million albums sold worldwide.[1] They were inducted into the Rock and Roll Hall of Fame in 2010.","format":"plain_text"}],"field_image":[{"target_id":null,"display":null,"description":null,"alt":null, "title":null," width":null,"height":null}],"field_style":[{"target_id":"1"}]}
Drupal 8 REST request methods
GET
get entity
POST
add entity
PATCH
change entity (complete or partial)
DELETE remove entity
Entities might be nodes, comments, users, roles, terms, menus, blocks, files,
views, image styles, shortcuts, display modes, form modes, text formats, ....
Sample App: Music Hall of Fame
+
Backend: 3 REST exports,
using Views
Angular frontend: sidebar view
<aside>
<div ng-controller="StylesController" class="styles"> <h3>{{subject}}</h3>
<p ng-repeat="style in styles">
<a ng-class="{'active':$index == active}" ng-click="setActive($index); filter(style.tid)">{{style.style}} </a>
</p> </div>
<div ng-controller="LatestController" class="latest"> <h3>{{subject}}</h3> <p ng-repeat="artist in latest"> {{artist.name | removePlus}} </p> </div> </aside>
Angular frontend: sidebar controllers
musicApp.controller('StylesController', ['$scope', '$rootScope', '$http', function ($scope, $rootScope, $http) { $scope.filter = function (tid) {$rootScope.$broadcast('styleFilter', tid);}
$scope.setActive = function ($index) {$scope.active = $index;}; $http.get(backend + 'styles').success(function (result) { $scope.subject = 'Filter by music style';
$scope.styles = result;
var reset = {style: "All", tid: ""}; $scope.styles.push(reset);
}); }]);
musicApp.controller('LatestController', ['$scope', '$http', function ($scope, $http) { $http.get(backend + 'latest').success(function (result) {
$scope.subject = 'Artists added lately'; $scope.latest = result;
}); }]);
Might frontend people love it?
Drupal 7 / PhpTemplate
Drupal 8 / Twig
