The road to fully headless Drupal

Blog
Posted on
Road to fully headless Drupal

A frictionless digital experience touches more than just one channel. Today, you need multiple touchpoints, across multiple channels. Be it in an app, a website, a portal… All while keeping it maintainable and avoiding duplicated content and duplicated personalization across all your relevant touchpoints. To deliver this as efficiently as possible, headless offers you the perfect solution.

At Dropsolid we genuinely believe in open source, and that’s why we aim to bring the best of both, Drupal and headless, together. We work towards a fully decoupled Drupal without compromise. Below, we'll explain what that means, our experiences, how we took it step by step, the pitfalls we encountered, and even the solutions we created.

What is headless Drupal?

With headless, the presentation layer of the content (front-end) is decoupled from the management environment. A "decoupled" website is simply the implementation of the "headless" principle. Where coupled has both a front- and back-end, headless has no 'head' or front-end attached to the CMS.

The bumpy road to a fully headless Drupal without compromise

The destination of our journey? A fully headless Drupal without compromise. That was always our end goal since the departure of this trip. But what exactly do we mean by that? Well, first of all, ‘fully’ means not taking any shortcuts. We aim for full feature parity with our existing Rocketship install profile. Any application built using Rocketship, and Rocketship Next.js starter kit will have the following features out-of-the-box:

SVG

Instant updates

Instantly updated pages when doing changes

SVG

SEO best practices

Meta tag and OG tag support, XML sitemaps, Automatic creation of redirects on changed content, Redirects managed in the CMS…

SVG

SOLR Search

Seamless faceted search with SOLR through search API

SVG

Web security best practices

Content Security Policy headers, cross-site Request Forgery protection, HSTS response headers…

SVG

Forms

Integrated forms using the webform module.

SVG

Secure data

SVG

Accessibility as a default

Semantically correct HTML, text alternatives for visual elements, audio, and video alternatives, skip to content link, sectioning elements that work for readers, ARIA for non-semantic HTML…

SVG

Editable menu’s

Marketers have full control on all menu's across the different digital touchpoints.

SVG

Multilingual support

Full support for multilingual content as:

  • simple structured data pages,
  • pages created with the “Layout builder” page builder from Drupal core.  

SVG

User Management

Authenticated users for the application managed in Drupal

Why open source?

Why do we find the open-source aspect so important? Many of the above features are not available when using closed-source solutions like StoryBlok, Contentful... 

The advantage of a good starting point

In my previous blog, I also talked about the disadvantages of headless. Did they disappear? Not at all. But we believe we can mitigate or even fully remove these disadvantages if we create a good starting point: A version of our Drupal installer - Rocketship - that is 100% headless.

In this blog below, we’ll go through our learnings at the different stations and crossroads in our journey.

SVG

Station 0

Why headless Drupal?

SVG

Station 1

Headless Drupal + React: the best technology fit

SVG

Station 2

Boarding the right talent

SVG

Station 3

Starting with a solid base: a headless Drupal architecture

SVG

Station 4

Developing the right partnerships

SVG

Final station

Is there light at the end of the tunnel?

STATION 0

Why headless Drupal?

At Dropsolid, ever since our start 10 years ago, we’ve always focussed on customer experiences. Over the past years, we’ve seen the needs of our clients regarding these digital experiences shifting. Like many things in life, headless Drupal also has pros and cons. But based on the needs of our customers we always think about the optimal solution for each project. Taking into account efficiency, maintainability, security, and robustness.

Then why did we specifically choose headless Drupal? Easy, to combine the best of both worlds: the enterprise capabilities of Drupal, with the power and flexibility of headless. That is the winning combo we’ve been looking for.

STATION 1

Headless Drupal + React: the best technology fit

In the past years, we’ve done thorough research to select the best technology. Note that it’s not a ‘fear of missing out’, but a genuine belief that we have a good understanding of what this technology stack can offer us in the future, even if we have to put in some effort to get feature parity with our current stack. The situation is comparable to when digital photography was coming up. The quality of analog photography was still better when digital photography came onto the scene. However, years later, digital photography has become so much better, has evolved, and created so many more innovative solutions. So, by learning from the mistakes of others, we’ll embrace the change, unlike, for example, Kodak, when they were confronted with the disruption in their industry. We are looking forward to leveraging Javascript to create more advanced user interfaces using for example:

  • 3D rendering capabilities: threejs & needle
  • Machine learning in the browser: TensorFlow.js
  • Creating native applications on desktop or mobile phones using React Native or ElectronJS
  • Leveraging web sockets, service workers...

Based on the market evolution, where there is talent, maturity, and future vision… we’ve chosen Drupal with React and Next.js. The reason we prefer these technologies is that they’re all open source and have a proven track record. They are not new, but still very much alive and evolving. Some simple stats:

  • Drupal: Initial release: 2001, latest version 10 released in December 2022.
  • Next.js: Initial release 2016, latest version 13 released in October 2022.
  • React: Initial release 2013, latest version 18 released in June 2022.

STATION 2

Boarding the right talent

There is a big pool of talented developers that only have experience with front-end technologies, and we believe we can learn much from them regarding interactive user interfaces. What we offer them is the experience of building and maintaining enterprise-level applications. 

In our roadmap, we foresee training all our developers to get acquainted with the additional technologies we use. On the other hand, we’ll also be attracting new talent, so if you are interested, apply here.

STATION 3

Start with the basics: a headless Drupal architecture

To reach our goal of a fully decoupled Drupal we have chosen to invest our time into making sure that:

  • Rocketship install profile is ready to be decoupled
  • We have a starter kit using React and Next.js
  • We can host the Next.js application on Dropsolid Experience Cloud

In the graphic, you can see our view on a headless Drupal architecture.

We aim to evolve this in future projects to a more mature headless starter kit based on the evolving needs of our enterprise clients.

Headless Drupal Stack

STATION 4

Developing the right partnerships

We will leverage some of the work already done by Chapter Three through the excellent Next.js for Drupal and make our Headless Starter Kit available for everyone to use and contribute to. 

One of our partners Silbury a leading German digital integrator focused on sustainable digital solutions, is already using Dropsolid Experience Cloud to deliver seamless omnichannel digital experiences to its clients. With their Headless Drupal Blueprint, a model that extends Dropsolid’s DXP, they make it possible to (co)create next-level and future-proof digital experiences.

Read more

FINAL STATION

Is there light at the end of the tunnel? 

Does that change the decision tree we talked about in the past? It certainly does. In fact, you don’t need that tree anymore as all solutions offer the same functionalities. Together, we’ll have a look for the ideal fit for your project. 

Interested in our journey towards fully headless?

We’d like to share our knowledge and insights with you. Subscribe to this series of blog posts and learn how we encounter and solve technical, architectural, and sales challenges on our road to a fully headless Drupal that is ready for enterprises.