SlideShare a Scribd company logo

Headless Drupal

•
•
drubb
drubb

Headless Drupal involves decoupling the Drupal backend from the frontend presentation layer. This allows for flexible frontend development while retaining Drupal's content management capabilities through a REST API. Key benefits include separation of concerns between content and presentation, using the best technologies for each, and improved performance through caching and scalability. Some topics to consider include available Drupal services, security, accessibility and SEO when implementing a headless architecture.

Related slideshows

Drupal 8 - Corso frontend development
Drupal 8 - Corso frontend developmentDrupal 8 - Corso frontend development
Drupal 8 - Corso frontend development
 
Odoo development workflow with pip and virtualenv
Odoo development workflow with pip and virtualenvOdoo development workflow with pip and virtualenv
Odoo development workflow with pip and virtualenv
 
Writing your Third Plugin
Writing your Third PluginWriting your Third Plugin
Writing your Third Plugin
 
1 of 38
Download to read offline
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
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 taking 5 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
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
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 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

More Related Content

Headless Drupal

  • 1. Headless Drupal Buzzword or Next Big Thing? Drupal City Berlin 16.11.2014
  • 2. About me Boris Böhne, aka drubb Drupal since 2006 Freelancer, based near Stuttgart, Germany @drubb
  • 7. “The frontend moves faster than Drupal, whether Drupal likes it or not.” @eatings 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
  • 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? Drupal Backend TARGETED / TAILORED! Frontend / App 1 Frontend / App 2
  • 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/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
  • 17. 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
  • 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 (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>
  • 19. 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!
  • 20. 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, ....
  • 21. RESTful Services in Drupal 8 Core
  • 22. RESTful Services in Drupal 8 Core
  • 23. RESTful Services in Drupal 8 Core
  • 24. RESTful Services in Drupal 8 Core
  • 25. RESTful Services in Drupal 8 Core
  • 26. Sample App: Music Hall of Fame + Drupal Backend Angular Frontend
  • 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? 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!
  • 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 stay” @drubb at Drupal City Berlin
  • 38. 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