Gatsby and Drupal at Scale: Higher Ed News Site

Drupal is a powerful content management framework, providing the ability to build complex content authoring workflows. Gatsby has a rich framework and robust cloud product that, when used in conjunction, can provide the best Gatsby experience.

In this session, get a front-row seat to the architectural decisions and technical integration of Drupal and Gatsby. We will share our recent project experience on one of the world’s largest decoupled Gatsby/Drupal sites.

Presented at GatsbyConf 2022

Transcript

1. Gatsby and Drupal at Scale Higher Ed News Site Mark Shropshire • Sr. Director of Development, Mediacurrent
2. Mark Shropshire Senior Director of Development /in/markshropshire @shrop • From Concord, North Carolina • 20+ years of experience as a technical team leader • Loves empowering teams to excel while using best of class open source technology solutions • Passionate about personal and team growth through mentorship, aligning individual purpose with Mediacurrent’s vision • Plays sax, drums, keys, and bass and has a list of other instruments that he would love to learn Skills • Leadership • Drupal • DevOps • System Design • Flutter • Security
3. 1. Higher Ed News at Scale 2. Technical Architecture 3. Scaling with Gatsby 4. Key Takeaways Today’s Agenda
4. | 4 Who Is Mediacurrent? • Open source experience partner • Focused on Drupal since 2007 • Clients include higher education, nonprofit, government, and global brands • Around 90 US-based team members across strategy, design, and development Mediacurrent is a full-service digital agency that implements world class open source software development, strategy, and design to achieve defined goals for enterprise organizations seeking a better return on investment.
5. Higher Ed News at Scale
6. | 6 University News Project • Over 80,000 students enrolled • Top 10 largest public university in the world • Leader in higher education for more than 150 years • Millions of pageviews annually to the news site
7. | 7 More Than Just a News Site Building Togetherness As a respected hub of information for the full university community. Campus Emergencies An essential informational go-to during campus emergencies. Informing the Public Drives strategic communications and supports public relations initiatives.
8. | 8 University News at Scale 250 Contributing Editors 30 Unique Stories Per Day 40 Images and Video Per Day Highly Custom Drupal Build 35 Million Individual Emails Per Year 70 Syndicated Partner Websites | 8
9. Technical Architecture
10. | 10 Drupal As The Content Authoring Tool Drupal is a content management framework providing a customizable content authoring experience including fields, taxonomy, content moderation, user management, and more. Drupal empowers content editors to control layout of content for traditional Drupal and decoupled Drupal websites. Editors can trust that what they edit and preview is what will go live on the published content site. The ability to provide a single source of truth for content is a Drupal super-power. It allows for successful governance policy implementation and content access from varied consumer end-points. Robust Workflows Empowers Editors API-First Architecture
11. | 11 Content Moderation With a large editorial team came the challenge to manage high-volume workflow requirements. Drupal’s groups, roles, and content moderation make it easier to administer. | 11
12. | 12 Gatsby Is The Frontend Built For Decoupled Content A React-based web framework that makes building fast, secure, scalable, and accessible sites simple and fun. Gatsby handles things like routing, templates, pre-fetching, lazy-loading, and more right out of the box. The Gatsby Content Mesh is a decoupled data layer powered by GraphQL that makes sourcing, normalizing, and updating content lightning fast and straightforward. Gatsby Cloud helps teams deliver the best Gatsby experience with a unified platform for Building, Previewing, and Deploying a Gatsby site to a global, edge network. Gatsby Framework Gatsby Content Mesh Gatsby Cloud
13. | 13 Gatsby Preview An integration with Drupal and Gatsby Cloud allows authors to see a preview of changes before they go live. | 13 v
14. | 14 Tech Stack We’ve pulled together a robust combination of open source technologies to build out our tech stack. API User-Facing Website Send Emails for News Publications, etc. Files Images Campus Alerts Other Apps and Sites
15. Scaling with Gatsby
16. | 16 Gatsby Framework - LMDB Experimental: Node persistence in LMDB (v3.7) Necessary to help keep memory in check during builds by moving nodes from memory to embedded storage.
17. | 17 Gatsby Framework - PQR Parallel Query Running (v4) Produced a significant reduction in build times. The gatsby-source-drupal plugin had to be patched to allow work better with PQR.
18. | 18 Content Previews Filter out preview stories older than one year
19. | 19 After Hours Processing Build RSS and Sitemaps after hours
20. | 20 Client Runtime API Data Fetching Campus Alerts Example with Firebase Cloud Firestore
21. | 21 Gatsby Cloud Wins • Gatsby Edge Hosting • Publish and preview builds • Reduced memory usage • Custom environment variables
22. | 22 The Open Source Ecosystem | 22
23. | 23 What’s Next for the News Site? Architecting Deferred Static Generation (DSG) and Server-Side Rendering (SSR) into the platform. Continue to integrate Gatsby Preview improvements and improve the experience for content editors vis open source components. Improved image performance. Caching image styles once they are generated and leveraging additional image services. Faster Builds & Deploys Previews Image Performance
24. | 24 Key Takeaways Leverage the full Gatsby Ecosystem Prepare/plan for Gatsby Framework updates Contribute to open source components | 24
25. @Mediacurrent Mediacurrent @Mediacurrent MediacurrentDrupal Mediacurrent.com @Mediacurrent Thank You!