Introduction to Headless Drupal with JS Framework

Objective

Introduction to Headless Drupal

Steps to make a headless drupal application

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.

Hey Drupal !Lets be Friends ! :)

HEADLESS DRUPAL | (DECOUPLED ARCHITECTURE)Understanding Decoupled Architecture

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 “

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

WHY HEADLESS DRUPAL?

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

Application Demo

Thank You