Slides for DecoupledDays 2019 at NYC

1. Embracing the modern web using
Drupal as Headless CMS
with GatsbyJS
by Jesus Manuel Olivas / weKnow
#DecoupledDays
#DecoupledDays2019

2. $ whoami
Jesus Manuel Olivas
jmolivas@weknowinc.com
twitter.com/jmolivas
github.com/jmolivas
drupal.org/u/jmolivas
jmolivas.weknowinc.com

3. Mexicali
Mexico + California
Calexico
California + Mexico
$ ifconfig

4. weAre

5. weKnow

6. weGive
4,567,311

7. Drupal … Drupal … Drupal

8. When all you have is a
hammer, everything looks
like a nail.

10. Traditional Monolithic CMS

11. The Traditional Headless
+

12. Challenges
Performance Reliability Security Hosting

13. Performance
Visitor Server CMS Database

14. Reliability - The Traditional Stack

15. Reliability - The Traditional Stack + Cache

16. Reliability - The Headless Stack

17. Reliability - A more advanced Stack

18. Security
> Stack dependencies
> Platform dependencies core
> Custom modules dependencies
> Third party libraries

19. 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.

20. Is there anything else we can use?

21. Static Site Generators

22. Back to the flat-files

23. 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.

24. Visitor CDN
The JAMStack Stack

25. 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)

26. Decoupling the
"Content Management System"
from the
“Production Environment".

27. ●
Git Based / Headless CMS
●
CloudCannon
NetlifyCMS
Forestry
Blaze
Sanity
GraphCMS
Contentful

28. How about the Drop?

29. Drupal CMS + Tome to export as Flat Files
+ ● Build

31. Gatsby is a free and open source
framework based on React that
helps developers build blazing
fast websites and apps

32. The Content Mesh
● https://www.gatsbyjs.org/blog/2018-10-18-creating-compelling-content-experiences/

35. 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

36. 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

37. 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

38. 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

39. TUI Editor (WYSIWYG for markdown)

40. Build Hooks (Trigger a external build hook)

41. 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

42. ● Build● API / GraphQL

43. Feel free to turn off your Drupal after build
●https://twitter.com/ckaotik/status/647020262001614848

44. Live Demo

45. Choose the right tool for
the job

46. Thank you … Questions?
Feel free ask here and via twitter @jmolivas
#DecoupledDays #DecoupledDays2019