SlideShare a Scribd company logo
Using React.js to extend
your CMS
BristolJS, March 2018
Nicola Richardson
@NicolaCarys
● open-source, free CMS
● Drupal and its backend...
● designed to be flexible and extensible
● modularity as a core principle
Drupal
‘a declarative, efficient, and flexible JavaScript
library for building user interfaces’
● uses a lightweight, virtual DOM
● component-based
● uni-directional data flow
React.js
Speed and the virtual DOM
Image source: Learning React Native by Bonnie Eisenman
Scalability with components
App
Component
Parent componentParent component Component
Component
Component
Debugging with the data flow
App
Component
Parent componentParent component Component
Component
Component
props
props
props
props
props
props
● use the CMS as a content repository
● frontend rendered out by a UI framework
● users interact with the framework, not the
CMS
○ build immersive, modern experiences
What is a ‘headless’ CMS?
● service-orientated approach
● serve data on different platforms via
CMS content repository
● decoupled ends
○ front/back ends changed independently
○ plugin / plugout technologies
○ focused tooling & simultaneous development
Why is ‘headless’ exciting?
● extending an existing Drupal 8 build
● two apps with different functionality
○ app 1: a room service ordering web app
○ app 2: an on-the-door quick-book web app
● lightweight, quick and optimised for iPad
● use the data from the main website
I lived to tell the tale
Consciously decoupling
● first project using headless and React
● API calls to provide UI apps with data
● thinking about the communication flow
The ‘headless’ communication structure
quick-book app
room name
available now
timeslots
other available rooms
new date timeslots
booking price
user verification
booking confirmation
headless
CMS
D8
API
Frontend ftw
● frontend built with limited knowledge of
existing Drupal 8 site
○ totally decoupled, no knowledge needed
● complete freedom with the markup
○ control of structure & hierarchy
○ no redundant code
● beautiful experiences on any platform
● Drupal 8’s built-in RESTful API service
● fresh Drupal install to API call in minutes
● quick to build endpoints
Making React and Drupal talk
API calls via the UI
Demo
● multiple unaware, lightweight frontends
○ not restricted to any one framework
● endless possibilities with the data
Creating something extensible
Extending the CMS
CMS
● resourcing for different technologies
● choosing the best technology and tooling
○ do you need to decouple the ends?
○ React + state management
● clear separation of concerns
● consistent API design
○ keep it extensible
Our pain, your gain
Thank you!
@NicolaCarys
Ad

Recommended

[Nuxeo World 2013] Roadmap 2014 - Product part
[Nuxeo World 2013] Roadmap 2014 - Product part
Nuxeo
 
Software architecture in practice
Software architecture in practice
ErwannWernli
 
DocDokuPLM presentation - OW2Con 2015 Community Award winner
DocDokuPLM presentation - OW2Con 2015 Community Award winner
DocDoku
 
Speed up Development by Turning Web Blocks Into First-Class Citizens
Speed up Development by Turning Web Blocks Into First-Class Citizens
OutSystems
 
Defrag 2014 - Blend Web IDEs, Open Source and PaaS to Create and Deploy APIs
Defrag 2014 - Blend Web IDEs, Open Source and PaaS to Create and Deploy APIs
Restlet
 
Aplicaciones en tiempo real con ReactJS y SignalR Core
Aplicaciones en tiempo real con ReactJS y SignalR Core
Miguel Angel Teheran Garcia
 
Extending and Integrating QlikView
Extending and Integrating QlikView
Helena Caligari
 
Grokking: Data Engineering Course
Grokking: Data Engineering Course
Grokking VN
 
QGIS UK: QGIS Performance Enhancements (Lutra Consulting)
QGIS UK: QGIS Performance Enhancements (Lutra Consulting)
Ross McDonald
 
Bachelor's Thesis Presentation (shortened)
Bachelor's Thesis Presentation (shortened)
Nikita Kurpas
 
GraphQL API Crafts presentation
GraphQL API Crafts presentation
Sudheer J
 
GraphQL Bangkok Meetup 6.0
GraphQL Bangkok Meetup 6.0
Tobias Meixner
 
Intro to Quantum GIS Desktop GIS
Intro to Quantum GIS Desktop GIS
Joanne Cook
 
Introduction of Open Source Job Board with Drupal CMS
Introduction of Open Source Job Board with Drupal CMS
Sammy Fung
 
Summit 2019: "Submarine" initiative
Summit 2019: "Submarine" initiative
Kris Verlaenen
 
Modern Application Development on the Cloud (GCP)
Modern Application Development on the Cloud (GCP)
mfazal
 
Build, deploy and scale: Django, GraphQL and SPA (DjangoCon EU 2021)
Build, deploy and scale: Django, GraphQL and SPA (DjangoCon EU 2021)
Dhilipsiva DS
 
How to sell drupal 8
How to sell drupal 8
Anatolii Pazhyn
 
Introducción al JAMStack - JS Ourense
Introducción al JAMStack - JS Ourense
Carlos Azaustre
 
Standing out as a new grad candidate
Standing out as a new grad candidate
Sashko Stubailo
 
Hyperledger composer (from zero to hero )
Hyperledger composer (from zero to hero )
EmanHerawy
 
Mihai Tataran - Windows 8.1 for Developers
Mihai Tataran - Windows 8.1 for Developers
ITSpark Community
 
Headless CMS for Digital Agencies - Case Study by Andy Thompson
Headless CMS for Digital Agencies - Case Study by Andy Thompson
Kentico Software
 
Reactive Data System in Practice
Reactive Data System in Practice
Trieu Nguyen
 
Exposing Lambda Functions as Managed APIs
Exposing Lambda Functions as Managed APIs
WSO2
 
Acme Freight: Developing Microservices and APIs on Bluemix
Acme Freight: Developing Microservices and APIs on Bluemix
Joe Sepi
 
Headless Drupal with AngularJS
Headless Drupal with AngularJS
valuebound
 
Design Patterns for Smart Applications
Design Patterns for Smart Applications
Sri Ambati
 
Mean Stack - An Overview
Mean Stack - An Overview
Naveen Pete
 
Design Summit - Technology Vision - Oleg Barenboim and Jason Frey
Design Summit - Technology Vision - Oleg Barenboim and Jason Frey
ManageIQ
 

More Related Content

What's hot (20)

QGIS UK: QGIS Performance Enhancements (Lutra Consulting)
QGIS UK: QGIS Performance Enhancements (Lutra Consulting)
Ross McDonald
 
Bachelor's Thesis Presentation (shortened)
Bachelor's Thesis Presentation (shortened)
Nikita Kurpas
 
GraphQL API Crafts presentation
GraphQL API Crafts presentation
Sudheer J
 
GraphQL Bangkok Meetup 6.0
GraphQL Bangkok Meetup 6.0
Tobias Meixner
 
Intro to Quantum GIS Desktop GIS
Intro to Quantum GIS Desktop GIS
Joanne Cook
 
Introduction of Open Source Job Board with Drupal CMS
Introduction of Open Source Job Board with Drupal CMS
Sammy Fung
 
Summit 2019: "Submarine" initiative
Summit 2019: "Submarine" initiative
Kris Verlaenen
 
Modern Application Development on the Cloud (GCP)
Modern Application Development on the Cloud (GCP)
mfazal
 
Build, deploy and scale: Django, GraphQL and SPA (DjangoCon EU 2021)
Build, deploy and scale: Django, GraphQL and SPA (DjangoCon EU 2021)
Dhilipsiva DS
 
How to sell drupal 8
How to sell drupal 8
Anatolii Pazhyn
 
Introducción al JAMStack - JS Ourense
Introducción al JAMStack - JS Ourense
Carlos Azaustre
 
Standing out as a new grad candidate
Standing out as a new grad candidate
Sashko Stubailo
 
Hyperledger composer (from zero to hero )
Hyperledger composer (from zero to hero )
EmanHerawy
 
Mihai Tataran - Windows 8.1 for Developers
Mihai Tataran - Windows 8.1 for Developers
ITSpark Community
 
Headless CMS for Digital Agencies - Case Study by Andy Thompson
Headless CMS for Digital Agencies - Case Study by Andy Thompson
Kentico Software
 
Reactive Data System in Practice
Reactive Data System in Practice
Trieu Nguyen
 
Exposing Lambda Functions as Managed APIs
Exposing Lambda Functions as Managed APIs
WSO2
 
Acme Freight: Developing Microservices and APIs on Bluemix
Acme Freight: Developing Microservices and APIs on Bluemix
Joe Sepi
 
Headless Drupal with AngularJS
Headless Drupal with AngularJS
valuebound
 
Design Patterns for Smart Applications
Design Patterns for Smart Applications
Sri Ambati
 
QGIS UK: QGIS Performance Enhancements (Lutra Consulting)
QGIS UK: QGIS Performance Enhancements (Lutra Consulting)
Ross McDonald
 
Bachelor's Thesis Presentation (shortened)
Bachelor's Thesis Presentation (shortened)
Nikita Kurpas
 
GraphQL API Crafts presentation
GraphQL API Crafts presentation
Sudheer J
 
GraphQL Bangkok Meetup 6.0
GraphQL Bangkok Meetup 6.0
Tobias Meixner
 
Intro to Quantum GIS Desktop GIS
Intro to Quantum GIS Desktop GIS
Joanne Cook
 
Introduction of Open Source Job Board with Drupal CMS
Introduction of Open Source Job Board with Drupal CMS
Sammy Fung
 
Summit 2019: "Submarine" initiative
Summit 2019: "Submarine" initiative
Kris Verlaenen
 
Modern Application Development on the Cloud (GCP)
Modern Application Development on the Cloud (GCP)
mfazal
 
Build, deploy and scale: Django, GraphQL and SPA (DjangoCon EU 2021)
Build, deploy and scale: Django, GraphQL and SPA (DjangoCon EU 2021)
Dhilipsiva DS
 
Introducción al JAMStack - JS Ourense
Introducción al JAMStack - JS Ourense
Carlos Azaustre
 
Standing out as a new grad candidate
Standing out as a new grad candidate
Sashko Stubailo
 
Hyperledger composer (from zero to hero )
Hyperledger composer (from zero to hero )
EmanHerawy
 
Mihai Tataran - Windows 8.1 for Developers
Mihai Tataran - Windows 8.1 for Developers
ITSpark Community
 
Headless CMS for Digital Agencies - Case Study by Andy Thompson
Headless CMS for Digital Agencies - Case Study by Andy Thompson
Kentico Software
 
Reactive Data System in Practice
Reactive Data System in Practice
Trieu Nguyen
 
Exposing Lambda Functions as Managed APIs
Exposing Lambda Functions as Managed APIs
WSO2
 
Acme Freight: Developing Microservices and APIs on Bluemix
Acme Freight: Developing Microservices and APIs on Bluemix
Joe Sepi
 
Headless Drupal with AngularJS
Headless Drupal with AngularJS
valuebound
 
Design Patterns for Smart Applications
Design Patterns for Smart Applications
Sri Ambati
 

Similar to Using React.js to extend your CMS (20)

Mean Stack - An Overview
Mean Stack - An Overview
Naveen Pete
 
Design Summit - Technology Vision - Oleg Barenboim and Jason Frey
Design Summit - Technology Vision - Oleg Barenboim and Jason Frey
ManageIQ
 
"Top Digital Marketing Services to Boost Your Business Growth"
"Top Digital Marketing Services to Boost Your Business Growth"
Anant Gupta
 
Cloud Native Application Integration With APIs
Cloud Native Application Integration With APIs
Nirmal Fernando
 
Bighead: Airbnb’s End-to-End Machine Learning Platform with Krishna Puttaswa...
Bighead: Airbnb’s End-to-End Machine Learning Platform with Krishna Puttaswa...
Databricks
 
AirBNB's ML platform - BigHead
AirBNB's ML platform - BigHead
Karthik Murugesan
 
Refactoring to a SPA
Refactoring to a SPA
Marcello Teodori
 
Refactoring to a Single Page Application
Refactoring to a Single Page Application
Codemotion
 
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
WSO2
 
#RADC4L16: An API-First Archives Approach at NPR
#RADC4L16: An API-First Archives Approach at NPR
Camille Salas
 
MagMutual.com: On the JAMStack with Gatsby and Drupal 8
MagMutual.com: On the JAMStack with Gatsby and Drupal 8
Mediacurrent
 
VidyaBhooshanMishra_CV
VidyaBhooshanMishra_CV
Landis+Gyr
 
Dynatech presentation for TSI Career Day
Dynatech presentation for TSI Career Day
Artur Babyuk
 
What is Headless and headless 101 at Acquia.pdf
What is Headless and headless 101 at Acquia.pdf
Allie Jones
 
Tecnologia rest em python
Tecnologia rest em python
Allex Lima
 
Next Generation CMS
Next Generation CMS
Shadi Akil
 
Conquer Architectural Challenges with End-to-End JavaScript - enterJS 2014
Conquer Architectural Challenges with End-to-End JavaScript - enterJS 2014
Alexandre Morgaut
 
React for non techies
React for non techies
Amy Crimmens
 
iHRIS Fullstack.pdf
iHRIS Fullstack.pdf
ssuser6a7545
 
iHRIS Fullstack.pdf
iHRIS Fullstack.pdf
ssuser6a7545
 
Mean Stack - An Overview
Mean Stack - An Overview
Naveen Pete
 
Design Summit - Technology Vision - Oleg Barenboim and Jason Frey
Design Summit - Technology Vision - Oleg Barenboim and Jason Frey
ManageIQ
 
"Top Digital Marketing Services to Boost Your Business Growth"
"Top Digital Marketing Services to Boost Your Business Growth"
Anant Gupta
 
Cloud Native Application Integration With APIs
Cloud Native Application Integration With APIs
Nirmal Fernando
 
Bighead: Airbnb’s End-to-End Machine Learning Platform with Krishna Puttaswa...
Bighead: Airbnb’s End-to-End Machine Learning Platform with Krishna Puttaswa...
Databricks
 
AirBNB's ML platform - BigHead
AirBNB's ML platform - BigHead
Karthik Murugesan
 
Refactoring to a Single Page Application
Refactoring to a Single Page Application
Codemotion
 
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
WSO2
 
#RADC4L16: An API-First Archives Approach at NPR
#RADC4L16: An API-First Archives Approach at NPR
Camille Salas
 
MagMutual.com: On the JAMStack with Gatsby and Drupal 8
MagMutual.com: On the JAMStack with Gatsby and Drupal 8
Mediacurrent
 
VidyaBhooshanMishra_CV
VidyaBhooshanMishra_CV
Landis+Gyr
 
Dynatech presentation for TSI Career Day
Dynatech presentation for TSI Career Day
Artur Babyuk
 
What is Headless and headless 101 at Acquia.pdf
What is Headless and headless 101 at Acquia.pdf
Allie Jones
 
Tecnologia rest em python
Tecnologia rest em python
Allex Lima
 
Next Generation CMS
Next Generation CMS
Shadi Akil
 
Conquer Architectural Challenges with End-to-End JavaScript - enterJS 2014
Conquer Architectural Challenges with End-to-End JavaScript - enterJS 2014
Alexandre Morgaut
 
React for non techies
React for non techies
Amy Crimmens
 
iHRIS Fullstack.pdf
iHRIS Fullstack.pdf
ssuser6a7545
 
iHRIS Fullstack.pdf
iHRIS Fullstack.pdf
ssuser6a7545
 
Ad

Recently uploaded (20)

"Scaling in space and time with Temporal", Andriy Lupa.pdf
"Scaling in space and time with Temporal", Andriy Lupa.pdf
Fwdays
 
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Nilesh Gule
 
Security Tips for Enterprise Azure Solutions
Security Tips for Enterprise Azure Solutions
Michele Leroux Bustamante
 
cnc-processing-centers-centateq-p-110-en.pdf
cnc-processing-centers-centateq-p-110-en.pdf
AmirStern2
 
“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...
“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...
Edge AI and Vision Alliance
 
Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdf
Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdf
Priyanka Aash
 
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Priyanka Aash
 
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
caoyixuan2019
 
Python Conference Singapore - 19 Jun 2025
Python Conference Singapore - 19 Jun 2025
ninefyi
 
Salesforce Summer '25 Release Frenchgathering.pptx.pdf
Salesforce Summer '25 Release Frenchgathering.pptx.pdf
yosra Saidani
 
The Future of Product Management in AI ERA.pdf
The Future of Product Management in AI ERA.pdf
Alyona Owens
 
Securing Account Lifecycles in the Age of Deepfakes.pptx
Securing Account Lifecycles in the Age of Deepfakes.pptx
FIDO Alliance
 
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Safe Software
 
AI Agents and FME: A How-to Guide on Generating Synthetic Metadata
AI Agents and FME: A How-to Guide on Generating Synthetic Metadata
Safe Software
 
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
pcprocore
 
9-1-1 Addressing: End-to-End Automation Using FME
9-1-1 Addressing: End-to-End Automation Using FME
Safe Software
 
Lessons Learned from Developing Secure AI Workflows.pdf
Lessons Learned from Developing Secure AI Workflows.pdf
Priyanka Aash
 
AI vs Human Writing: Can You Tell the Difference?
AI vs Human Writing: Can You Tell the Difference?
Shashi Sathyanarayana, Ph.D
 
The Growing Value and Application of FME & GenAI
The Growing Value and Application of FME & GenAI
Safe Software
 
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
 
"Scaling in space and time with Temporal", Andriy Lupa.pdf
"Scaling in space and time with Temporal", Andriy Lupa.pdf
Fwdays
 
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Nilesh Gule
 
Security Tips for Enterprise Azure Solutions
Security Tips for Enterprise Azure Solutions
Michele Leroux Bustamante
 
cnc-processing-centers-centateq-p-110-en.pdf
cnc-processing-centers-centateq-p-110-en.pdf
AmirStern2
 
“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...
“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...
Edge AI and Vision Alliance
 
Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdf
Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdf
Priyanka Aash
 
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Priyanka Aash
 
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
caoyixuan2019
 
Python Conference Singapore - 19 Jun 2025
Python Conference Singapore - 19 Jun 2025
ninefyi
 
Salesforce Summer '25 Release Frenchgathering.pptx.pdf
Salesforce Summer '25 Release Frenchgathering.pptx.pdf
yosra Saidani
 
The Future of Product Management in AI ERA.pdf
The Future of Product Management in AI ERA.pdf
Alyona Owens
 
Securing Account Lifecycles in the Age of Deepfakes.pptx
Securing Account Lifecycles in the Age of Deepfakes.pptx
FIDO Alliance
 
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Safe Software
 
AI Agents and FME: A How-to Guide on Generating Synthetic Metadata
AI Agents and FME: A How-to Guide on Generating Synthetic Metadata
Safe Software
 
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
pcprocore
 
9-1-1 Addressing: End-to-End Automation Using FME
9-1-1 Addressing: End-to-End Automation Using FME
Safe Software
 
Lessons Learned from Developing Secure AI Workflows.pdf
Lessons Learned from Developing Secure AI Workflows.pdf
Priyanka Aash
 
AI vs Human Writing: Can You Tell the Difference?
AI vs Human Writing: Can You Tell the Difference?
Shashi Sathyanarayana, Ph.D
 
The Growing Value and Application of FME & GenAI
The Growing Value and Application of FME & GenAI
Safe Software
 
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
 
Ad

Using React.js to extend your CMS

  • 1. Using React.js to extend your CMS BristolJS, March 2018 Nicola Richardson @NicolaCarys
  • 2. ● open-source, free CMS ● Drupal and its backend... ● designed to be flexible and extensible ● modularity as a core principle Drupal
  • 3. ‘a declarative, efficient, and flexible JavaScript library for building user interfaces’ ● uses a lightweight, virtual DOM ● component-based ● uni-directional data flow React.js
  • 4. Speed and the virtual DOM Image source: Learning React Native by Bonnie Eisenman
  • 5. Scalability with components App Component Parent componentParent component Component Component Component
  • 6. Debugging with the data flow App Component Parent componentParent component Component Component Component props props props props props props
  • 7. ● use the CMS as a content repository ● frontend rendered out by a UI framework ● users interact with the framework, not the CMS ○ build immersive, modern experiences What is a ‘headless’ CMS?
  • 8. ● service-orientated approach ● serve data on different platforms via CMS content repository ● decoupled ends ○ front/back ends changed independently ○ plugin / plugout technologies ○ focused tooling & simultaneous development Why is ‘headless’ exciting?
  • 9. ● extending an existing Drupal 8 build ● two apps with different functionality ○ app 1: a room service ordering web app ○ app 2: an on-the-door quick-book web app ● lightweight, quick and optimised for iPad ● use the data from the main website I lived to tell the tale
  • 10. Consciously decoupling ● first project using headless and React ● API calls to provide UI apps with data ● thinking about the communication flow
  • 11. The ‘headless’ communication structure quick-book app room name available now timeslots other available rooms new date timeslots booking price user verification booking confirmation headless CMS D8 API
  • 12. Frontend ftw ● frontend built with limited knowledge of existing Drupal 8 site ○ totally decoupled, no knowledge needed ● complete freedom with the markup ○ control of structure & hierarchy ○ no redundant code ● beautiful experiences on any platform
  • 13. ● Drupal 8’s built-in RESTful API service ● fresh Drupal install to API call in minutes ● quick to build endpoints Making React and Drupal talk
  • 14. API calls via the UI
  • 15. Demo
  • 16. ● multiple unaware, lightweight frontends ○ not restricted to any one framework ● endless possibilities with the data Creating something extensible
  • 18. ● resourcing for different technologies ● choosing the best technology and tooling ○ do you need to decouple the ends? ○ React + state management ● clear separation of concerns ● consistent API design ○ keep it extensible Our pain, your gain