Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Headless Drupal

1,571 views

Published on

Talk about Headless Drupal, from Drupal City Berlin, November 2014

  • Be the first to comment

Headless Drupal

  1. 1. Headless Drupal Buzzword or Next Big Thing? Drupal City Berlin 16.11.2014
  2. 2. About me Boris Böhne, aka drubb Drupal since 2006 Freelancer, based near Stuttgart, Germany @drubb
  3. 3. Frontend - 1995
  4. 4. Frontend - 2005
  5. 5. Frontend - 2015
  6. 6. Still using TWIG? Funny!
  7. 7. “The frontend moves faster than Drupal, whether Drupal likes it or not.” @eatings at DrupalCon Amsterdam
  8. 8. So Drupal 8 taking 5 years?
  9. 9. Even worse: Drupal frontend sucks!
  10. 10. ARE YOU KIDDING??? WE JUST FIXED THIS! Sorry, Morten...
  11. 11. Well, there’s a solution! Let’s just kill the Drupal frontend. What’s left? HEADLESS DRUPAL
  12. 12. 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!
  13. 13. So what about Headless Drupal? Request Response Drupal Backend Fancy Frontend DECOUPLED!
  14. 14. So what about Headless Drupal? Drupal Backend TARGETED / TAILORED! Frontend / App 1 Frontend / App 2
  15. 15. 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
  16. 16. 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
  17. 17. 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>
  18. 18. 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!
  19. 19. 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, ....
  20. 20. RESTful Services in Drupal 8 Core
  21. 21. RESTful Services in Drupal 8 Core
  22. 22. RESTful Services in Drupal 8 Core
  23. 23. RESTful Services in Drupal 8 Core
  24. 24. RESTful Services in Drupal 8 Core
  25. 25. Sample App: Music Hall of Fame + Drupal Backend Angular Frontend
  26. 26. Angular Frontend
  27. 27. Drupal Backend
  28. 28. Backend: 3 REST exports, using Views
  29. 29. 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>
  30. 30. 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; }); }]);
  31. 31. Might frontend people love it? Drupal 7 / PhpTemplate Drupal 8 / Twig Headless Drupal
  32. 32. 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!
  33. 33. 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?)
  34. 34. Topics to take care about ● Services not available ● Security ● Accessibility ● SEO
  35. 35. Leave all the toys to the frontend boys (and girls) ?
  36. 36. “Frontends may change, Drupal will stay” @drubb at Drupal City Berlin
  37. 37. 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

×