This document discusses decoupled or headless architecture for a Drupal site. It introduces the traditional CMS approach versus a headless one, then covers why one may want to go headless including building interactive experiences and speeding up sites. Potential issues with a headless Drupal approach are outlined as well as a proposed solution involving separating Drupal, logic, and front-end layers with caching and APIs. Key aspects of each layer are defined and a demo is referenced.

1. New Recipe of Decoupling: Drupal 8,
Symfony and Slim Framework
Jyoti Singh | Senior Drupal Developer, Srijan Technologies | Twitter:
@jyoti2911
#SrijanWW | @srijan

2. #SrijanWW | @srijan
TOPICS FOR THE SESSION
● Headless or Decoupled Architecture : Introduction
● Problem Statements
● Solution and implementation
● Drupal Stack
● Logic Layer
● Front End content delivery approach
● Walkthrough with quick demo

3. #SrijanWW | @srijan
WHAT IS
“HEADLESS” OR
“DECOUPLED”
ARCHITECTURE
?

4. #SrijanWW | @srijan
● There is a traditional database-driven CMS which editors use to
maintain the content for the site.
● The content for the site is accessible via a web-service API, usually in
a RESTful manner and in a mashup-friendly format such as JSON.
● The end-user experience is delivered by an application rendering the
output of this API into HTML, frequently making use of a modern
application framework.

5. #SrijanWW | @srijan
DRUPAL
USER
DRUPAL
USER
FRONT END FRAMEWORK
DRUPAL V/S HEADLESS DRUPAL

6. #SrijanWW | @srijan

7. #SrijanWW | @srijan
THINGS TO KEEP IN MIND BEFORE MAKING
THE CHOICE OF ARCHITECTURE :
● Budget of the project
● Team - Skill Set and Resources management
● Time - Timeline of the project
● Flexibility
● Maintenance of the Site

8. #SrijanWW | @srijan
WHY
TO GO
“HEADLESS” ?

9. #SrijanWW | @srijan
● Set front-end developers free from the conventions and
structures of the back-end.
● Speed up the site by shifting display logic to the client-side
and streamlining the back-end.
● Build true interactive experiences for users by using your
website to power fully functional in-browser applications.

10. #SrijanWW | @srijan
WHY NOT HEADLESS
DRUPAL ..??

11. #SrijanWW | @srijan

12. #SrijanWW | @srijan

13. #SrijanWW | @srijan
● Too many assets loaded during the page render, increase the
time to complete the page before it is “usable”.
● Because of nested DOM structure, Javascript and CSS
recalculation takes longer time to render document.
● The size of the document is large that forms non-optimized
pages for rendering
● Dependency on Drupal theming and layout engine.
● Dependency on third party scripts like Google Analytics, etc.
● Frequent DDos attacks affected the performance of site as to
serve each request Drupal bootstrap was invoked, which for
authenticated user had little scope of caching the content of site.

14. #SrijanWW | @srijan
SOLUTION FOR
THIS
PROBLEM….??

15. #SrijanWW | @srijan
DRUPAL LAYER
FRONT END LAYER
LOGIC LAYER
DRUPAL LAYER
DATA EXCHANGE LAYER
SLIM + TWIG

16. #SrijanWW | @srijan

17. #SrijanWW | @srijan
DRUPAL LAYER

18. #SrijanWW | @srijan
KEY FEATURES OF DRUPAL STACK
● API First Approach
● Security
● Seperate Database
● Multi site implementation
● Mobile First Approach

19. #SrijanWW | @srijan
LOGIC LAYER

20. #SrijanWW | @srijan
● Get content
● Get Menu configuration
● Get Form configuration
● Sing up
● Password
● Authentication
● Third Party Integration
●
● Logger
● Session Management
● Service Adaptor
● Cache Adaptor
LOGIC LAYER
DRUPAL
INTEGRATION
UTILS

21. #SrijanWW | @srijan
CACHING
MECHANISM

22. #SrijanWW | @srijan
● Prebaked cache - The prebaked-cache intends to solve the
issues by creating a cache pool of required response for a request
well ahead of actual call request. This cache is available for the
section which does not changes that often [eg Menu, footer, logo
block, layout]. This cache will be available through Logic Layer, in
case the cached data is not available with Logic Layer, it will call
Drupal stack API to fetch the related information.

23. #SrijanWW | @srijan
FRONT-END LAYER

24. #SrijanWW | @srijan
- Slim will be used as server to serve web pages, routes
processing.
- Twig will be used as client and server side templating engine.

25. #SrijanWW | @srijan
● Reduce Page weight
● Strong browser cache dependency.
● Quicker Page load response to User.
● Improving overall appearance of the page load :
- Initially disabling dynamic content.
- Enabling the dynamic content after page load.
- Javascript loaded after page load.
● Reduce the number of inline scripts

26. #SrijanWW | @srijan
DEMO
URL of the demo video is mentioned in the description.

27. #SrijanWW | @srijan
THANK YOU !
QUESTIONS ?