What is Decoupled Drupal Again?
A decoupled architecture allows developers to utilize any technology to render the front-end experience (“the glass,” where a user interacts with an application) in lieu of the theming and presentation layers that come with a coupled CMS out-of-the-box. In a decoupled Drupal architecture, the Drupal back end exposes content to other front-end systems, such as native mobile applications, conversational UIs, applications built in JavaScript frameworks, or digital signs.
At a high-level, a “headless” or “decoupled” Drupal website utilizes a secondary application to present data visually. The second application introduces a new level of technical freedom and opportunity on multiple levels. For example, decoupled projects provide the freedom to choose JavaScript frameworks, where real-time data and speed are a major strength. This gives technical leads flexibility to choose the tools that best suit the scope of their project.
Some of Acquia’s customer’s have already been taking advantage of decoupled Drupal to support a variety of use cases. POWDR Resorts is using decoupled Drupal to power JavaScript front ends, while Princess Cruises is using a decoupled Drupal build to serve content to digital signage onboard their ships.
How the Acquia Engage Node.js Application Works
The architectural workflow of the Engage Node.js application consists of two separate codebases. One is a Drupal backend and the other is a Node.js application using Ember to present the UI.
The Drupal 8 back-end application was built using the Lightning sub-profile “headless Lightning”. The “headless Lightning” distribution extends the efforts of the Reservoir and Contenta projects, by focusing on the ability to quickly serve API content for ingestion by decoupled applications. Acquia’s marketing team can use the intuitive and familiar Drupal UI to create and manage content, including session presentations, case studies, and testimonials. With an emphasis on authoring experiences, marketing teams can easily manage Drupal content without extensive technical expertise.
The front-end application uses Ember for its UI and Ember Data to consume data the Drupal API. Node.js serves the Ember application and pre-renders the application’s HTML. For example, Engage attendees can learn more about Lynne Capozzi's ‘Welcome’ presentation, which is displayed on the top left section of the screen. This is the same piece of content that was being created in the Drupal UI. Now, it’s being displayed by Ember.js on the front end.
This separation of concerns allowed us to rely on the respective strengths of both Drupal and Node.js to build the application. The end result is a superior experience for both conference visitors and Acquia’s marketing team.