This document discusses decoupled or headless Drupal architectures. It defines decoupled Drupal as allowing other technologies to render the front-end experience, while Drupal serves as the content provider. Real-world examples are provided to illustrate the request-response pattern. Normal Drupal architecture is contrasted with headless architectures, where Drupal outputs JSON data via REST APIs rather than HTML. Headless Drupal can then connect to multiple front-end clients and frameworks. Drupal 7 and 8 options for decoupling are examined, as well as a case study of using Drupal 7 as a content provider with a Symfony front-end.

1. Decoupled/Headless Drupal
Ahmad Hassan
Drupal:drupalmind
twitter@drupalmind123

2. Decoupled Drupal
● What is Decoupled/Headless Drupal.
● How it is different from normal drupal architecture.
● How drupal connect to Frontend.
● Which Drupal version provide more flexibility for decoupling
● A case study, a drupal based shops where drupal act as headless drupal with
symfony as frontend!

3. What is Headless/decouple Drupal?
A decoupled Drupal may allows developers to use other technologies to render
the front-end experience.
With decoupled Drupal, the Drupal serves as content provider to other front-end
systems such as:
● Native mobile applications
● conversational UIs,
● applications built in JavaScript frameworks.

4. Real world example
● How we communicate to each other in real world send messages via
voice/writing or signalling. This is our request.
● And what we got from other is response.
● It can be in any format doesn't’t matter.
● But everything is based on request/response pattern.

5. Real world to Technology
● Web is also using the pattern, there is some request as URL. And server
produces responses.
● Until Drupal 7 we behave a bit differently but drupal 8 we have already same
pattern using Symfony.
● Each URL/request is attached with some Route in Symfony which is attach
with Controllers and so on .
● But this is only how world communicate to us.
● Let See now how This pattern is helping us.

6. What is Headless/decouple Drupal?
● Drupal can behave as back-end applications and native applications, single-
page applications, digital signage, and many others.
● Drupal Services such as the core REST API, JSON API, and GraphQL are
actually Drupal customers.
● Other Applications are consuming Drupal as service provider.
● It can be content, configuration or authentication but everything get by
request and response method

7. Normal Drupal Architecture
Drupal
Theme Layer
Data
Theme layer
Frontend/htmlFrontend
(tpl/twigs etc.)

8. Normal Drupal Architecture
● Drupal generate Contents
● We can define its structure, roles
and permission's according to
design
● Define block, views, context,
paragraph
● This builds Drupal structure
Drupal
Theme Layer
Data
Theme layer
Frontend/htmlFrontend
(tpl/twigs etc.)

9. Normal Drupal Architecture
● Then comes the theme layer.
● Define your images, presets.
● Template file, tpl or twig files.
● Or define and use theme
functions to redefine some
elements.
● Custom modules to override
normal behavior according to
design.Drupal
Theme Layer
Data
Theme layer
Frontend/htmlFrontend
(tpl/twigs etc.)

10. Real world example
● How we communicate to each other in real world send messages via
voice/writing or signalling. This is our request.
● And what we got from other is response.
● It can be in any format doesn't’t matter.
● But everything is based on request/response pattern.

11. Headless Drupal
First step is again same to define Drupal structure according to design.
But…
Drupal

12. Headless Drupal
But…
Now we will output new data
type instead of HTML
produced by Drupal…
Drupal uses REST API to
output data as jsonDrupal
REST API
Data
Frontend/html
Json
Front-end Application
Templates

15. Decouple Drupal Architecture
Drupal
serves as Content
provider
Drupal 8 output is also
possible as json,
hal_json
Theme Layer
Front-end - client
request
Json response
html

16. Connect to multiple Frontend
Drupal
Theme layer
Front-end
request
APP
request
Json response
HTML
HTML

17. Decouple Drupal Architecture
Drupal
REST API
Data
Frontend/html
Json
Java Script Libraries
(React, Angular!!!)
Templates
request
response

18. Decouple Drupal Architecture
Drupal
REST API
Data
Frontend/html
Json
Apps
request
response

19. Which Drupal version provide more flexibility for
decoupling
● Drupal 7… we can even achieve it with contrib modules
● Drupal 8 provide services as core module, with different output options.

20. Case sudy: Drupal 7
Drupal 7
Act as content provider.
Json translation
Front-end
Theme Layer ---
Custom modules Generate
Json files for contents,
Menus, other configuration
Json Files

21. Case study: Drupal 7
Drupal 7
Act as content provider.
Symfony Application
translate the Json
files into HTML
Front-end
● On content creation or updation
in drupal.
● create /update json file.
● It runs jenkin-jobs to transfer
these files from drupal to front-
end.
● These files are translated to
html in Symfony.
Theme Layer ---
Custom modules Generate
Json files for contents,
Menus, other configuration
Json Files

22. Case study: Drupal 7, 8
Drupal-7
Act as product provider.
Drupal 8, Checkout
Create hash key from
product data and
authenticate with checkout.
And post Product to
checkout.
Submit
label
label
label
label
label
Get products by page request
Give hash keys of product

23. Future of Drupal Decoupling-presented in
drupalcon Wien

24. Dries Views of Future of Decoupling:
https://dri.es/should-we-decouple-drupal-with-a-
client-side-framework

26. Questions