Headless Drupal

  • View

  • Download

Embed Size (px)


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

Text of Headless Drupal

  • 1. Headless Drupal Buzzword or Next Big Thing? Drupal City Berlin 16.11.2014

2. About me Boris Bhne, aka drubb Drupal since 2006 Freelancer, based near Stuttgart, Germany @drubb 3. Frontend - 1995 4. Frontend - 2005 5. Frontend - 2015 6. Still using TWIG? Funny! 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, theres a solution! Lets just kill the Drupal frontend. Whats left? HEADLESS DRUPAL 12. But wait - theres a (headless) REST Representational State Transfer - WTF? Architecture style for designing networked applications - ok! Request Response Communication between Client and Server - ah! 13. So what about Headless Drupal? Request Response Drupal Backend Fancy Frontend DECOUPLED! 14. So what about Headless Drupal? Drupal Backend TARGETED / TAILORED! Frontend / App 1 Frontend / App 2 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. 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. Example: Response (HTML) Request: GET node/1 + Accept: text/html Skip to main content

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. 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. RESTful Services in Drupal 8 Core 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. Sample App: Music Hall of Fame + Drupal Backend Angular Frontend 26. Angular Frontend 27. Drupal Backend 28. Backend: 3 REST exports, using Views 29. Angular frontend: sidebar view




{{artist.name | removePlus}}

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. Might frontend people love it? Drupal 7 / PhpTemplate Drupal 8 / Twig Headless Drupal 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. 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 wont ever change the backend, do we?) 34. Topics to take care about Services not available Security Accessibility SEO 35. Leave all the toys to the frontend boys (and girls) ? 36. Frontends may change, Drupal will stay @drubb at Drupal City Berlin 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