Creating a Modern, Scalable Open Source Platform with Decoupled Drupal

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 a great Gatsby experience.

In this session, get a front-row seat on how Penn State partnered with an outside Drupal partner, Mediacurrent, on the architectural decisions and technical integration of Drupal and Gatsby on the Penn State News site. This platform can be leveraged across the university for years to come by completing the objectives for the project, which includes:

– Designing for mobile-first flexible design system utilizing a component-based approach
– Rebuilding the Drupal 7 content management and publishing system to utilize a decoupled architecture, leveraging Acquia hosted Drupal and a Gatsby Cloud frontend
– Providing Drupal API endpoints that can expose content to the Gatsby frontend and more than 20 campus locations across the university
– Advancing the university’s SEO strategy and driving measurable change to acquisition, reach, and engagement of readers
– Migrating and improving on the Headlines email system, which sends 30 million individual emails per year
- Building a platform that can scale with cost predictability

OUTCOMES:
At the end of this session, attendees will be able to:
1. Create high-level strategic plans for brand-focused and scalable web platforms
2. Focus on delivering business value via the platform by leveraging open-source software and cloud services
3. Summarize the benefits of a decoupled architecture and Identify when decoupling makes sense

Presented at Penn State University Tech Pros 2022 with Jim Nourse

Transcript

1. Creating a Modern, Scalable Open Source Platform with Decoupled Drupal PREPARED FOR: Tech Pros 2022 Penn State University Strategic Communications 2022
2. Your Presenters ABOUT US – 2 Mark Shropshire Sr. Director of Development Mediacurrent Jim Nourse Director of Web Platforms Office of Strategic Communications
3. Mediacurrent An Open Source Product Agency 3 Based in the U.S., with team members around the globe, we define, design and deliver websites, platforms and digital experiences. We work across industries to provide utility to users, build value for businesses, and move technology forward. Our commitment to the Open Source Community goes beyond software contribution, extending into our craft, process and culture. ABOUT MEDIACURRENT –
4. Table of Contents 01 The Vision 02 Penn State News 03 Q&A 4
5. 5 01 The Vision
6. So, About Polaris.. • In 2012-14, IT and Strategic Communications partnered on a CMS, design and operational alignment program • Phase 1: WWW and News • Phase 2: The Commonwealth Campuses platform • www.psu.edu is no longer in Drupal and is hosted in AWS S3 • www.psu.edu/news remains a Drupal product* * Drupal is one of many services involved THE VISION – 6
7. Lessons Learned • Centralization mandates are hard • Design, build and rollout took too long • Built to do too much – technical debt • Understand what people need • Deploy in a flexible hosting environment • Developer community eager to share • Choose modern technology stacks • Broad enthusiasm for frontend brand alignment • Bring in experienced teams THE VISION – 7
8. What happens when an organization doesn’t embrace these principles? VISION - 8
10. Goal: Help Solve Institutional Problems • Share the tools that power Penn State’s brand and high visibility websites • Meet the producers of websites where they are ◦ Regardless of stack • Embrace Penn State’s thriving open source community • Make AD-54 relevant • Create a consultative digital center of excellence • Support cost control and cost predictability • Use data to drive decisions THE VISION – 10
11. 11 The Big Picture Greater Brand and UX Alignment in Public Facing Penn State Websites Empower Brand Ambassadors A decentralized matrix of staff, faculty, students and vendors implement our digital brand The Penn State Brand on the Web Align, enhance and protect the brand across digital channels Digital Center of Excellence Support diverse workforce with expert consultants: digital, design, content, technical, UX, analytics. Reusable Code. Sharable Strategies Content strategies, design patterns, frontend and backend code, cloud hosting providers. VISION – 11
12. Building Blocks of a Platform Brand Artifacts Colors, patterns, fonts, headings, buttons, form elements, icons, navbars, footers, cards, marks, hero’s, grids, alerts, blockquotes, etc. Designed Brand Components & Style Guides Content strategies, content models, collections of components. How to assemble the pieces on-strategy and on-brand. Tools for Content Writers / Producers Downloadable JavaScript, HTML, CSS. Templates. GIT repos. Custom upstreams. Access to cloud hosting partners. Code for Developers Philosophies, Principles, Documentation Implement, Contribute, Web Ops, Customize, Hosting VISION - 12
13. 13 Step 1: Leveling Up a Web & Digital Team VISION - Focus on Division Priorities Focused on improving our core. Onboard: Digital strategy, agile processes, and industry standard tools and methods.. Brand book. Micro sites. Write great user stories and specifications. Embrace Data-Driven Decision Making Avoid doubling down on the past. Embrace a questioning, hypothesis-driven optimization culture. Do the research. Trust the results. Rapid Prototyping. And More Rapid Prototyping Sprint to demonstrate incremental results on a routine cadence. Earn trust of stakeholders. Just Enough, Just in Time Not every website is the same. Embrace platform-agnostic solutions. 13
14. 14 Step 2: Refactor WWW.PSU.EDU VISION - Discovery Deep UX research, stakeholder interviews. We had a battleship but only needed a speedboat. Site goals: traffic direction, brand storytelling. Design Extensive wireframing. Invest in atomic design philosophies. Platforms and Dev-ops Empower editors with a lighter-weight, component-based CMS. Develop recipes to extract db-driven CMS content into CDN-ready static resources. Move from on-prem to cloud; get in front of cloudfront. Establish modern CI/CD pipelines. Static components: live integrations. Create Always-On Optimization Culture Modern websites are never ‘done’. Invest in continuous optimization cycles. Focus on the user, site performance, SEO. Changes in tech. 14
15. Step 3: Design Systems VISION - 15 A design system is a complete set of standards intended to manage design at scale using reusable components and patterns. Design systems are a living combination of design assets, style and usage guidelines, code snippets, and more. Benefits of Design Systems ➔ Deliver consistent, on-brand user experiences across all digital touchpoints to meet customer expectations ➔ Decrease maintenance and unintended design and technical debt to save time and money ➔ Drive cultural change for how internal teams and partners work together and collaborate with one another ➔ Position maturity inside and outside of your organization
16. Typography, Color and Tokens VISION - 16
17. 17 Step 4: Component Libraries VISION - 17
18. Step 5: Develop Content Strategies and Instructions for Storytellers “When” and “Why” components in a website are used is the domain of marketers, storytellers and strategists. VISION - 18
19. 19 Step 6: A Platform for News, and More PRODUCT STRATEGY – Develop a Unifying Product Strategy Single domain strategy. Leverage the brand. Focus on SEO. Anticipate demand for downstream API ingestion. “It’s more than a website”. Bring in Experienced Teams and Tested Methods Use a stack and methods that would be recognized in the private sector. Choose commodity solutions across the stack – default to open source solutions wherever possible. API-first Architectures and Mini-services Architect in segments. Embrace agility and antifragility. Architect for Maximum Reusability and Scalability Build the platform while building the product. 19
20. Step 7: Code, Upstreams & Web-Ops PARTNERSHIP AND PLATFORMS – Standardize Design and Functionality Across Many Sites Custom Upstreams act as a scaffold for new sites, allowing developers and site owners of any skill level to kickoff projects at warp speed. Efficient Update Strategy A sustainable and scalable process for handling updates across massive site portfolios. Yet Still Highly Customizable When base scaffolding won’t do, partnering units can apply customizations via code changes. Centrally Managed. Cloud Hosted. The core platform is centrally managed. Customizations are the responsibility of adopting partners or their vendors. Core Platform Custom Upstream Website 1 Website 2 Website 3 Website 4 GIT.. CORE REPO GIT.. PARTNER REPO 20
21. 21 News Site Requirements PRODUCT STRATEGY – Hosting Outsource Hosting Infrastructure and DevOps Automation to the Cloud Authoring Build a Best-in-class Content Authoring Experience Decoupled Frontend Provide a Secure, Reliable, and Performant Decoupled Frontend One-Domain, Multiple Hosts Glue News to psu.edu Via Reverse Proxy 21
22. 22 Platform Requirements PRODUCT STRATEGY – Universal API Provide API for All Penn State Campuses, Colleges and Units Global System Integration Integrate with Penn State Systems Workflow Segregation Separating workflow around front-end and back-end Reusable Services and Patterns Logic agnostic to particular business process or stacks 22
23. 23 02 Penn State News
24. 24 24 Build Platforms
25. Penn State News Stats 25 250 Contributing Editors PENN STATE NEWS – 30 Unique Stories Per Day 40 Images and Videos Per Day X Highly Custom Drupal 7 Build 70 Syndicated Partner Websites 35 Million Individual Emails Per Year
26. 26 26 Design System of Record PENN STATE NEWS – • Component-Based • Democratized Content • Complex Back-end
27. Leveraging What Penn State Had PENN STATE NEWS – 27 + = ?
28. Decoupling Empowered Penn State to Transform a Website into a Platform 28 Community Touchstone 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 PENN STATE NEWS – 28
29. 29 Separation of Concerns
30. Gatsby Is The Frontend Built For Decoupled Content TECHNICAL STRATEGY – Gatsby Framework 30 Gatsby Cloud
31. 31 Content Authoring Experience PENN STATE NEWS 31 It is critical that the AX is top-notch given there about 250 content editors.
32. Content Moderation PENN STATE NEWS – 32 With PSU’s large editorial team came the challenge to manage high-volume workflow requirements.
33. 33 Gatsby Preview PENN STATE NEWS – 33 An integration with Drupal and Gatsby Cloud allows authors at Penn State News to see a preview of changes before they go live.
34. 34 Platform Tech Stack PENN STATE NEWS – 34 We’ve pulled together a robust combination of open source technologies to build out our tech stack. API User-Facing Website Images Campus Alerts Files Send Emails for News Publications, etc.
35. 35 35 Always-On Optimization
36. 36 36 Wins PENN STATE NEWS – • Improved Authoring Experience • Richer SEO and Analytics • Standardized psu.edu Brand • Campus Alerts as a Service • Reduced Full Builds 81% • Lower Operating Costs • Open Source Contributions • Federated Navigation • Single domain, multiple workflows glued by proxy
37. Where We’re Going • Shareable, always evolving library of components • Tools, strategies, documentation for marketers, developers and our partnering vendors • Design system • News Content API • Federated “live” components and CDN for common things • On-brand WP Theme for Wordpress Sites at Penn State • Partnership with WPSU • Consultative Digital Center of Excellence • Access to our code and technology stack • Custom upstreams THE VISION – 37
38. Q&A Jim Nourse - Penn State University jnourse@psu.edu Mark Shropshire - Mediacurrent mark.shropshire@mediacurrent.com