Embracing the modern web using a Headless CMS with GatsbyJS

1. Jesus Manuel Olivas / octahedroid
Embracing the modern web
using a Headless CMS with GatsbyJS

2. Jesus Manuel Olivas
jmolivas.com
@jmolivas
———————————————
octahedroid.com
Co-Founder

3. We are a professional services and
consulting agency specializing in modern
front-end tools, cloud native architectures,
automation and CMS integrations.

4. Agenda
> Drupal & Wordpress as Headless CMS
> GraphQL
> JAMstack
> GatsbyJS
> Web Development 101

5. Web Development 101

6. Traditional monolithic stack
Visitor Server
Database

7. Server render (traditional)
Server Client

8. SPA (client side)
Server Client

9. The Modern Stack (JAMstack)
Visitor CDN

11. JAMstack (pre-render markup)
Server ClientBuild Server

12. Performance Reliability Security Hosting
Why JAMstack

13. Traditional Monolithic CMS

14. Content Management System
A CMS is an application that is
used to manage web content,
allowing multiple contributors to
create, edit and publish content.

15. Why Drupal and/or Wordpress
Current legacy sites
Battled tested and well known GUI
User and Content management
and workflow capabilities

16. Headless CMS
A Headless CMS, is a back-end only
content management system, that
makes content accessible via a
RESTful or GraphQL API for display
on any device.

17. GraphQL
GraphQL is a query language
and data manipulation
language for APIs.

18. Centralize data with GraphQL
Easier to explore
More team-friendly (front/back-end)
Single source of truth (build/SSR/client)
Provides a better DX (developer experience)
Consistent and shareable development workflow

19. Drupal / WP/GraphQL

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

21. GatsbyJS

22. Plugins
> Add external data or content
> Customize GraphQL schema
> Transform data formats
> Add 3rd-party services

23. Themes
wordpress
drupal

24. Theme Customization (shadowing)
wordpressdrupal

25. Benefits of a theme
> Share code and configuration
> Avoid duplication
> Extendable and customizable
> Allow updatability

26. Better developer experience
> Iterate faster, deliver better
work
> Separation of concerns allow
for more targeted development
> Enjoy the power of the latest
and modern web technologies

27. Recommended Tools

28. Code and Demo

29. Thank you.
Any Questions?
@jmolivas | @octahedroidHQ