SlideShare ist ein Scribd-Unternehmen logo
1 von 38
Downloaden Sie, um offline zu lesen
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> <!-- /#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 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

Más contenido relacionado

Was ist angesagt?

Drupal 8 - Corso frontend development
Drupal 8 - Corso frontend developmentDrupal 8 - Corso frontend development
Drupal 8 - Corso frontend developmentsparkfabrik
 
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 virtualenvacsone
 
Writing your Third Plugin
Writing your Third PluginWriting your Third Plugin
Writing your Third PluginJustin Ryan
 
Jumping Into WordPress Plugin Programming
Jumping Into WordPress Plugin ProgrammingJumping Into WordPress Plugin Programming
Jumping Into WordPress Plugin ProgrammingDougal Campbell
 
Magento 2 Development
Magento 2 DevelopmentMagento 2 Development
Magento 2 DevelopmentDuke Dao
 
Creating a Plug-In Architecture
Creating a Plug-In ArchitectureCreating a Plug-In Architecture
Creating a Plug-In Architectureondrejbalas
 
DevHub 3 - Composer plus Magento
DevHub 3 - Composer plus MagentoDevHub 3 - Composer plus Magento
DevHub 3 - Composer plus MagentoMagento Dev
 
第1回名古屋Grails/Groogy勉強会「Grailsを始めてみよう!」
第1回名古屋Grails/Groogy勉強会「Grailsを始めてみよう!」第1回名古屋Grails/Groogy勉強会「Grailsを始めてみよう!」
第1回名古屋Grails/Groogy勉強会「Grailsを始めてみよう!」Tsuyoshi Yamamoto
 
Views plugins-in-d7-and-d8
Views plugins-in-d7-and-d8Views plugins-in-d7-and-d8
Views plugins-in-d7-and-d8Frank Holldorff
 
Django, What is it, Why is it cool?
Django, What is it, Why is it cool?Django, What is it, Why is it cool?
Django, What is it, Why is it cool?Tom Brander
 
[drupalday2017] - REST in pieces
[drupalday2017] - REST in pieces[drupalday2017] - REST in pieces
[drupalday2017] - REST in piecesDrupalDay
 
An easy guide to Plugin Development
An easy guide to Plugin DevelopmentAn easy guide to Plugin Development
An easy guide to Plugin DevelopmentShinichi Nishikawa
 
From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)Joseph Chiang
 
Dependency management in Magento with Composer
Dependency management in Magento with ComposerDependency management in Magento with Composer
Dependency management in Magento with ComposerManuele Menozzi
 
Introduction to Django
Introduction to DjangoIntroduction to Django
Introduction to DjangoJames Casey
 
Django for Beginners
Django for BeginnersDjango for Beginners
Django for BeginnersJason Davies
 
How to create a joomla component from scratch
How to create a joomla component from scratchHow to create a joomla component from scratch
How to create a joomla component from scratchTim Plummer
 
Writing Software not Code with Cucumber
Writing Software not Code with CucumberWriting Software not Code with Cucumber
Writing Software not Code with CucumberBen Mabey
 

Was ist angesagt? (20)

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
 
Jumping Into WordPress Plugin Programming
Jumping Into WordPress Plugin ProgrammingJumping Into WordPress Plugin Programming
Jumping Into WordPress Plugin Programming
 
Magento 2 Development
Magento 2 DevelopmentMagento 2 Development
Magento 2 Development
 
Django
DjangoDjango
Django
 
Creating a Plug-In Architecture
Creating a Plug-In ArchitectureCreating a Plug-In Architecture
Creating a Plug-In Architecture
 
DevHub 3 - Composer plus Magento
DevHub 3 - Composer plus MagentoDevHub 3 - Composer plus Magento
DevHub 3 - Composer plus Magento
 
第1回名古屋Grails/Groogy勉強会「Grailsを始めてみよう!」
第1回名古屋Grails/Groogy勉強会「Grailsを始めてみよう!」第1回名古屋Grails/Groogy勉強会「Grailsを始めてみよう!」
第1回名古屋Grails/Groogy勉強会「Grailsを始めてみよう!」
 
Views plugins-in-d7-and-d8
Views plugins-in-d7-and-d8Views plugins-in-d7-and-d8
Views plugins-in-d7-and-d8
 
Django, What is it, Why is it cool?
Django, What is it, Why is it cool?Django, What is it, Why is it cool?
Django, What is it, Why is it cool?
 
[drupalday2017] - REST in pieces
[drupalday2017] - REST in pieces[drupalday2017] - REST in pieces
[drupalday2017] - REST in pieces
 
An easy guide to Plugin Development
An easy guide to Plugin DevelopmentAn easy guide to Plugin Development
An easy guide to Plugin Development
 
Django by rj
Django by rjDjango by rj
Django by rj
 
From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)
 
Dependency management in Magento with Composer
Dependency management in Magento with ComposerDependency management in Magento with Composer
Dependency management in Magento with Composer
 
Introduction to Django
Introduction to DjangoIntroduction to Django
Introduction to Django
 
Django for Beginners
Django for BeginnersDjango for Beginners
Django for Beginners
 
How to create a joomla component from scratch
How to create a joomla component from scratchHow to create a joomla component from scratch
How to create a joomla component from scratch
 
Writing Software not Code with Cucumber
Writing Software not Code with CucumberWriting Software not Code with Cucumber
Writing Software not Code with Cucumber
 

Andere mochten auch

Our AWS Cloud Journey - Andrew Boag
Our AWS Cloud Journey - Andrew BoagOur AWS Cloud Journey - Andrew Boag
Our AWS Cloud Journey - Andrew BoagDrupalCampDN
 
الملوثات الهيدروكربونية ومستوى إنتشارها في منطقة عمليات مصفاة شركة سرت بالبريقة
الملوثات الهيدروكربونية ومستوى إنتشارها في منطقة عمليات مصفاة شركة سرت بالبريقةالملوثات الهيدروكربونية ومستوى إنتشارها في منطقة عمليات مصفاة شركة سرت بالبريقة
الملوثات الهيدروكربونية ومستوى إنتشارها في منطقة عمليات مصفاة شركة سرت بالبريقةTawfig Falani
 
Guzzle in Drupal 8 and as a REST client - Артем Мирошник
Guzzle in Drupal 8 and as a REST client - Артем МирошникGuzzle in Drupal 8 and as a REST client - Артем Мирошник
Guzzle in Drupal 8 and as a REST client - Артем МирошникDrupalCampDN
 
An introduction to consuming remote APIs with Drupal 7
An introduction to consuming remote APIs with Drupal 7An introduction to consuming remote APIs with Drupal 7
An introduction to consuming remote APIs with Drupal 7Josh Kopel
 
Building a Node.JS accelerator for your headless Drupal backend - DrupalCamp ...
Building a Node.JS accelerator for your headless Drupal backend - DrupalCamp ...Building a Node.JS accelerator for your headless Drupal backend - DrupalCamp ...
Building a Node.JS accelerator for your headless Drupal backend - DrupalCamp ...Exove
 

Andere mochten auch (6)

Our AWS Cloud Journey - Andrew Boag
Our AWS Cloud Journey - Andrew BoagOur AWS Cloud Journey - Andrew Boag
Our AWS Cloud Journey - Andrew Boag
 
الملوثات الهيدروكربونية ومستوى إنتشارها في منطقة عمليات مصفاة شركة سرت بالبريقة
الملوثات الهيدروكربونية ومستوى إنتشارها في منطقة عمليات مصفاة شركة سرت بالبريقةالملوثات الهيدروكربونية ومستوى إنتشارها في منطقة عمليات مصفاة شركة سرت بالبريقة
الملوثات الهيدروكربونية ومستوى إنتشارها في منطقة عمليات مصفاة شركة سرت بالبريقة
 
Guzzle in Drupal 8 and as a REST client - Артем Мирошник
Guzzle in Drupal 8 and as a REST client - Артем МирошникGuzzle in Drupal 8 and as a REST client - Артем Мирошник
Guzzle in Drupal 8 and as a REST client - Артем Мирошник
 
An introduction to consuming remote APIs with Drupal 7
An introduction to consuming remote APIs with Drupal 7An introduction to consuming remote APIs with Drupal 7
An introduction to consuming remote APIs with Drupal 7
 
Headless Drupal 8
Headless Drupal 8Headless Drupal 8
Headless Drupal 8
 
Building a Node.JS accelerator for your headless Drupal backend - DrupalCamp ...
Building a Node.JS accelerator for your headless Drupal backend - DrupalCamp ...Building a Node.JS accelerator for your headless Drupal backend - DrupalCamp ...
Building a Node.JS accelerator for your headless Drupal backend - DrupalCamp ...
 

Ähnlich wie Headless Drupal

Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011Ryan Price
 
Opencast Admin UI - Introduction to developing using AngularJS
Opencast Admin UI - Introduction to developing using AngularJSOpencast Admin UI - Introduction to developing using AngularJS
Opencast Admin UI - Introduction to developing using AngularJSbuttyx
 
HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010alanburke
 
Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.Daniel Downs
 
Drupal 8: What's new? Anton Shubkin
Drupal 8: What's new? Anton ShubkinDrupal 8: What's new? Anton Shubkin
Drupal 8: What's new? Anton ShubkinADCI Solutions
 
GDayX - Advanced Angular.JS
GDayX - Advanced Angular.JSGDayX - Advanced Angular.JS
GDayX - Advanced Angular.JSNicolas Embleton
 
Reactive Type safe Webcomponents with skateJS
Reactive Type safe Webcomponents with skateJSReactive Type safe Webcomponents with skateJS
Reactive Type safe Webcomponents with skateJSMartin Hochel
 
Creating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web ComponentsCreating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web ComponentsRachael L Moore
 
jQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveisjQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveisPablo Garrido
 
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using BootstrapStop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using Bootstrapfreshlybakedpixels
 
The State of Drupal 8
The State of Drupal 8The State of Drupal 8
The State of Drupal 8nyccamp
 
Html5 & CSS overview
Html5 & CSS overviewHtml5 & CSS overview
Html5 & CSS overviewIvan Frantar
 
DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalGap. How to create native application for mobile devices based on Drupa...DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalGap. How to create native application for mobile devices based on Drupa...DrupalCampDN
 
DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalGap. How to create native application for mobile devices based on Drupa...DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalGap. How to create native application for mobile devices based on Drupa...Alex S
 
Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)Joao Lucas Santana
 
Adriano Di Luzio - Davvy - PyconSEI Talk
Adriano Di Luzio - Davvy - PyconSEI TalkAdriano Di Luzio - Davvy - PyconSEI Talk
Adriano Di Luzio - Davvy - PyconSEI Talkaldur999
 
Improve theming with (Twitter) Bootstrap
Improve theming with  (Twitter) BootstrapImprove theming with  (Twitter) Bootstrap
Improve theming with (Twitter) BootstrapAndrey Yurtaev
 
Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...
Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...
Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...Alessandro Nadalin
 

Ähnlich wie Headless Drupal (20)

HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 Essentials
 
Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011
 
Opencast Admin UI - Introduction to developing using AngularJS
Opencast Admin UI - Introduction to developing using AngularJSOpencast Admin UI - Introduction to developing using AngularJS
Opencast Admin UI - Introduction to developing using AngularJS
 
HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010
 
Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.
 
Drupal 8: What's new? Anton Shubkin
Drupal 8: What's new? Anton ShubkinDrupal 8: What's new? Anton Shubkin
Drupal 8: What's new? Anton Shubkin
 
GDayX - Advanced Angular.JS
GDayX - Advanced Angular.JSGDayX - Advanced Angular.JS
GDayX - Advanced Angular.JS
 
Reactive Type safe Webcomponents with skateJS
Reactive Type safe Webcomponents with skateJSReactive Type safe Webcomponents with skateJS
Reactive Type safe Webcomponents with skateJS
 
Creating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web ComponentsCreating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web Components
 
jQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveisjQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveis
 
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using BootstrapStop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
 
Test upload
Test uploadTest upload
Test upload
 
The State of Drupal 8
The State of Drupal 8The State of Drupal 8
The State of Drupal 8
 
Html5 & CSS overview
Html5 & CSS overviewHtml5 & CSS overview
Html5 & CSS overview
 
DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalGap. How to create native application for mobile devices based on Drupa...DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalGap. How to create native application for mobile devices based on Drupa...
 
DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalGap. How to create native application for mobile devices based on Drupa...DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalGap. How to create native application for mobile devices based on Drupa...
 
Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)
 
Adriano Di Luzio - Davvy - PyconSEI Talk
Adriano Di Luzio - Davvy - PyconSEI TalkAdriano Di Luzio - Davvy - PyconSEI Talk
Adriano Di Luzio - Davvy - PyconSEI Talk
 
Improve theming with (Twitter) Bootstrap
Improve theming with  (Twitter) BootstrapImprove theming with  (Twitter) Bootstrap
Improve theming with (Twitter) Bootstrap
 
Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...
Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...
Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...
 

Mehr von drubb

Barrierefreie Webseiten
Barrierefreie WebseitenBarrierefreie Webseiten
Barrierefreie Webseitendrubb
 
Drupal 9 Entity Bundle Classes
Drupal 9 Entity Bundle ClassesDrupal 9 Entity Bundle Classes
Drupal 9 Entity Bundle Classesdrubb
 
Drupal 8 Dependency Injection Using Traits
Drupal 8 Dependency Injection Using TraitsDrupal 8 Dependency Injection Using Traits
Drupal 8 Dependency Injection Using Traitsdrubb
 
Closing the Drupal Hosting Gap - A Review of Wodby
Closing the Drupal Hosting Gap - A Review of WodbyClosing the Drupal Hosting Gap - A Review of Wodby
Closing the Drupal Hosting Gap - A Review of Wodbydrubb
 
Drupal 8: Theming
Drupal 8: ThemingDrupal 8: Theming
Drupal 8: Themingdrubb
 
Drupal 8: Entities
Drupal 8: EntitiesDrupal 8: Entities
Drupal 8: Entitiesdrubb
 
Drupal 8: Forms
Drupal 8: FormsDrupal 8: Forms
Drupal 8: Formsdrubb
 
Drupal 8: Routing & More
Drupal 8: Routing & MoreDrupal 8: Routing & More
Drupal 8: Routing & Moredrubb
 
Drupal 8 Sample Module
Drupal 8 Sample ModuleDrupal 8 Sample Module
Drupal 8 Sample Moduledrubb
 
Spamschutzverfahren für Drupal
Spamschutzverfahren für DrupalSpamschutzverfahren für Drupal
Spamschutzverfahren für Drupaldrubb
 
Drupal 8: TWIG Template Engine
Drupal 8:  TWIG Template EngineDrupal 8:  TWIG Template Engine
Drupal 8: TWIG Template Enginedrubb
 
Drupal 8: Neuerungen im Überblick
Drupal 8:  Neuerungen im ÜberblickDrupal 8:  Neuerungen im Überblick
Drupal 8: Neuerungen im Überblickdrubb
 
Drupal Entities
Drupal EntitiesDrupal Entities
Drupal Entitiesdrubb
 

Mehr von drubb (13)

Barrierefreie Webseiten
Barrierefreie WebseitenBarrierefreie Webseiten
Barrierefreie Webseiten
 
Drupal 9 Entity Bundle Classes
Drupal 9 Entity Bundle ClassesDrupal 9 Entity Bundle Classes
Drupal 9 Entity Bundle Classes
 
Drupal 8 Dependency Injection Using Traits
Drupal 8 Dependency Injection Using TraitsDrupal 8 Dependency Injection Using Traits
Drupal 8 Dependency Injection Using Traits
 
Closing the Drupal Hosting Gap - A Review of Wodby
Closing the Drupal Hosting Gap - A Review of WodbyClosing the Drupal Hosting Gap - A Review of Wodby
Closing the Drupal Hosting Gap - A Review of Wodby
 
Drupal 8: Theming
Drupal 8: ThemingDrupal 8: Theming
Drupal 8: Theming
 
Drupal 8: Entities
Drupal 8: EntitiesDrupal 8: Entities
Drupal 8: Entities
 
Drupal 8: Forms
Drupal 8: FormsDrupal 8: Forms
Drupal 8: Forms
 
Drupal 8: Routing & More
Drupal 8: Routing & MoreDrupal 8: Routing & More
Drupal 8: Routing & More
 
Drupal 8 Sample Module
Drupal 8 Sample ModuleDrupal 8 Sample Module
Drupal 8 Sample Module
 
Spamschutzverfahren für Drupal
Spamschutzverfahren für DrupalSpamschutzverfahren für Drupal
Spamschutzverfahren für Drupal
 
Drupal 8: TWIG Template Engine
Drupal 8:  TWIG Template EngineDrupal 8:  TWIG Template Engine
Drupal 8: TWIG Template Engine
 
Drupal 8: Neuerungen im Überblick
Drupal 8:  Neuerungen im ÜberblickDrupal 8:  Neuerungen im Überblick
Drupal 8: Neuerungen im Überblick
 
Drupal Entities
Drupal EntitiesDrupal Entities
Drupal Entities
 

Último

BaruwaRaquella_Retail Store Presentation.pptx
BaruwaRaquella_Retail Store Presentation.pptxBaruwaRaquella_Retail Store Presentation.pptx
BaruwaRaquella_Retail Store Presentation.pptxRaquellaBaruwa
 
LAUNCH: Intersections between violence against children and violence against ...
LAUNCH: Intersections between violence against children and violence against ...LAUNCH: Intersections between violence against children and violence against ...
LAUNCH: Intersections between violence against children and violence against ...UNICEF Office of Research - Innocenti
 
Evaluating LLM Models for Production Systems Methods and Practices -
Evaluating LLM Models for Production Systems Methods and Practices -Evaluating LLM Models for Production Systems Methods and Practices -
Evaluating LLM Models for Production Systems Methods and Practices -alopatenko
 
wonder woman:quiz on female achievements
wonder woman:quiz on female achievementswonder woman:quiz on female achievements
wonder woman:quiz on female achievementsRemya Roshni
 
Leadership in Difficult Times- Strategies for Overcoming Challenges - Reflect...
Leadership in Difficult Times- Strategies for Overcoming Challenges - Reflect...Leadership in Difficult Times- Strategies for Overcoming Challenges - Reflect...
Leadership in Difficult Times- Strategies for Overcoming Challenges - Reflect...Kayode Fayemi
 
Retail marketing Supply chain management SLIDESHARE.pptx
Retail marketing Supply chain management SLIDESHARE.pptxRetail marketing Supply chain management SLIDESHARE.pptx
Retail marketing Supply chain management SLIDESHARE.pptxBharathBunny10
 
Self Editing Your Novel Part 3: Who's Telling This Story?
Self Editing Your Novel Part 3: Who's Telling This Story?Self Editing Your Novel Part 3: Who's Telling This Story?
Self Editing Your Novel Part 3: Who's Telling This Story?Beth Jusino
 
110 Philippines. quiz bee Power PoInt Presentation
110 Philippines. quiz bee Power PoInt Presentation110 Philippines. quiz bee Power PoInt Presentation
110 Philippines. quiz bee Power PoInt PresentationNorHaiFatun
 
2024 QRC PLM Recruitment Praesentation.pdf
2024 QRC PLM Recruitment Praesentation.pdf2024 QRC PLM Recruitment Praesentation.pdf
2024 QRC PLM Recruitment Praesentation.pdfJoerg Speikamp
 
DAY 06 A Revelation 03-10-2024 PpPT.pptx
DAY 06 A Revelation 03-10-2024 PpPT.pptxDAY 06 A Revelation 03-10-2024 PpPT.pptx
DAY 06 A Revelation 03-10-2024 PpPT.pptxFamilyWorshipCenterD
 

Último (12)

BaruwaRaquella_Retail Store Presentation.pptx
BaruwaRaquella_Retail Store Presentation.pptxBaruwaRaquella_Retail Store Presentation.pptx
BaruwaRaquella_Retail Store Presentation.pptx
 
LAUNCH: Intersections between violence against children and violence against ...
LAUNCH: Intersections between violence against children and violence against ...LAUNCH: Intersections between violence against children and violence against ...
LAUNCH: Intersections between violence against children and violence against ...
 
Evaluating LLM Models for Production Systems Methods and Practices -
Evaluating LLM Models for Production Systems Methods and Practices -Evaluating LLM Models for Production Systems Methods and Practices -
Evaluating LLM Models for Production Systems Methods and Practices -
 
wonder woman:quiz on female achievements
wonder woman:quiz on female achievementswonder woman:quiz on female achievements
wonder woman:quiz on female achievements
 
NOC_SXSW_Non-ObviousThinking_2024_SLIDES.pptx
NOC_SXSW_Non-ObviousThinking_2024_SLIDES.pptxNOC_SXSW_Non-ObviousThinking_2024_SLIDES.pptx
NOC_SXSW_Non-ObviousThinking_2024_SLIDES.pptx
 
Leadership in Difficult Times- Strategies for Overcoming Challenges - Reflect...
Leadership in Difficult Times- Strategies for Overcoming Challenges - Reflect...Leadership in Difficult Times- Strategies for Overcoming Challenges - Reflect...
Leadership in Difficult Times- Strategies for Overcoming Challenges - Reflect...
 
Retail marketing Supply chain management SLIDESHARE.pptx
Retail marketing Supply chain management SLIDESHARE.pptxRetail marketing Supply chain management SLIDESHARE.pptx
Retail marketing Supply chain management SLIDESHARE.pptx
 
Self Editing Your Novel Part 3: Who's Telling This Story?
Self Editing Your Novel Part 3: Who's Telling This Story?Self Editing Your Novel Part 3: Who's Telling This Story?
Self Editing Your Novel Part 3: Who's Telling This Story?
 
110 Philippines. quiz bee Power PoInt Presentation
110 Philippines. quiz bee Power PoInt Presentation110 Philippines. quiz bee Power PoInt Presentation
110 Philippines. quiz bee Power PoInt Presentation
 
2024 QRC PLM Recruitment Praesentation.pdf
2024 QRC PLM Recruitment Praesentation.pdf2024 QRC PLM Recruitment Praesentation.pdf
2024 QRC PLM Recruitment Praesentation.pdf
 
Tethex Cards - complete presentation in English
Tethex Cards - complete presentation in EnglishTethex Cards - complete presentation in English
Tethex Cards - complete presentation in English
 
DAY 06 A Revelation 03-10-2024 PpPT.pptx
DAY 06 A Revelation 03-10-2024 PpPT.pptxDAY 06 A Revelation 03-10-2024 PpPT.pptx
DAY 06 A Revelation 03-10-2024 PpPT.pptx
 

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