Decoupling Drupal: React & Vue
As digital experiences evolve and customer demands grow, decoupling is becoming a more and more compelling option for brands that want to best reach their customers, no matter what channel they frequent.
The Drupal CMS, while still most often used in monolithical settings, is likewise increasingly being employed in decoupled setups. In these cases, it’s typically paired with either React or Vue, the integration with which has been streamlined to be super straightforward and pain-free.
In this article, we’ll take a deeper dive into decoupling Drupal with React or Vue. We’ll go through the use cases and benefits before taking a look at some examples of projects making good use of such an architecture in the final sections. Let’s get started!
A few basics on React and Vue
Much of React’s success and widespread use can be attributed to its lightweight nature and its speed of development. First released in 2013, React is already on major version 17 which was released earlier this year.
As opposed to Angular, which is often used for more complex, enterprise use cases, React and Vue are less opinionated and hence much more customizable and more easily integrated. This makes them a great fit for any kind of decoupled or headless setup, even for multisite/multichannel experiences or a microservice-based front end.
In addition, both of them have dedicated static site generators which leverage server-side rendering to build highly performant single-page applications. The React-based Gatsby already has a reputation, and other similar frameworks are also gaining ground, such as another React-based one, Next.js, and the Vue-based Nuxt.js.
Both are open-source technologies with active, ongoing development (especially React, as we’ve pointed out), meaning that you’re able to both tweak them to your own needs and benefit from frequent community innovation, as well as contribute back to their development yourself.
In the past years, Drupal has made massive strides toward becoming a more future-ready, integration-friendly framework. A key factor here is its API-first approach, which has recently been streamlined by investing more heavily in the JSON rather than the REST API capabilities of Drupal.
However, Vue usage has also been seeing a rise in Drupal projects. We've had a lot of success with using Vue on a number of decoupled Drupal projects, which we’ll tell you a bit more about later on in this article.
When and why use a React or Vue front end for your Drupal website?
While Drupal’s content management capabilities have been significantly improving and the framework offers a multitude of customization options via themes, a more focused and powerful front-end technology is often what’s needed for the more advanced digital experiences that customers have gotten used to and are increasingly demanding today.
Whereas decoupling the front end from the back end makes less sense for a traditional website focused merely on content presentation, there are real payoffs to be had with more specific use cases, such as:
- Multi-site setups with a common back end (especially where individual sites are heavily customized),
- Responsive and interactive web applications (e.g. product catalog pages, frequently adapted content listings, platforms allowing user comments and/or self-publication, etc.)
- Progressive web applications (PWAs)
- Platforms offering user profile customization and other personalization options
- (Micro)services (where only specific components, e.g. a check-out component of an e-commerce site, are developed with a framework; or the front end is composed of different highly specialized components built using different frameworks)
- Multichannel / omnichannel experiences (e.g. when the same database has to power both a website and, say, a physical digital display at a train station)
When approached and implemented the right way, a decoupled setup using Vue or React brings numerous advantages. If any of the following are of key importance to your company or product and you’re using Drupal, perhaps you should consider pairing it with either of the two in order to better respond to the needs of both your external and internal stakeholders.
Optimized performance is at the same time the number one benefit of a decoupled setup and the number one element of great digital experiences. With such a high focus on performance, it makes perfect sense for brands to opt for solutions improving it, especially when they concern any of the use cases listed above.
This has become an even more important consideration with the introduction of Google’s Core Web Vitals which better gauge the user experience of a website.Their metrics are based largely on performance, i.e. how fast the main content loads and how responsive a page is to user interaction.
React and in particular Vue are incredibly lightweight tools with small bundle sizes and consequently really fast loading times. For the cases where speed is the key priority, it even makes sense to make use of a static site generator such as React’s Gatsby, which promises to help you create “blazing fast” websites (and lives up to that promise).
One of the unique advantages of both React and Vue is their approach to state management; both leverage something called a “virtual DOM (document-object model)” to make page updates more efficiently, without the page needing to reload, which leads to significant performance gains.
This makes them incredibly useful for websites and applications with a lot of elements that change based on user input, e.g. ecommerce, where a page reload on each and every change would drastically hamper the customer experience. On the contrary, UIs built with React or Vue are both performant and responsive, contributing to a slick and pleasant customer flow.
An essential element of a good customer experience is personalization. While marketing personalization is achieved differently, e.g. with AI-based marketing automation, personalization of user customizable content is most easily achieved with a dedicated front-end framework.
Connecting Drupal with such a framework provides both a robust data/content repository as well as optimized capabilities for displaying the content in an elegant, user-friendly fashion. While personalizing the experience through Drupal’s themes is not impossible, it would be much harder and more cumbersome to achieve than with a slick front-end library/framework.
Both React and Vue facilitate greater ease and speed of development. Their component-based nature makes building and customizing user interfaces very straightforward and enjoyable, as it’s more akin to composing new shapes out of existing ones rather than having to construct everything from scratch (much like Drupal’s similarity to LEGO bricks, actually).
Because of this, it’s much easier to onboard new developers onto a project using React or Vue without them needing extensive prior familiarity with all of the project’s technical details - or with Drupal, for that matter. They’re able to quickly start working on their parts of the project which are later easily integrated into Drupal by back-end engineers specialized in building APIs.
Plus, we all know that a good experience leads to better outcomes, and software development (in particular when it comes to front-end frameworks) is a field where optimizations to developer experience are very often the driver of innovation.
After all, developers are the ones who ultimately work with a technology, benefit from how it streamlines their workflow, and translate that benefit into more effective results - hence a good developer experience directly correlates to better business outcomes.
The improved developer experience highlighted above also contributes to the scalability of React and Vue projects. As opposed to a more opinionated framework such as Angular, the ease of onboarding new teammates results in faster rollouts and significantly lower maintenance costs, both of which are essential to keeping a competitive edge.
From the technical perspective, it is again the component-based nature, along with both React and Vue being very lightweight tools, which is key to successfully scaling React/Vue projects. The combination allows for optimizing and innovating without bloating the code and thus hampering performance, while the Drupal integration ensures the back end is able to effectively scale as well.
Some integration specifics
As previously mentioned, both React and Vue are easily integrated with a Drupal back end thanks to their un-opinionated approach and progressive nature, as well as due to optimizations on the Drupal side that make such an integration as pain-free as possible.
You can either work with components embedded into a Drupal front end (partially/progressively decoupled) or create a single page application built with React/Vue which pulls data from Drupal (fully decoupled). If you need an extra fast and SEO-optimized application, you can even use server-side rendering with Gatsby/Next.js to work with static assets.
React vs. Vue
Due to React’s widespread popularity, it’s natural it has a much better community support, which allows for a frequent release cycle and thus a better response to community needs.
Vue’s documentation is thought to be one of the best out there, especially as front-end frameworks and libraries are concerned. In contrast, React has previously been criticized for poor documentation and is now more committed to improving that.
Both React and Vue are relatively straightforward to learn and work with. However, Vue is a bit more beginner-friendly due to its use of HTML over React’s JSX, meaning that even if your developers are less experienced, they can still quickly build advanced and performant interfaces with Vue.
Because of the above point, Vue is less well suited for large and/or complex applications and is more often used to power parts of an application rather than the whole app. For more complex cases, React is the more performant and more scalable choice.
Both technologies are also very lightweight, but Vue in particular has a reputation for focusing on small bundle sizes and consequently entailing an even better performance. This is also emphasized by the fact that Vue is more often used for smaller, encapsulated parts of a website or app, as we’ve just highlighted above.
Finally, when it comes to mobile app development, React definitely takes the cake thanks to its optimized React Native framework. You’re also able to develop mobile apps with Vue, but the process is less straightforward and can be done in a few different ways; either by using Vue Native along with a Capacitor, or by using NativeScript.
Decoupling with React
Here we’ll briefly describe a project we’ve recently worked on which involved a website for a distillery company that employed a partially decoupled setup with Drupal and React. React was used for all dynamic elements of the page; so, product listings, the user dashboard, and services such as add-to-cart buttons and forms.
Drupal’s JSON:API was key for this project. Drupal’s robust architecture allowed for easy integration with React; we were able to inject it on different ends without losing consistency. This well thought-out separation of concerns makes it easier for new developers to join and work on a project without extensive prior knowledge.
As for the front end, React was a much more suitable choice for the user dashboard than Drupal themes. Thanks to React’s component library of predefined components, it’s much easier to build an interface and handle state management. As a general rule of thumb - the more customizable an interface, the better to use React.
The product pages were also the perfect opportunity for using React - each product calls the API to check for options, and only afterwards an add-to-cart button is generated. Since the user is searching for data on another API, there was no need to use server-side rendering.
Decoupling with Vue
As mentioned previously in the article, Vue is very often used for dynamic parts of a page where frequently changing data is displayed, without those changes needing a page reload. Again, a partially decoupled approach is best here.
For the project in question, we developed a product finder allowing dynamic filtering of results with frequent changes. The product finder page had an upper main row of filtering categories, plus a side row of extra filtering options.
Drupal’s advanced data management system ensures that data is easily obtained and properly displayed, without needing custom code - it provides the fields and the product data, which Vue displays, enables data filtering and accesses a specific product based on user selection.
There were no major challenges with this implementation. One thing that we had to pay special attention to was meticulously building the filters and displaying them. The logic was a bit more complicated here, since it worked on the basis of AND / OR rather than OR / OR - an initial filtering is done with the upper row filters, which then only displays those additional filtering options in the side row which fit the one selected in the upper row.
Bonus: decoupling with Gatsby
In addition to using Drupal in combination with React and Vue, we’ve also recently worked on an interesting partially decoupled project involving Gatsby, the React-based SSR framework. It involved a searchable presentation page for a real estate agency to display estates online.
Gatsby uses GraphQL to scan the Drupal database on the back end and exposes data in a JSON object. The user-friendly interface allows developers to easily build GraphQL queries which they can then just copy and paste into a project and have the necessary data readily available.
There were two key challenges with this project. The first one was that part of the front end (i.e. the homepage and landing pages) had to be generated with Drupal Paragraphs, while Gatsby was used for the search and listing pages. Since both were hosted on the same domain, it was essential that they work well together.
The second challenge was the implementation of the search functionality. The initial plan was to obtain data via GraphQL and from there build a searchable database. The final solution instead involved building a custom Drupal endpoint that’s called via REST API and obtains data through that.
A huge plus for Gatsby, also highlighted by the developers working on the project, is its simplicity; its user friendliness makes for a great developer experience, and it’s easily integrated with any kind of content management system or framework.
As we’ve demonstrated, React and Vue are both excellent technologies to pair with Drupal and do so in the way which best suits the particular use case. A lot of companies using Drupal and wanting to enhance the digital experience they provide to their clients and customers are going or looking at going decoupled.