Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Decoupled drupal DcRuhr


Published on

Decoupled drupal DcRuhr 2018

Published in: Software
  • Be the first to comment

  • Be the first to like this

Decoupled drupal DcRuhr

  1. 1. Decoupled Drupal Ahmad Hassan Skype/ drupalmind Twitter: @drupalmind123 Software Engineer @
  2. 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. 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. 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. 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. 6. Normal Drupal Architecture Drupal CMS Theme Layer Data Theme layer Frontend/html Frontend (tpl/twigs etc.)
  7. 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. 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. 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. 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. 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. 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. 13. Decouple Drupal Architecture Drupal Web Services Data Frontend/html Json/GraphQL Javascript Framework (React, Angular!!!) Templates request response
  14. 14. Decouple Drupal Architecture Drupal Web Services Data Frontend/html Json/GraphQL Apps request response
  15. 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. 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. 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. 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. 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. 20. Decoupling Disadvantage ● Loss Management ○ Content publishing and unpublishing can be costly. ○ Time control would be tricky to use.
  21. 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. 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. 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. 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. 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. ○ Sending request body containing data , specify request header. (POST, PATCH)
  26. 26. Connecting to Frontend Framework... Web Services cURL curl Guzzle $response = Drupal::httpClient() ->get('', [ 'auth' => ['username', 'password'], ]); $json_string = (string) $response->getBody();
  27. 27. Connecting to Frontend Framework... Web Services jQuery jQuery.ajax({ url: '', method: 'GET', success: function (comment) { console.log(comment); } });
  28. 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. 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. 30. Question/Suggestions/Feedback?