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 a Headless CMS with GatsbyJS CMS Philly


Published on

Embracing the modern web using a Headless CMS with GatsbyJS

Published in: Technology
  • Fantastic resource! Thank you for sharing, Jesus! Wish I was at CMS Philly but hope to see the video when it's ready.
    Are you sure you want to  Yes  No
    Your message goes here

Embracing the modern web using a Headless CMS with GatsbyJS CMS Philly

  1. 1. Jesus Manuel Olivas / octahedroid Embracing the modern web using a Headless CMS with GatsbyJS
  2. 2. Jesus Manuel Olivas @jmolivas ——————————————— Co-Founder
  3. 3. We are a professional services and consulting agency specializing in modern front-end tools, cloud native architectures, automation and CMS integrations.
  4. 4. Agenda > Drupal & Wordpress as Headless CMS > GraphQL > JAMstack > GatsbyJS > Web Development 101
  5. 5. Web Development 101
  6. 6. Traditional monolithic stack Visitor Server Database
  7. 7. Server render (traditional) Server Client
  8. 8. SPA (client side) Server Client
  9. 9. The Modern Stack (JAMstack) Visitor CDN
  10. 10. JAMstack (pre-render markup) Server ClientBuild Server
  11. 11. Performance Reliability Security Hosting Why JAMstack
  12. 12. Traditional Monolithic CMS
  13. 13. Content Management System A CMS is an application that is used to manage web content, allowing multiple contributors to create, edit and publish content.
  14. 14. Why Drupal and/or Wordpress Current legacy sites Battled tested and well known GUI User and Content management and workflow capabilities
  15. 15. 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.
  16. 16. GraphQL GraphQL is a query language and data manipulation language for APIs.
  17. 17. 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
  18. 18. Drupal / WP/GraphQL
  19. 19. GatsbyJS Gatsby is a free and open source framework based on React that helps developers build blazing fast  websites and apps
  20. 20. GatsbyJS
  21. 21. Plugins > Add external data or content > Customize GraphQL schema > Transform data formats > Add 3rd-party services
  22. 22. Themes wordpress drupal
  23. 23. Theme Customization (shadowing) wordpressdrupal
  24. 24. Benefits of a theme > Share code and configuration > Avoid duplication > Extendable and customizable > Allow updatability
  25. 25. 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
  26. 26. Recommended Tools
  27. 27. Code and Demo
  28. 28. Thank you. Any Questions? @jmolivas | @octahedroidHQ