Headless Drupal Buzzword or Next Big Thing

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

“The frontend moves faster
than Drupal, whether Drupal
likes it or not.”
@eatings at DrupalCon Amsterdam

Even worse: Drupal frontend sucks!

ARE YOU KIDDING???
WE JUST FIXED THIS!
Sorry, Morten...

Well, there’s a solution!
Let’s just kill the Drupal frontend. What’s left?
HEADLESS DRUPAL

But wait - there’s a (headless) REST
● Representational State Transfer - 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
DECOUPLED!

So what about Headless Drupal?
Drupal Backend
TARGETED / TAILORED!
Frontend / App 1
Frontend / App 2

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.8
User-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
Accept-Language: de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4

Example: Response Header
HTTP/1.1 200 OK
Server: 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> 
</body>
</html>

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 Core serves complete entities as JSON response!

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, ....

RESTful Services in Drupal 8 Core

Sample App: Music Hall of Fame
+
Drupal Backend Angular Frontend

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
Headless Drupal

Might project managers love it?
Drupal deals with
● Content Modeling
● Storage
● Backup
● Authorization
● ...
Frontend deals with
● HTML / CSS / JS
● Typography
● Layouts
● Sliders
● Lightboxes
● Galleries
● ...
Content-centric interface:
● Entities / Entity views
● Assets
● Easy documentable
Clean separation of
concerns!

Benefits of Headless Drupal
● Decoupling / Separation of concerns
● Content-centric thinking
● State of the art frontend + sustainable backend
● Suitable technologies for different targets
● Flexibility choosing backend / frontend
● Sustainable interface (API)
● Performance / Scalability
(of course we won’t ever change the backend, do we?)

Topics to take care about
● Services not available
● Security
● Accessibility
● SEO

Leave all the toys
to the frontend boys
(and girls) ?

“Frontends may change,
Drupal will stay”
@drubb at Drupal City Berlin

Questions ?
Thank You !
Read on:
https://groups.drupal.org/headless-drupal
http://friendlymachine.net/posts/headless-drupal-it-just-might-be-bigger-deal-twig
https://slideshare.net/rteijeiro/headless-drupal8
http://build2be.com/content/state-rest-headless-drupal-8
Slides:
https://slideshare.net/drubb

Headless Drupal Buzzword or Next Big Thing

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Headless Drupal Buzzword or Next Big Thing

Similar to Headless Drupal Buzzword or Next Big Thing (20)

More from drubb

More from drubb (13)

Recently uploaded

Recently uploaded (20)

Headless Drupal Buzzword or Next Big Thing