Headless Drupal. Buzzword or Next Big Thing? Drupal City Berlin

Transcription

1 Headless Drupal Buzzword or Next Big Thing? Drupal City Berlin

2 About me Boris Böhne, aka drubb Drupal since 2006 Freelancer, based near Stuttgart,

3 Frontend

4 Frontend

5 Frontend

6 Still using TWIG? Funny!

7 The frontend moves faster than Drupal, whether Drupal likes it or at DrupalCon Amsterdam

8 So Drupal 8 taking 5 years?

9 Even worse: Drupal frontend sucks!

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

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

12

13 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!

14 So what about Headless Drupal? Request Response Drupal Backend Fancy Frontend DECOUPLED!

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

16 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/ (KHTML, like Gecko) Chrome/ Safari/ Accept-Encoding: gzip,deflate,sdch Accept-Language: de-de,de;q=0.8,en-us;q=0.6,en;q=0.4

17 Example: Response Header HTTP/ OK Server: nginx Date: Mon, 03 Nov :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 ( X-UA-Compatible: IE=edge,chrome=1 Content-language: en Expires: Sun, 19 Nov :00:00 GMT Vary: Cookie Last-Modified: Mon, 03 Nov :20:24 GMT Content-Encoding: gzip

18 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 ( /> <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>

19 Example: Response (JSON) Request: GET node/1 + Accept: application/json {"nid":[{"value":"1"}],"uuid":[{"value":"e1d6bb85-f100-41cb-a500-a fced"}],"vid":[{"value":"1"}],"type":[{"target_id":" artist"}],"langcode":[{"value":"en"}],"title":[{"value":"genesis"}],"uid":[{"target_id":"1"}],"status":[{"value":"1"}],"created": [{"value":" "}],"changed":[{"value":" "}],"promote":[{"value":"0"}],"sticky":[{"value":"0"}]," revision_timestamp":[{"value":" "}],"revision_uid":[{"target_id":"1"}],"revision_log":[{"value":""}],"path":[{"alias": null,"pid":null}],"field_description":[{"value":"genesis are a British rock band formed in 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!

20 Drupal 8 REST request methods GET POST PATCH DELETE get entity add entity change entity (complete or partial) remove entity Entities might be nodes, comments, users, roles, terms, menus, blocks, files, views, image styles, shortcuts, display modes, form modes, text formats,...

21 RESTful Services in Drupal 8 Core

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

27 Angular Frontend

28 Drupal Backend

29 Backend: 3 REST exports, using Views

30 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>

31 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; }); }]);

32 Might frontend people love it? Drupal 7 / PhpTemplate Drupal 8 / Twig Headless Drupal

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

34 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?)

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

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

37 Frontends may change, Drupal will at Drupal City Berlin

38 Questions? Thank You! Read on: Slides: