This document provides an introduction to headless Drupal with JavaScript frameworks. It discusses what headless Drupal is, which is using Drupal primarily as a content store accessed by a JavaScript framework rather than directly interacting with Drupal's theme. It outlines three steps to make a headless Drupal application: 1) enable RESTful web services and serialization modules, 2) display JSON output of content, and 3) pass JSON to views built in a JS framework. The document argues headless Drupal benefits include setting front-end developers free from Drupal conventions, speeding up sites by moving display logic client-side, and building true interactive experiences.

1. Introduction to Headless
Drupal with JS Framework

2. Objective
Introduction to Headless Drupal
Steps to make a headless drupal
application

3. What is Headless Drupal ?
Visitor will see pages created with JS Framework such as Angular JS,
Backbone JS, Ember JS, Node JS.
Drupal’s Head/theme is Missing.
Drupal is mainly used as store for data that is then read by the
framework
Compared to Traditional Drupal CMS , in Headless
Drupal CMS a visitor will not interact with Drupal
directly.

4. Hey Drupal !
Lets be Friends ! :)

5. HEADLESS DRUPAL | (DECOUPLED ARCHITECTURE)
Understanding Decoupled Architecture

6. WHY HEADLESS DRUPAL?
“ We believe that Drupal's main strengths lie in the power
and flexibility of its back-end, its primary value to users is its
ability to architect and display complex content models “

7. WHY HEADLESS DRUPAL?
By shifting responsibility for the user experience completely
into the browser, the headless model provides a number of
benefits:
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

8. WHY HEADLESS DRUPAL?

9. HOW TO MAKE DRUPAL “HEADLESS” ?
Three Step Approach :
Step 1: Enable “Core Modules” such as RESTful Web
Services, Serialization, HAL,Http.
●Step 2: Display the JSON output of a specific content.
●Step 3: Pass the JSON output as data to your View built
using JS Framework

10. Application Demo

11. Thank You