Headless Drupal
Buzzword or Next Big Thing?
Drupal City Berlin16.11.2014
About me
Boris Böhne, aka drubbDrupal since 2006Freelancer, based near Stuttgart, Germany
@drubb
Frontend - 1995
Frontend - 2005
Frontend - 2015
Still using TWIG? Funny!
“The frontend moves faster than Drupal, whether Drupal
likes it or not.”
@eatings at DrupalCon Amsterdam
So Drupal 8 taking5 years?
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 HeaderGET /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 HeaderHTTP/1.1 200 OKServer: nginxDate: Mon, 03 Nov 2014 18:20:24 GMTContent-Type: text/html; charset=UTF-8Transfer-Encoding: chunkedConnection: keep-aliveVary: Accept-EncodingAccess-Control-Allow-Origin: *Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONSAccess-Control-Allow-Headers: *Cache-Control: max-age=300, publicX-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=1Content-language: enExpires: Sun, 19 Nov 1978 05:00:00 GMTVary: CookieLast-Modified: Mon, 03 Nov 2014 18:20:24 GMTContent-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></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 entityPOST add entityPATCH 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
RESTful Services in Drupal 8 Core
RESTful Services in Drupal 8 Core
RESTful Services in Drupal 8 Core
RESTful Services in Drupal 8 Core
Sample App: Music Hall of Fame
+Drupal Backend Angular Frontend
Angular Frontend
Drupal Backend
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 controllersmusicApp.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 / PhpTemplateDrupal 8 / TwigHeadless 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 toysto 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-drupalhttp://friendlymachine.net/posts/headless-drupal-it-just-might-be-bigger-deal-twig
https://slideshare.net/rteijeiro/headless-drupal8http://build2be.com/content/state-rest-headless-drupal-8
Slides:https://slideshare.net/drubb
Recommended
![build pipes Automated front end · projects[drupal][version] = 7.35 projects[drupal][patch][] = XXX projects[yyy][type] = profile ... Functionality - using headless browser to perform](https://img.dokumen.tips/doc/110x75/6052e74a27693a3569229b5e/build-pipes-automated-front-end-projectsdrupalversion-735-projectsdrupalpatch.jpg)
