Decoupled drupal DcRuhr 2018

1. Decoupled Drupal
Ahmad Hassan
Skype/drupal.org: drupalmind
Twitter: @drupalmind123
Software Engineer @

2. Decoupled Drupal
● What is Decoupled/Headless Drupal.
● How it is different from normal drupal architecture.
● Do you really need decoupling?
● How drupal connect to Frontend.
● Drupal 7 Decoupling.

3. What is Headless/decoupled Drupal?
A decoupled Drupal may allows developers to use frontend Frameworks 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. What is Headless/decoupled Drupal?
● Drupal can behave as back-end applications for native applications, single-page
applications, digital signage, communication device and many others.
● Drupal Services such as the core REST API, JSON API, and GraphQL are actually
Drupal customers.
● Other Applications/Framworks are consuming Drupal as service provider.
● It can be content, configuration or authentication but everything get by request
and response method

5. What is Headless/decoupled Drupal?
● Instead of sticking to Drupal layout/theme why not try out best user experience
theming frameworks.
● There are some CMSs which provide APIs to create frontend like Contentful etc.
● But Drupal provides API first not API only technique which still enable us to use
drupal default layout and expose drupal content to other Plateforms

6. Normal Drupal Architecture
Drupal CMS
Theme Layer
Data
Theme layer
Frontend/html
Frontend
(tpl/twigs etc.)

7. Normal Drupal Architecture
Drupal
Theme Layer
Frontend
(tpl/twigs etc.)
● Drupal generate Contents
● We can define structure according to
design
● Define block, views, context, paragraph,
field collection.
● With all these we can builds drupal
structure
● We can design it with drupal theming tools

8. 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
Frontend
(tpl/twigs etc.)

9. Headless Drupal
First step is again same to define
drupal structure according to
design.
But…
Drupal
Web Services
Data
HTML
Json/GraphQL
Front-end Application
Templates

10. 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
Web Services
Front-end Application
Templates
Data
HTML
Json/GraphQL

11. Decouple Drupal Architecture
Drupal
serves as Content
provider
Drupal 8 output is also
possible as json,
hal_json
Theme Layer
JS Framework/
native app or other
interfaces
Front-end - client
GET request
Json
response html

12. Connect to multiple Frontend
Drupal
Front-end
GET request
APP
Json
response HTMLTheme Layer
JS Framework/
native app or
other interfaces
GET request

13. Decouple Drupal Architecture
Drupal
Web Services
Data
Frontend/html
Json/GraphQL
Javascript Framework
(React, Angular!!!)
Templates
request
response

14. Decouple Drupal Architecture
Drupal
Web Services
Data
Frontend/html
Json/GraphQL
Apps
request
response

15. Decoupling Advantages
Drupal
REST API
Apps
request
response
● Create once,
Publish anywhere,
● Centralized Content
● API First
● Open gate for Frontend developers
● Can Work independently both
frontend and backend developer

16. Decoupling Advantages
● Migrate/Upgrading Drupal
○ Majore drupal upgrade from 6 to 7 to 6/7 to D8 is relatively expensive.
○ In normal Drupal architecture, we have to upgrade backend and
frontend also need modification as changes in templates.
○ With Decoupling we can reduce frontend effort to minimum.

17. Decoupling Advantages
● Upgrading/migrate Drupal
○ Above example backend develop in drupal older version. And
frontend in symfony or say angular.
○ When upgrading to drupal, Frontend need no changes, it depends on
responses.
○ Similarly upgrade to React or Node.js dont need to upgrade Drupal 8.
Frontend
Backend
Drupal 7
Symfony
Drupal 8
React
...
...

18. Decoupling Advantages
● CMS First vs Design first approach
○ CMS first mean you user design can be compromised.
○ And design first means CMS need a lot of custom modifications
○ But with decoupling most of concerns of design can be achieved with
less or no custom modifications.

19. Decoupling Disadvantage
● Loss Context
○ Front end can’t use inplace editing or edit links directly from landing
pages.
○ Front end can’t use from Drupal admin menus
○ Front end can’t use CMS strong layout diplayes(menus, DS, panels,
Context etc).

20. Decoupling Disadvantage
● Loss Management
○ Content publishing and unpublishing can be costly.
○ Time control would be tricky to use.

21. Decoupling Disadvantage
● Preview
○ Live preview is key for editors after creating content.
○ Preview real time content in CMS with decoupled systems is challenging
○ Even more challenging when preview for unpublish content. Editors like to
see their pages before making them public.
○ Preview of some revision is also one of the challenging task to generate.

22. Advantages vs Disadvantages
● There might be project where you concern about disadvantages and you can work
as decouple, sometimes you need instances preview, to control content
moderation and scheduling.
● And in some project it suits you, if you can have frontend power and invest time.
And specially when you know your CMS content will serve more than one clients.
● So it varies project to project.

23. 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.

24. Connecting to Frontend Framework... Web Services
● REST API - Client requests with http request and server(CMS) response as JSON
which support most of JS frameworks.
● GraphQL - it limits the response based on request. So if you need only few fields
you need not to request full object. You can just request few fields and only those
fields will be populated in response.

25. Connecting to Frontend Framework... Web Services
● Drupal 8 core has RESTful Web Services included.
○ We can expose data as REST resources
○ Customize a REST resource's formats , when requesting http (GET) format
need to specify. exampl.com/node/111?format=json
○ Sending request body containing data , specify request header. (POST,
PATCH)

26. Connecting to Frontend Framework... Web Services
cURL
curl http://example.com/node/1?_format=hal_json
Guzzle
$response = Drupal::httpClient()
->get('http://example.com/node/1?_format=hal_json', [
'auth' => ['username', 'password'],
]);
$json_string = (string) $response->getBody();

27. Connecting to Frontend Framework... Web Services
jQuery
jQuery.ajax({
url: 'http://example.com/node/1?_format=hal_json',
method: 'GET',
success: function (comment) {
console.log(comment);
}
});

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

29. Drupal 7
Drupal 7
Act as content provider.
Symfony Application
translate the Json
files into HTML
● 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
Front-end

30. Question/Suggestions/Feedback?