There are many different solutions when it comes to building and launching digital experiences across channels. Decoupled Drupal allows greater flexibility for your front-end presentation layer – website, mobile, digital display, etc. – that your customers interact with while being served content from the same CMS as your website.

Decoupled Drupal is also an excellent way for Acquia to work with partners to deliver best-in-class experiences across the board. Microserve, an Acquia partner, has impressive experience when it comes to decoupled Drupal. Microserve’s client list includes nonprofits, local government, financial services, local businesses, startups, education. Some of their premier Drupal projects have been with Youth Hostels Association (YHA), World Wildlife Foundation (WWF) and AB Sugar.

Emily Coward is the development team lead at Microserve. Her role includes making sure her team understands the problems a client has and then helping them work through the pain points and plan a technical solution to solve those problems.

“A large part of my work involves aiding communication and making sure my team have everything they need to work efficiently and to the best of their ability,” Coward said. “That can include liaising with technical contacts on the client side, helping with the technical planning and setup of projects, taking part in sprint planning, providing training, speaking with hosting providers or providing support in one-to-ones and working groups.”

We sat down to discuss decoupled Drupal and how to determine when it’s the best option for customers.

How has your decoupled approach evolved and the benefits?

We started building decoupled sites over two years ago, so we’ve definitely learnt a lot in that time. Drupal has changed a great deal in that period, as has the rise of JavaScript Frameworks. Vue.js has become very popular, so we’ve continually up-skilled the team not just on a Drupal level but also from a front-end perspective.

We’ve brought in developers who hadn’t worked with Drupal before, but have a huge amount of JavaScript experience. I think the main thing to say, is we are still learning, each decoupled project brings different challenges, so our approach is continuously evolving. We look back at some of the earlier projects we did and we know we would approach those differently knowing what we know now. Things we are looking at now include GraphQL, Contenta (API first Drupal distro) and Gatsby.

Defining the Architecture Strategy

When helping to define the the architecture strategy, understanding the problem is key, Coward said.

“It’s very important to me that I understand a clients goals and business objectives first and foremost, before talking about the technology. Only when both parties (us and the client) have a shared understanding of the problem, do we start thinking about the technical requirements. In order to reach a shared understanding of the problem, we often have to assess a client’s existing digital platform, understanding the types of problems their customers or admin teams are facing, and put together a roadmap and a solution for addressing those problems.

“For our more digitally mature clients, we work hard to establish a close working relationship to the point where they are happy and willing to share their businesses digital roadmap. This can sometimes contain sensitive information, but when they are willing to share this information we can ensure that our technical solutions are fully aligned with their business goals and strategic ambitions,” she said.

Making the Architecture Decision

When asked about the use cases that work best in a decoupled Drupal Architecture, Coward said in Microserve’s experience, centralising data into a single place seems to be the most common.

“Improving the management of content into a single hub or platform rather than having it spread across a multitude of different systems e.g giving clients flexibility over their data and helping them use it in different ways to reach wider audiences.

“For our clients who have chosen a decoupled approach, they usually have a clear plan for future enhancements beyond a traditional website, such as apps, and other digital experiences. Decoupling gives them the option to use other technologies but draw data from Drupal as the one source of truth,” she said.

Why are customers asking for these types of features?

“Well, some have asked for it because it’s the ‘thing to do’ and it’s cutting edge, it’s cool. Others because they want to serve their content to multiple platforms, they want the flexibility to publish content anywhere,” Coward said. “Performance and user experience come into it as well. Some clients want a really slick front end, they don’t want to wait for page reloads, they want an app-like experience."

Is there a difference in implementation cost?

“Yes, at the moment as you are dealing with more complex technical requirements and several different technologies working together,” Coward said. “You need several different skill sets and that’s always going to be more expensive, not just in terms of the initial development, but ongoing maintenance and support. Our focus is always about finding the right solution for our clients. We wouldn’t recommend a decoupled solution if the client isn’t going to see that return on investment.

“By adopting a decoupled architecture, there are many long term potential cost advantages. Such as, the ability to refresh the website with a new front end rather than a full site rebuild, which will most likely be more cost and time efficient in the future. This forward thinking approach to total cost of ownership is not for everyone, but for those who are looking for a more future proofed solution it is an attractive proposition,” she said.

Is there a difference in delivery speed?

“Yes there can be, but it depends on the project requirements. Creating decoupled sites is still relatively new and that in itself brings challenges to the business and to the team,” Coward said. “The communication aspect is probably the biggest point to make, communication is always key, but with a decoupled project there can be even more people involved, so it’s vital to make sure everyone has a shared understanding of the project and knows who is responsible for each part and at what time.

“There is obviously a learning curve for the whole team, especially when you might be working with technologies you’ve not worked with before, we like to call them ‘known unknowns’ – that’s obviously going to affect delivery speed - but we mitigate that with personal development time and regular knowledge sharing, so people can learn more about decoupled architecture without the time pressure of a client deadline. With each decoupled projects you do, you understand more about what works well and what doesn’t so you take those learnings into the next project,” she said.

What are the long-term benefits?

“It provides a better, long term solution for clients. If their data is in a central location, then they have the ability to use that data across a number of platforms and allow it to be consumed in different ways by different people,” Coward said. “Clients aren’t tied into a single website that needs to be redesigned every three years. Decoupling allows us to separate the data, from the look and feel, we can swap out the front end (or even the back end) if needed – that allows us to make changes far quicker and more easily than we have in the past.”

Decoupled Drupal Customer Examples

AB Sugar

What was the challenge?

AB Sugar have a large, complex community site. One piece of functionality in the site gives their administrators the ability to manage events. They run several large conference-type events each year, which are invitation-only. During an event they wanted to encouraging people to put forward questions to the speakers and then prompt audience members to vote for the most popular questions and record the outcome of the question and answer sessions for each event.

Why decoupled was the best solution?

We created a question and answer app using Vue.js which could be used for each session during the event and was accessible from each session page on the community site. Using Vue.js meant the questions, answers and voting results appeared in real-time so it was fast, it was slick and it gave users an “app-like” experience. Decoupling the front end meant it was easy to re-use for multiple events and sessions, it was easy to update (e.g. rebrand if needed) and easily accessible from mobile devices.

Did it impact their roadmap?

Yes, we had a couple of technical challenges around hosting the app and getting the data to and from Drupal. However, because the front end of the app is separate from the back end, we can easily re-use it and we are looking at re-purposing the app for a similar piece of functionality for the same client.

Youth Hostel Association (YHA)

What was the challenge?

YHA have a huge amount of data about each of their hostels, experiences and media, which was distributed over multiple platforms. As the data was spread out it was inconsistent, out of date and was difficult for the YHA team to control as it had to be updated in multiple places. Getting a consistent message and relevant information over to their customers was difficult because of this distributed data.

Why was decoupled was the best solution?

We used a Drupal to Drupal decoupled approach to give YHA a centralised content management platform, allowing their data to be shared amongst all YHA digital properties, not just their websites. A centralised platform for all hostel data, plus any other shared data such as media has made the editorial experience far more efficient for the YHA team. They have one place to manage hostel data rather than multiple – this was a crucial part of the project. Decoupled was the best solution in this case, because now YHA can publish their data across many different platforms in the future such as kiosks in the physical hostel buildings, mobile apps, Alexa skills, websites etc.

Did it impact their roadmap?

Yes, using a decoupled approach for their main site has enabled YHA to “think big.” It has generated many new ideas and possibilities that have contributed to YHA’s long term plans. A traditional technical approach would have been restrictive, in respect of time and cost in terms of delivery.

The Future of Decoupled Drupal at Microserve

When asked whether she expects to be building more decoupled than traditional websites in the future, Coward said she wasn’t sure what the future holds specifically.

“The amount of sites built using a decoupled architecture will increase, however, the need for traditional sites is still there,” she said. “It really depends on the challenges our clients are facing and whether a decoupled architecture is the right approach to help meet their needs. It also depends very much on the client’s mind-set, if they are ambitious, and forward thinking and if we believe that a  decoupled site is the best approach (factoring in time and budget expectations), then it makes sense to recommend that route over a traditional web build.”