Lupus Decoupled Drupal: Bridging Drupal’s Backend Strength with Frontend Freedom

Lupus Decoupled Drupal is an open source project that combines Drupal’s robust content management system with modern frontend technologies. The project provides a fully configured headless setup, retaining key Drupal features while using a component oriented decoupled architecture. This results in a flexible and dynamic development experience, which makes it a suitable option for developers, themers and site builders who wish to utilise the versatility and capabilities of Drupal in a decoupled framework.

Key Features

• Retention of Core Drupal Functionalities: 
  • Lupus Decoupled preserves core Drupal functionalities like cookie-based authentication, URL management, content previews, metatag generation, and integration with Layout Builder. Ensures content editors maintain a familiar, user-friendly experience in the backend while developers benefit from Drupal’s secure, reliable foundation.
  • Consolidates all page components (including blocks and embedded views) into a single API response, streamlining data delivery.
  • Leverages Drupal's API-first architecture, Lupus Decoupled Drupal provides a consistent digital experience whether users access content via web browsers or mobile apps.
• Component-Oriented API:
  • Transforms Drupal pages into high-level frontend components utilising custom elements, delivered in lightweight JSON format.
  • Enables efficient data management on the frontend, promoting modular design and reusability.
  • Developers gain complete control over building complex interfaces without relying on Drupal's theming layer.
• Custom Elements:
  • The new release 3.x, provides a user interface to configure custom element outputs based on entity view modes.
  • The module includes an API that creates nested trees of custom elements linked to cache metadata, which can be serialised into markup or JSON.
  • Custom HTML elements (e.g., <flag-icon country="nl"></flag-icon>) can be defined, making Drupal compatible with component-based frameworks like Vue.js and React.
• Integration with Modern Frontend Frameworks:
  • While any frontend framework or tooling may be employed to render the custom elements API response, Lupus Decoupled Drupal is provided with a Nuxt setup that is ready for use by default.
  • Work on the frontend without deep Drupal knowledge, focusing on visual presentation with complete control over markup and scripts.
  • Easily extend functionality with both Nuxt and Drupal modules, fostering customization and innovation.
• Performance Optimization and Caching:
  • Integrates with Drupal's native caching mechanisms, including page-level caching and cache invalidation, to enhance performance.
  • Unlike GraphQL or JSON API, Lupus Decoupled requires just one API call per page, enhancing both performance and speed.
  • Frontend optimizations such as lazy-loading images and components, along with asset minification, contribute to a smooth and responsive user
• Support for Drupal Forms and Authentication:
  • Facilitate user authentication directly from the frontend.
  • Offers support for Drupal forms on the frontend, enabling incorporation with features like comments and webforms.
  • This is a work in progress, with plans to expand the available features. We welcome suggestions from the community for future enhancements and new feature requests.
• Flexible Frontend Deployment Options:
  • Offers deployment flexibility, supporting Node.js servers for server-side rendering, serverless functions for scalability and enables static site generation.
  • Leverages frameworks like Nuxt for fast, secure, and SEO-friendly static sites, catering to projects with high traffic and extensive content needs.
  • Compatible with both Drupal modules and Nuxt enhancements, allowing for tailored functionality and growth alongside project requirements.

Community Support and Contribution

• Lupus Decoupled, initiated and maintained by drunomics, relies on community feedback and contributions and has received recognition for its innovative solutions. 
• Thanks to various collaborators like Full Fat Things for their valuable contributions, specifically in supporting block layouts, views, and forms.
• The team will be present at DrupalCon Barcelona, sponsoring the Contribution Day and we are looking forward to hearing your feedback and recommendations for future enhancements, as we want to make sure the project continues to evolve in line with the community's needs.

Lupus Decoupled Drupal offers a streamlined, efficient development experience while leveraging the strengths of Drupal's robust backend. Its modular approach, performance optimisations, and multi-channel support make it a versatile solution for modern web development projects.

Resources

Official Project Page: Drupal.org - Lupus Decoupled

Project Website: Lupus Decoupled

Join the Conversation on Slack: Drupal Slack Channel

Blog Insights:

• Why We Don't Use GraphQL
• Custom Elements UI for Quicker Changes
• Custom Elements: Our Solution for Soft Decoupled Drupal

This article has been written for The Droptimes, reviewed and edited by: Roderik Muit  and Liopold D. Novelli