Decoupled frontend with Drupal still behind the wheel
In many Drupal projects, frontend and backend are tightly coupled. Teams often start with the best intentions, but every greenfield project evolves over time and that always comes with some form of entropy.
Six years ago, I started working as a Drupal developer/architect at the European Commission. Around that time, we began building a platform to power multiple websites. Knowing that we would maintain this platform over the long-term, we revisited the pain points that we had encountered over the years. We explored a different approach to frontend development, with a focus on better reuse across websites of DG Education and Culture.
We eventually moved to an architecture where Vue.js components are developed and documented in Storybook, and then integrated into Drupal Twig templates for rendering, and that's what we'll dive into in this session.
I'll share our experience building, testing, maintaining, and improving this long-term Drupal platform. I'll talk about the advantages this approach gave us, the challenges we encountered, and how we are now benefiting from decisions made earlier in the project. We believe this approach is especially valuable for larger projects that span months or years of development and maintenance.
I'll explain how we use Storybook as a development workbench, Vue.js as a lightweight frontend theming layer, while Drupal still handles the heavy lifting on the backend side. Our implementation uses Vue.js, but the underlying approach is not framework-specific and can be adapted for using Web Components, React, Svelte, Ember, and other modern frameworks.
I will demonstrate the lifecycle of a component, from its inception in Storybook, through automated testing (unit, functional and visual regression) to its final integration in a local Drupal development environment.
The session will also include a demo of a sample setup, combining Drupal with a Vue-based Storybook environment and tooling. Feel free to use it as a starting point if you ever consider a similar approach to your project. This session is mainly aimed at front- and, backend developers, and architects, but may also be relevant for UX designers and technical decision-makers interested in long-term maintainability.
I hope it can inspire you. It's not a holy grail, just an approach that works for us and I'm happy to share it with the community.
I’m a developer at the European Commission since 2019 (DG Education and Culture) with nearly 18 years of experience in both frontend and backend development. Over the years, I’ve worked on a wide range of Drupal projects, with a strong focus on building maintainable and long-term solutions.
I live in Marke (Kortrijk) and I'm a father of three. Outside of work, I enjoy music and playing drums, snowboarding and tinkering with hobby electronics.