From UberEats to Salesforce, JavaScript frameworks like React are powering some of the world's best-known brands. React was built in 2011 by Facebook and turned open-source in 2013, so it has been around for a while. But in recent years this fast, friendly and robust framework is being used more and more with it’s particularly powerful benefits for user interfaces.
Heading towards 2022, both B2B and B2C brands are finding that React is one of the best front-end fits for them - and it’s been having the same effect for some of our clients too. We work predominantly with the Drupal CMS, so in this blog we're going to showcase the ways React, or lighter weight frameworks like Vue.js, can work alongside Drupal to deliver success.
First of all, what are modern JavaScript frameworks like React and Vue.js?
React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It's used for handling the view layer for web and mobile apps and also allows us to create reusable UI components.
Very similar to React, Vue.js is also an open source front-end JavaScript framework.
While React takes the top spot on being the most popular and being a good match for larger scale projects, each has their own use cases. We generally prefer using React, however, for less complex requirements we opt for using the lighter weight Vue.js for its ease of integration.
How do React and Vue.js work with Drupal?
Where React/Vue.js are JavaScript frameworks set up for building effective front-ends, Drupal is an open-source Content Management System (CMS) built with APIs and integrations at the core. It can therefore help you build the versatile, structured content in the back-end that dynamic web experiences need. And by using them together, Drupal for the back-end and React/Vue.js for the front-end, you’ll get the best of both worlds.
Take a look at our favourite use cases of them working together…
1. React Commerce - Edrington
We’ve been the digital partners for Edrington Distillers since 2018, whose platform provides global brand and product governance across their multiple drinks brands; Famous Grouse, The Macallan, Highland Park, The Glenrothes and more. With a global online shopping outfit across multiple brands and regions, their customers eCommerce experience spans product listings and specific product pages, to shopping cart management and then a fully-fledged on-site checkout. To support them across the full shopping journey, Edrington uses React alongside a commerce provider for their brands The Macallan and Famous Grouse.
The Macallan onsite checkout process
React was selected as the solution due to the circumstances surrounding the project. We had a very API-driven brief and access to the developers building the API so this seemed like a very strong use-case for JS front-end applications, and React was at the top of our list.
Working with commerce providers such as Shopify or BigCommerce in React involves leveraging any API provided, which can be done in many different ways. It allows the freedom to retrieve all the relevant data and apply it to the front-end however it is desired. React can be used with a Commerce provider across product listings, shopping cart management and checkout sections to provide the best user experience for any given shop/brand.
Reusable components are the bread & butter of React, and can be leveraged for commerce functionality in many ways. The most impactful components we found were related to forms for the on-site checkout, where address forms appear multiple times (shipping, billing, saved addresses). React also allows for both in-page enhancements as well as a fully fledged SPA (Single Page App) experience - for example, the mini-cart present on all site pages as a standalone widget, but the checkout pages are treated as an SPA. This flexibility within a single framework helps keep consistency of the commerce experience and interfaces, as well as the code behind it.
When it comes to Drupal, currently our React implementations sit on top of the Drupal front-end layer and we use custom Drupal configuration forms to control settings around the React code, such as feature toggles (i.e a checkbox to enable Google Pay). There is potential improvement here though which we’ll be looking to explore.
2. Vue.js - RAF Benevolent Fund
We have been working for the past 18 months on building a new website for the RAF Benevolent Fund, from initial user research and journey mapping, to a new design and build - and it’s just gone live! It’s been an end-to-end project aiming to drive more online donations and provide a comprehensive audience-focused website that can better support people to navigate the charity’s services.
One of the main features of the new RAF Benevolent Fund site is the Support Finder - a multi-step question and answer tool designed to help users navigate to content most relevant to their support needs. The solution we utilised here was the Vue.js library, alongside a series of ‘custom Drupal blocks’ and a custom module in order to deliver behaviour.
RAF Benevolent Fund’s onsite Support Finder
Vue.js is an open-source front-end JavaScript framework and is primarily used for building web interfaces and one-page applications, so was the perfect fit for this use-case. It’s other benefits include:
- Integrating with other frameworks such as React allowing for greater customisations across projects
- Good documentation - there’s a lot of best practice guidance and is actually considered one of the most detailed documentations available for this language
- Being user-friendly and accessible - it’s widely known across Front End developers to be easy to learn as it’s lightweight and versatile
- Providing support - there is a large contributing community across Vue.js helping with support problems and regular updated information
Being user friendly, this combination of the Drupal back-end with the Vue.js library gave site editors full control over the questions and result routes on the tool. The questions and answers form a tree-like structure, with follow-on questions and answers able to be nested under one other. Drupal’s native menu system was adapted to allow editors to easily create this nested structure, and utilising its drag and drop UI, provided a clear and simple interface managing question and answer content.
The Q&A content was made available as a REST API, and consumed as part of a lightweight Vue.js front-end. This allows users to seamlessly navigate between different questions and answers in a highly performant way, whilst also utilising the in-build animation capabilities of Vue.js to provide a more modern reactive ‘app-like’ experience.
As you can see, React and Vue.js can be used across multiple tools and functionality to bring harmony and higher innovation to Drupal front-ends. With more and more use cases out there, API-first driven websites using modern JavaScript frameworks for the front-end are about to become the norm.
