Lift UX with Progressively Decoupled Drupal & React

Remember early e-commerce websites? They were just some product information and a way to check out.

Now you can see local inventory, or even in what aisle something is located at the nearby Home Depot.

Websites get more sophisticated every day, as your users rely on them to complete more and more jobs. When it’s done well, your site becomes a digital experience, designed to make users feel like it was purpose-built just for them.

Helping users understand what they can (or cannot) do on a site and helping them do it intuitively and efficiently is the goal of a user experience (UX) designer. To bring that to life, a developer then needs to be able to reach into their bottomless quiver of frameworks, techniques, and best practices to turn designs and ideas into a functional application.  

How do you give developers freedom to solve problems with the tools best suited for the task? 

One of the strategies many enterprise-grade websites use is to decouple their content management system from the front end of the website.

A decoupled content management system (CMS) enables developers to leverage separate systems which allow greater flexibility for the front end of your website, while still providing a back end for managing content, users, media, and everything else associated with a CMS. In a decoupled CMS architecture (also called headless), the back end is powered by the CMS, and the front end is powered by a JavaScript framework. 

Who needs a headless CMS? 

Another important consideration is determining if a headless CMS is right for your project. This architecture is something we do not typically recommend for a simple “brochure” site – a website that is only a few pages and has no complex interactive components. Drupal is fully capable of handling a site like that out-of-the-box, while still delivering an excellent digital experience.

If you are still not sure if this might be right for you, you can read our more in-depth analysis on decoupled websites. 

There are also other types of headless CMSs that are available, however few offer all the features of Drupal or have such strong community support. 

What to consider before deciding to progressively decouple 

Before running to your favorite digital agency (ADK, of course) asking for a progressively decoupled Drupal site, there are a few considerations to think about to determine if this architecture is best suited for your website’s needs. 

The first consideration is whether you have a technology partner that can support a progressively decoupled site. This architecture is more complicated than a traditional Drupal monolith site and requires developers skilled in different technologies, such as React and RESTful APIs. ADK Group has successfully done this for several clients – please see the case study for Hancock Natural Resource Group, or the case study for MIT’s Undergraduate Practice Opportunities Program. 

A progressively decoupled site also introduces new challenges beyond using multiple technologies. There needs to be effective communication between all the different team members working on the different technologies interacting with one another. There also needs to be a skilled technical leader on the project to successfully guide the team and outline the requirements not only for the technical needs, but also for the business needs – all while ensuring the system is flexible enough to accommodate all these requirements. 

Fully decoupled vs. progressively decoupled

There are two different decoupling approaches, fully decoupled and progressively decoupled.  

Fully decoupling a site gives all front-end control to the JavaScript framework of choice, while a progressively decoupled site only uses the JavaScript framework for select user interface (UI) components, typically ones that require more user interactions. 

Both approaches can use a myriad of different technologies, but we believe one of the best approaches is using progressively decoupled Drupal for the back end and a React front end. 

How progressive decoupling works

Progressive (or hybrid) decoupling is the process in which React components (usually complex UIs, such as forms or search interfaces) are embedded in a Drupal project. Progressive decoupling leverages the power of Drupal to run the website. That means website admins have full control over content, URLs, menus, users, and other features that may exist on the website. It then leverages the power of React to build the more complicated interfaces for users. 

The benefits of progressive decoupling with Drupal 

Using Drupal as the CMS in a progressively decoupled system comes with many benefits. The three biggest advantages for a progressively decoupled Drupal web application are:  

1. API support  

Drupal has support for many types of APIs, including RESTful JSON, JSON: API, and GraphQL. With anyone of those APIs, React developers can easily and quickly consume the necessary data to build their UI components.  

2. Better user roles and permissions

Drupal has robust support for users, roles, and permissions. It allows you to fully customize what user roles you want on your website, and what permissions those roles have (what features they can or cannot access).  

3. Highly customizable 

Drupal comes out of the box with highly customizable data structuring. It allows Drupal developers to configure content fields to match the content and business logic needs of almost any company.  

4. Robust admin portal 

Drupal has a feature-rich admin portal for managing all the mentioned features and can support features like editorial workflows, webforms, user management, and e-commerce management. 

The benefits of progressive decoupling with React 

1. Separate logic from the user interface 

Having Drupal handle the data management and React handle some UI components allows for quicker iteration of those components to continually improve them and incorporate user feedback. It is also a more future-proof solution that allows for changing and updating the UI as new business needs arise. 

2. Better interactivity 

Users expect fast UIs with instant feedback. While that is possible in Drupal, speed is not one of its strengths. That is not the case with React. It allows you to build performant components that can instantly give feedback to the users, helping them complete what they are trying to do. 

3. Faster development 

In a traditional Drupal website, the back end must be completed (setting up content types, users, roles, and adding sample content) before the front end can begin its work. But by using decoupling components, the back end and front end can agree on an API contract (what data will be in the API, and what format it will be in), and then they can both get started at the same time working on the same component. 

Taken together, these factors create a much better UX, which in turn can significantly increase your website’s success.  

Better UX Means Better Performance 

Tracking key performance indicators (KPIs) is a key step to see how your company or project is progressing against its goals. For websites, that usually means things like website speed, bounce rate, and conversion rate. When using Drupal and React users can get instant feedback without refreshing the page so interactions can happen faster. According to Google research, if a page load time goes from 1 second to 3 seconds, the probability of a bounce increases 32%.  

Users are happier when a website works well – not burdening them with unnecessary steps in a task or excessive page loads – and lets them do what they want efficiently. Drupal and React are a perfect recipe for user happiness. 

If you have any questions about Drupal, React, progressively decoupled websites, or just how you can create a better digital experience, our developers and digital strategists are ready to talk. Please, contact us today.