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.
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
[Srijan Wednesday Webinars] New Recipe of Decoupling: Drupal 8, Symfony and Slim Framework
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
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.
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
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.
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.
18. #SrijanWW | @srijan
KEY FEATURES OF DRUPAL STACK
● API First Approach
● Security
● Seperate Database
● Multi site implementation
● Mobile First Approach
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
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.
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