bayo fodeke & mark shropshire drupal with …...decoupled drupal (or headless drupal) allows the...
TRANSCRIPT
![Page 1: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/1.jpg)
Demystifying Decoupled Drupal with Contenta CMSBayo Fodeke & Mark Shropshire
![Page 2: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/2.jpg)
| 2
Today’s Agenda
I. What’s Decoupled Drupal?
II. Why Decouple Drupal?
III. What’s Contenta CMS?
IV. Contenta CMS Features
V. Contenta CMS Demos
VI. Q&A
![Page 3: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/3.jpg)
| 3
Today’s Team
Mark ShropshireDirector of Development
Bayo FodekeSenior Drupal Developer
![Page 4: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/4.jpg)
| 4
About Mediacurrent
![Page 5: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/5.jpg)
| 5
Who We Are
Mediacurrent is a full-service digital agency that
implements world class open source software
development, strategy, and design to achieve
defined goals for enterprise organizations
seeking a better return on investment.
![Page 6: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/6.jpg)
| 6
What’s Decoupled Drupal?
![Page 7: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/7.jpg)
| 7
Source: Acquia.com
Decoupled Drupal (or headless Drupal) allows the
developer to utilize any technology to render the
front-end experience in lieu of the theming and
presentation layers in Drupal.
![Page 8: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/8.jpg)
| 8
Fully Decoupled Drupal
Drupal 8 Backend
Client: browser, native mobile app, digital signage, etc.
DecoupledFrontend
![Page 9: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/9.jpg)
| 9
Progressively Decoupled Drupal
Drupal 8 Backend and
FrontendClient: browser,
native mobile app, digital signage, etc.
JavaScript Framework
rendering portions of the page
![Page 10: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/10.jpg)
| 10
Why Decouple Drupal?
![Page 11: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/11.jpg)
| 11
Reasons to Decouple Drupal
● Content can be delivered to many different devices
● Ability to replace the frontend without affecting the backend
● Developer experience
● Security
![Page 12: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/12.jpg)
| 12
Drupal Decoupling Tech
JSON::API REST API GraphQL
![Page 13: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/13.jpg)
| 13
JSON:API lands in Drupal core!
Drupal 8.7.x | May 2019
![Page 14: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/14.jpg)
Call for papersThe Decoupled Days 2019 call for papers is extended until May 3, 2019 at 11:59pm EST.
SponsorshipsFor sponsorship information, reach out to our team at [email protected].
@decoupleddaysFollow us on Twitter to stay updated on important announcements.
#decoupleddays • decoupleddays.com • @decoupleddays
![Page 15: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/15.jpg)
| 15
Traditional Drupal Approach
There is nothing wrong with a standard Drupal
approach where the Drupal instance provides
the backend and frontend experience.
Great read on making the decision to decouple Drupal (when and how): https://dri.es/how-to-decouple-drupal-in-2018
![Page 16: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/16.jpg)
| 16
What’s Contenta CMS?
![Page 17: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/17.jpg)
| 17
Contenta is an API-First Drupal distribution.
It provides a standard
platform that is API ready
along with demo content
and example front-end
applications. Contenta
intends to ease the pain of
using, or simply trying,
decoupled Drupal.
Source: ContentaCMS.org
Contenta CMS
![Page 18: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/18.jpg)
| 18
Contenta CMS Features
![Page 19: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/19.jpg)
| 19
Contenta CMS Features
JSON API
Example Consumers
GraphQL
Oauth
Drupal 8
OpenAPI
Open Source
Example Content
![Page 20: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/20.jpg)
| 20
ContentaJS
A nodejs server that proxies to Contenta CMS and holds custom code
![Page 21: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/21.jpg)
| 21
Contenta CMS Demos
![Page 22: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/22.jpg)
| 22
Stockwatch Tech Stack
![Page 23: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/23.jpg)
| 23
Demos
● Contenta CMS Installation
○ https://www.contentacms.org
● Contenta CMS (stockwatch-api)
○ https://github.com/shrop/stockwatch-api
○ Creating content models
○ API options
■ JSON API endpoint
○ Oauth
![Page 24: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/24.jpg)
| 24
Demos
● React Frontend (stockwatchapp)
○ https://github.com/shrop/stockwatch-react
○ CORS (Cross-Origin Resource Sharing)
○ Oauth (implicit grant)
■ Login
○ Reading JSON API data
■ Filtering
![Page 25: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/25.jpg)
| 25
Demos
● Gatsby Frontend (stockwatch)
○ https://github.com/shrop/stockwatch-gatsby
○ Access control in Drupal to allow Basic Pages to be public
■ Node View Permissions
○ Gatsby setup
![Page 26: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/26.jpg)
Friday, April 12, 2019
#DrupalContributions
Contribution Opportunities
9:00-18:00Room: 602
Mentored Contribution
First TimeContributor Workshop
9:00-12:00Room: 606
GeneralContributions
9:00-18:00Room: 6A
Join Us!
![Page 27: Bayo Fodeke & Mark Shropshire Drupal with …...Decoupled Drupal (or headless Drupal) allows the developer to utilize any technology to render the front-end experience in lieu of the](https://reader036.vdocuments.net/reader036/viewer/2022062919/5ee19b48ad6a402d666c6ce4/html5/thumbnails/27.jpg)
Thank you!
@mediacurrent
What did you think?Locate this session at the DrupalCon Seattle website:
http://seattle2019.drupal.org/schedule
Take the Survey!https://www.surveymonkey.com/r/DrupalConSeattle