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 NYC

252 views

Published on

Slides for DecoupledDays 2019 at NYC

Published in: Technology
  • Be the first to comment

  • 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

×