Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Embracing the modern web using
Drupal as Headless CMS
with GatsbyJS
by Jesus Manuel Olivas / weKnow
#DecoupledDays
#Decoup...
$ whoami
Jesus Manuel Olivas
jmolivas@weknowinc.com
twitter.com/jmolivas
github.com/jmolivas
drupal.org/u/jmolivas
jmoliva...
Mexicali

Mexico + California
Calexico

California + Mexico
$ ifconfig
weAre
weKnow
weGive
4,567,311
Drupal … Drupal … Drupal
When all you have is a
hammer, everything looks
like a nail.
Traditional Monolithic CMS
The Traditional Headless
+
Challenges
Performance Reliability Security Hosting
Performance
Visitor Server CMS Database
Reliability - The Traditional Stack
Reliability - The Traditional Stack + Cache
Reliability - The Headless Stack
Reliability - A more advanced Stack
Security
> Stack dependencies
> Platform dependencies core
> Custom modules dependencies
> Third party libraries
Hosting
> Managing a complex stack is not easy.
> Requires knowledge of managing servers,
databases, cache, DNS, backups, ...
Is there anything else we can use?
Static Site Generators
Back to the flat-files
JavaScript
Any dynamic programming during the request/response cycle is handled by JavaScript, running entirely
on the cli...
Visitor CDN
The JAMStack Stack
Challenges
• Web Forms (CRM Integration , Serverless Function,
Form submission PaaS)
• E-Commerce (Shopify, Salsify, PXM, ...
Decoupling the
"Content Management System"
from the
“Production Environment".
●
Git Based / Headless CMS
●
CloudCannon
NetlifyCMS
Forestry
Blaze
Sanity
GraphCMS
Contentful
How about the Drop?
Drupal CMS + Tome to export as Flat Files
+ ● Build
Gatsby is a free and open source
framework based on React that
helps developers build blazing
fast websites and apps
The Content Mesh
● https://www.gatsbyjs.org/blog/2018-10-18-creating-compelling-content-experiences/
https://github.com/weknowinc/drupal-boina
# Clone repository
git clone git@github.com:weknowinc/drupal-boina.git
# Copy .e...
https://github.com/weknowinc/gatsby-starter-drupal-boina
# Download Starter 

gatsby new boina https://github.com/weknowin...
Use theme
# Download Starter 

gatsby new boina https://github.com/weknowinc/gatsby-starter-drupal-boina
cd boina
# Copy e...
Must have plugins
• gatsby-source-drupal
• gatsby-transformer-remark
• gatsby-remark-drupal (support drupal images)
• gats...
TUI Editor (WYSIWYG for markdown)
Build Hooks (Trigger a external build hook)
What is Gone
• Twig
• Render array
• Theme layer
• Theme preprocessing
• *Views (use GraphQL instead)
• Data modeling.
• C...
● Build● API / GraphQL
Feel free to turn off your Drupal after build
●https://twitter.com/ckaotik/status/647020262001614848
Live Demo
Choose the right tool for
the job
Thank you … Questions?
Feel free ask here and via twitter @jmolivas
#DecoupledDays #DecoupledDays2019
Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC
Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC
Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC
Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC
Upcoming SlideShare
Loading in …5
×

of

Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 1 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 2 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 3 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 4 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 5 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 6 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 7 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 8 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 9 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 10 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 11 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 12 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 13 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 14 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 15 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 16 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 17 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 18 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 19 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 20 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 21 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 22 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 23 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 24 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 25 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 26 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 27 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 28 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 29 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 30 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 31 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 32 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 33 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 34 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 35 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 36 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 37 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 38 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 39 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 40 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 41 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 42 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 43 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 44 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 45 Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC Slide 46
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC

Download to read offline

Slides for DecoupledDays 2019 at NYC

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC

  1. 1. Embracing the modern web using Drupal as Headless CMS with GatsbyJS by Jesus Manuel Olivas / weKnow #DecoupledDays #DecoupledDays2019
  2. 2. $ whoami Jesus Manuel Olivas jmolivas@weknowinc.com twitter.com/jmolivas github.com/jmolivas drupal.org/u/jmolivas jmolivas.weknowinc.com
  3. 3. Mexicali
 Mexico + California Calexico
 California + Mexico $ ifconfig
  4. 4. weAre
  5. 5. weKnow
  6. 6. weGive 4,567,311
  7. 7. Drupal … Drupal … Drupal
  8. 8. When all you have is a hammer, everything looks like a nail.
  9. 9. Traditional Monolithic CMS
  10. 10. The Traditional Headless +
  11. 11. Challenges Performance Reliability Security Hosting
  12. 12. Performance Visitor Server CMS Database
  13. 13. Reliability - The Traditional Stack
  14. 14. Reliability - The Traditional Stack + Cache
  15. 15. Reliability - The Headless Stack
  16. 16. Reliability - A more advanced Stack
  17. 17. Security > Stack dependencies > Platform dependencies core > Custom modules dependencies > Third party libraries
  18. 18. Hosting > Managing a complex stack is not easy. > Requires knowledge of managing servers, databases, cache, DNS, backups, automation, and much more. > The more complex your stack is to support your production site, the more expensive it becomes.
  19. 19. Is there anything else we can use?
  20. 20. Static Site Generators
  21. 21. Back to the flat-files
  22. 22. JavaScript Any dynamic programming during the request/response cycle is handled by JavaScript, running entirely on the client. This could be any frontend framework, library, or even vanilla JavaScript. APIs All server-side processes or database actions are abstracted into reusable APIs, accessed over HTTPS with JavaScript. These can be custom-built or leverage third-party services. Markup Templated markup should be prebuilt at deploy time, usually using a site generator for content sites, or a build tool for web apps.
  23. 23. Visitor CDN The JAMStack Stack
  24. 24. Challenges • Web Forms (CRM Integration , Serverless Function, Form submission PaaS) • E-Commerce (Shopify, Salsify, PXM, Headless Commerce, Stripe, Paypal, Recurly) • Comments (Disqus, Serverless functions) • GUI (WYSIWYG for user to manage content)
  25. 25. Decoupling the "Content Management System" from the “Production Environment".
  26. 26. ● Git Based / Headless CMS ● CloudCannon NetlifyCMS Forestry Blaze Sanity GraphCMS Contentful
  27. 27. How about the Drop?
  28. 28. Drupal CMS + Tome to export as Flat Files + ● Build
  29. 29. Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps
  30. 30. The Content Mesh ● https://www.gatsbyjs.org/blog/2018-10-18-creating-compelling-content-experiences/
  31. 31. https://github.com/weknowinc/drupal-boina # Clone repository git clone git@github.com:weknowinc/drupal-boina.git # Copy .env file cp .env.dist .env # Start containers ahoy up # Install Composer dependencies ahoy composer install # Install Boina distribution ahoy drupal boina:install
  32. 32. https://github.com/weknowinc/gatsby-starter-drupal-boina # Download Starter 
 gatsby new boina https://github.com/weknowinc/gatsby-starter-drupal-boina cd boina # Copy environment file cp .env.dist .env.development # Update environment variables DRUPAL_HOST=http://drupal-boina.develop/ # Start Gatsby in development mode gatsby develop
  33. 33. Use theme # Download Starter 
 gatsby new boina https://github.com/weknowinc/gatsby-starter-drupal-boina cd boina # Copy environment file cp .env.dist .env.development # Update environment variables DRUPAL_HOST=http://drupal-boina.develop/ # Start Gatsby in development mode gatsby develop
  34. 34. Must have plugins • gatsby-source-drupal • gatsby-transformer-remark • gatsby-remark-drupal (support drupal images) • gatsby-remark-images • gatsby-remark-external-links • gatsby-plugin-sharp • gatsby-plugin-react-helmet
  35. 35. TUI Editor (WYSIWYG for markdown)
  36. 36. Build Hooks (Trigger a external build hook)
  37. 37. What is Gone • Twig • Render array • Theme layer • Theme preprocessing • *Views (use GraphQL instead) • Data modeling. • Content editor capabilities, revisions, moderation and scheduling. • Pathauto • Site Settings What to keep using
  38. 38. ● Build● API / GraphQL
  39. 39. Feel free to turn off your Drupal after build ●https://twitter.com/ckaotik/status/647020262001614848
  40. 40. Live Demo
  41. 41. Choose the right tool for the job
  42. 42. Thank you … Questions? Feel free ask here and via twitter @jmolivas #DecoupledDays #DecoupledDays2019

Slides for DecoupledDays 2019 at NYC

Views

Total views

408

On Slideshare

0

From embeds

0

Number of embeds

1

Actions

Downloads

3

Shares

0

Comments

0

Likes

0

×