Embracing the modern web using a Headless CMS with GatsbyJS Stanford
0 likes760 views
This document discusses using a headless CMS like Drupal or WordPress with GatsbyJS to build modern websites. It defines headless CMS as a back-end only CMS with a RESTful or GraphQL API to access content. GatsbyJS is introduced as a framework for building fast websites and apps with React. The benefits discussed are using GraphQL to centralize data access, leveraging Gatsby plugins and themes, and providing a better developer experience with modern technologies and separation of concerns.
Embracing the modern web using a Headless CMS with GatsbyJS Stanford
- 1. Jesus Manuel Olivas / octahedroid Embracing the modern web using a Headless CMS with GatsbyJS
- 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
- 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
- 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 an open-source data query and 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
- 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
- 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
- 28. Code and Demo
- 29. Thank you. Any Questions? @jmolivas | @octahedroidHQ