Decoupled drupal
- 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