Presenters
Source
Leveling Up Developer Experience: Building a Thriving Internal Developer Portal at Adyen 🚀
Hey tech enthusiasts! 👋 Ever wondered how global financial tech giants like Adyen keep their development engine humming with speed and quality? Sander Boumeester, an engineer at Adyen for the past two and a half years, shared some incredible insights into their journey of transforming their internal developer portal, aptly named “Launchpad,” from a little-used tool to a vital hub for over a thousand developers.
Adyen, a company powering financial services for giants like McDonald’s and Spotify, understands that a successful internal developer platform (IDP) hinges on empowering its builders – those who create and expose tooling – to deliver with speed and quality. This isn’t just a nice-to-have; it’s the core principle that drove their transformation.
From Overlooked to Over a Thousand Users: The Launchpad Evolution ✨
Two and a half years ago, Adyen’s Launchpad was a humble affair. As Sander showed us, the sidebar featured a sparse service catalog. Fast forward to today, and it’s a powerhouse! The sidebar now boasts extensive documentation, a developer kit, and a dedicated development section, all populated by the very builders who were empowered to contribute.
Tackling the Challenges: A Builder-Centric Approach 🛠️
Sander outlined four key challenges they navigated to achieve this success:
1. Getting the Basics Right: Building the Foundation 🏗️
Initially, Backstage at Adyen was a side project for a CI/CD engineer. However, after demonstrating its value, leadership recognized the need for a dedicated product team. This team, a blend of product, UX, and tech expertise, became the driving force.
A crucial realization was the need to focus not just on end-users but also on the builders of the platform. By interviewing these builders, Adyen uncovered their friction points and gained invaluable product discovery insights.
2. Combating Tribal Knowledge: Empowering the Community 🤝
The initial Backstage team possessed a wealth of knowledge about building plugins and utilizing features like the catalog and scaffolder. However, this knowledge was concentrated within the team, creating a bottleneck. To scale, they needed to share this expertise.
Their solution?
- Developer Kit: A comprehensive set of guides, housed within TechDocs, detailing everything from running Backstage locally to creating plugins and integrating with the catalog. These guides are accessible both within the Backstage repository and directly in the portal.
- Scaffolder Templates: Leveraging the
yarn newcommand, they made it incredibly easy for developers to bootstrap new plugins. These templates ensure that any new plugin automatically adheres to the established standards set by the central team.
3. Bridging the Front-End Expertise Gap: Shared Concerns 🎨
While making it easier to build plugins was a win, ensuring they were built well presented a new challenge. Many builders were platform engineers, sysadmins, or infrastructure developers with limited front-end experience.
Adyen addressed this by:
- Enhancing Data Fetching: Beyond the default
node-fetch, they introduced capabilities like polling, retrying, and caching for data retrieval, often utilizing frameworks like Tenstack. - Standardizing Form Building: Using React Hook Form, they ensured a consistent approach to building forms for users.
- Component Library & Storybook: While leveraging MUI, they also developed standardized internal components. Tools like Material React Table provided essential table features. Critically, Storybook served as a visual showcase, demonstrating available components and how to use them, enforcing UX guidelines.
4. Fostering Autonomy: Development and Deployment Freedom 🕊️
The final hurdle was becoming a bottleneck in the deployment process. Developers had to open numerous merge requests, which the central team then had to review, merge, and ship. The goal was to shift this ownership.
They achieved this through:
- Deployment Autonomy:
- Environment Tiers: Developers can release to testing and staging environments at will. Production releases require approval but are then managed by the developer.
- Ephemeral Environments: Using Argo CD’s Git generator, developers can create temporary, isolated Backstage environments for their merge requests by adding a “preview” label. This allows for early showcasing and feedback without impacting the main codebase. This feature proved incredibly popular for experimentation.
- Development Autonomy:
- Quality Gates: Tools like SonarQube help raise the development bar.
- Custom ESLint Rules: They developed specific ESLint rules to guide developers towards using approved components and patterns, discouraging outdated practices.
The Road Ahead: Future Challenges and Aspirations 🛣️
Adyen acknowledges they haven’t reached a “golden state” and are actively addressing future challenges:
- Compatibility: As standards evolve, migrating older plugins to the latest guidelines is an ongoing effort.
- Monolithic Bundling: Their current monolithic bundling approach slows down pipelines, especially with increased experimentation and testing. They are looking forward to adopting the splitting and bundling strategies discussed earlier in the conference.
- Consistent UX: Ensuring a cohesive user journey across scattered contributions from builders, who may lack front-end expertise, remains a challenge.
The Guiding Principle: Speed and Quality for Builders 🎯
Sander’s core message resonates strongly: An internal developer portal has a higher chance of success if your builders can deliver with speed and quality. By focusing on empowering these builders through clear guidance, standardized tools, and increased autonomy, Adyen has successfully transformed their developer experience.
It’s an inspiring testament to what’s possible when you prioritize the needs of those building within your platform. Kudos to the Adyen team for their incredible work!
Do you have any questions about Adyen’s Backstage journey or how they empower their builders? Let us know in the comments! 👇