Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Decoupling Drupal: React & Vue

Parent Feed: 

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

React and Vue are JavaScript-based front-end libraries (technically, Vue is more often considered a framework) used to power advanced web applications. Produced and supported by Facebook, React is currently the dominant technology for building interactive user interfaces on the web, with React Native doing the same for mobile app development.

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.

Vue, sometimes called the “progressive JavaScript framework”, works on the basis of incremental adoption and can as such be used either as a library or a full-fledged framework. Because of this feature, it’s often used in combination with other technologies where a Vue component functions as a widget powering a specific part of the application/UI.

Vue was released in 2014 by Evan You, who wanted a less complex framework after working for Google with AngularJS. Despite only being on major version 3, Vue is just as well built and supported as React, which has catapulted it among the very top of the most popular JavaScript frameworks.

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.

Though JavaScript based, both React and Vue also offer support for TypeScript , a superset of JavaScript which has certain advantages over it, i.e. an improved developer experience and better quality code through stricter type checking.

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.

JavaScript in Drupal

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.

React was initially chosen as the front-end library of choice to pair with Drupal and leverage for its administration interface. This was then realized as part of the Admin UI & JavaScript Modernization initiative.

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.

One of Drupal’s current goals is becoming the number one decoupled CMS. This is the responsibility of the Decoupled Menus strategic initiative, which will enable more JavaScript/front-end developers to become part of the community and contribute to Drupal.

When and why use a React or Vue front end for your Drupal website?

Digitally architected outline of city

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.

Performance gains

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).

Interactiveness

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. 

Personalization

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.

Developer experience

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.

Scalability

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.

React and Vue are both based on JavaScript and thus handle data as JSON objects, so Drupal’s JSON:API is key here. Its well structured data management ensures there are no issues with displaying the data in the desired way.

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

React vs. Vue features comparison table

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.

Vue allows for easy creation of dynamic components, in which changes only affect the specific elements that undergo the change, and so can be made without reloading the page on each change (unlike JavaScript’s AJAX requests).

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.

Wrapping up

Abstract digital 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. 

All three technologies aim to remain at the cutting edge of development innovation, with Drupal now taking bigger steps into the front-end/JavaScript realm, which means none of them are likely to fall behind any time soon. On the contrary, we can expect to see even more exciting innovations that respond to the growing demands of digitally-savvy customers.

In case your project needs some extra development capacity, whether that’s in Drupal, React or Vue, get in touch with us and let’s talk more about your pains and how we can help you out.
 

Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web