Decoupled Drupal and Gatsby in the Real World
0 likes798 views
The document discusses the concept of decoupling in web development, specifically utilizing Drupal and Gatsby for its advantages such as improved performance and flexibility. It outlines Mediacurrent's experience transitioning to a decoupled architecture and provides insights into their tech stack and best practices. The agenda includes what decoupling is, the benefits of Gatsby, and considerations for whether to adopt this approach.
Decoupled Drupal and Gatsby in the Real World
- 1. Decoupled Drupal and Gatsby in the Real World June 30, 2021
- 3. Our vision is to empower every person on the planet with the innovative freedom and community impact that open-source technology offers. Our Vision
- 4. Today’s Team Jay Callicott VP of Technical Operations Madeline Jensen Senior Developer
- 5. /in/madeline-jensen ● 7 years of experience in web development, strategy, and design ● Finds joy in mentoring others ● Loves component-based development! ● Invested in using open source for our client’s success Madeline Jensen Senior Developer
- 6. ● Engineer and Organizational Leader ● Passion for Solving Real-World Problems. ● Drupal and Open Source Advocate ● 10+ Years Advancing Open Source ● Operations and Product Leader ● Rain distribution won Acquia’s “Open Source Giants” award in 2019 in/jay-callicott-8535ba1/ @drupalninja Jay Callicott VP of Technical Operations
- 7. 1. What is Decoupled? 2. Decoupling Mediacurrent.com 3. Mediacurrent.com on Gatsby Cloud 4. Should you Decouple? Today’s Agenda
- 10. Back-end ● Create content ● Store data & images ● Store user information ● Editing experience
- 11. Front-end ● Client facing website ● Markup ● Javascript ● Styles
- 12. | 12 Functionality User Experience Performance Security Flexibility Resourcing Decoupled Advantages
- 13. | 13 Why Gatsby?
- 15. | 15 Mediacurrent.com Timeline 2016 - Moved to Decoupled Architecture 2018 - Relaunched on Jekyll and Drupal 8 2019 - Relaunched on Gatsby and Netlify
- 16. | 16 Key Ingredients ● Drupal ● GatsbyJS (npm) ● Drupal source plugin ● JSON API module ● Paragraphs ● React Components ● Gatsby Drupal Module ● Gatsby Cloud
- 18. | 18 Gatsby All the Way Builds Incremental builds ~44 seconds CDN Deployments ~45 seconds Preview Up to date view of content
- 19. | 19 We combine open source technologies to make our tech stack. Gatsby Cloud Gatsby Drupal 8 Pantheon Our Tech Stack
- 20. | 20 Should You Decouple? | 20
- 21. | 21 How to Weigh Your Options Simple architecture Hosting is straightforward Views, Layout Builder, Webform, Auth visitors Single codebase Twig theming Code complexity Large talent pool of React developers Great performance/scale Security Two codebases More moving parts Traditional Drupal Decoupled Gatsby vs
- 22. | 22 Best Practices w/ Decoupled Gatsby Performance testing early and often. Turn on and test all caching. Avoid making Gatsby download large files. Upgrade Gatsby to latest version as you go. Test in all environments. Decide on image processing (Drupal vs Gatsby).
- 23. Questions?
- 24. | 24 Decoupled Resources ● Decoupling Drupal: A Conversation with Gatsby ● MagMutual.com: On the JAMStack with Gatsby and Drupal 8 ● MagMutual: A New Era of Healthcare With Drupal 8 & Gatsby ● Sandy Springs: Digital Display With Decoupled Drupal 8 + GatsbyJS ● Decoupling Drupal is Easier Than You Think ● Decoupled Drupal with Gatsby: A Business Case Evaluation ● The State of Drupal Blogs Videos/Podcasts Case Studies