Headless applications with Drupal and React in 2020
Last year we launched more than 20 new webprojects based on Drupal 8 and/or React. Most of the projects have one thing in common: they combine standard Drupal server-side rendering with client side React applications. This is what is sometimes referred to as progressive decoupling. Only a few applications we have built in 2019 are completely headless.
The reason is that in most cases the optimal choice of technologies was
- to use React, where the UI experience could not be achieved equally well with Drupal only,
- and to use standard Drupal, where there was little benefit of using a decoupled solution.
For us the main advantage of using React is that we can build far more engaging user interfaces. The most obvious reason is that you do not have full page reloads, which gives end users a much better perceived performance. We like to call this UI snappyness or app feeling.
If you compare standard server side rendering using a CMS system with a headless application you can observe the following things:
- Building a website with a CMS is relatively easy, because the technology is so mature (Drupal was first launched in the year 2000!), and most of the functionality you could ever want is already included.
- Building a completely headless website is more complex, because you have to implement many things yourself, or assemble them from an extremely fast growing and changing ecosystem (checkout the NPM packages for React and the number of weekly installs!).
Therefore we believe the sweet spot of decoupling somewhere between going fully headless and using standard CMS technology. The following image illustrates this sweet-spot.
Building a website with CMS technology has limited complexity, but does not provide the best possible user interface (UI). Building a fully headless website (also referred to a single page application - SPA) provides the best UI experience but comes at high cost.
For us the sweet spot is using client side apps for some parts of the website, and to leave the rest to the server based application.
This approach provides almost the same UI experience, but at a much lower cost.
Please note, that we distinguish between user experience (UX) and user interface (UI) experience. The experience for a user can also be great with a server side application and become clunky with a client side application. But nonetheless you can build better user interfaces with client side applications.
Let's look at a couple of solutions we built last year:
We built a fully headless commerce solution with React that uses SAP Commerce Cloud (formerly known as SAP Hybris or hybris) as backend and integrates with Drupal for content management. In this project we chose to built the application fully headless, because the application driver is Commerce Cloud. Commerce Cloud does not come with a frontent that was meeting the requirements of the client. The content in this application is provided by Drupal. As soon as the project is out of private beta we will publish a case study about it.
Another exciting application from last year is the solution for Eldum Rétt built with Drupal Commerce. This project is a nice example of using both standard server-side rendering in combination with client side apps for parts of the website. Examples of such parts are the user interfaces for the shopping cart or for complex order customisations. As part of the project we also built a React Native app to bring recurring and interactive functionality to the users' Android and IOs devices. You can read the case study here. With this website we won the International Splash Awards for the best commerce solution with Drupal in 2019.
Another project that we are very proud of is Senec, that won the International Splash Awards 2019 in the category corporate websites. The project was chosen because of the optimal selection of technologies for the purpose of the website. Parts of the websites were built as React apps to create the best possible user experience. The most noticeable is a complex application process, that could not have been easily built with Drupal only. Here you can read the the case study about this project.
In other projects we have built decoupled searches with ReactiveSearch, integrated with third-party solutions using React, and replaced user facing Drupal views with client side React applications. A good example for this is Bodensee Schiffsbetriebe. On this page you find a number of React apps: the ticket search, the full page search, and the tour search. The tour search could have also been built with Drupal views, but since we had the other searches in place it was a small step to also replace views with React apps.
Building websites like this has worked out really well for us at 1xINTERNET, and we will continue using this approach in 2020.
If you need help with deciding which approach to use, or wants a second opinion, just reach out.