No compromises – React, Relay and GraphQL on Drupal 8

Over the past months we've led a team of developers on a project for building a fully decoupled React application backed by Drupal. In this presentation, we want to share and talk about the technologies we used, approaches we applied and our learnings – in short: our whole experience.

This is not yet another “Decoupled Drupal” talk.

For solving the business requirements of our client we didn't settle for any compromises. We chose to bet on the full React, Relay and GraphQL ecosystem – wholesale.

The result is a fully accessible and spectacularly well performing, bleeding edge React based application that can be rendered on the server.

Let's go into some detail … 

The application embraces modern web and mobile technologies and is fully enhanced with Accelerated Mobile Pages (AMP) and Service Workers. We are using code chunking to bundle our application to ensure that the client browser only downloads what it actually needs for a particular route. Requirements for sub-sequent routes are resolves asynchronously. To enable web crawlers and clients without JavaScript, our Node server can render and deliver the entire application. This means that we can render the entire website before even loading the first bit of JavaScript.

For interacting with our Drupal data layer, we've built a full GraphQL schema, conforming to the Relay specification. On the client-side, we are using Relay to resolve data requirements for the entire application's component hierarchy on each individual route. The application is capable of handling multilingual content and interface strings.

In addition to sharing our approach using these technologies, we will also share some additional findings and tricks that we discovered during this journey.

For instance, in order to mitigate high load peaks on our server we can now simply pull a trigger and switch off server side rendering to reduce the load on the Node server.

We've also set up a lot of tooling to enable our developers. We've added thorough code linting and static type checking using Facebook's FlowType.

In order to allow our front end developers to work independently, we've also added a Node based GraphQL and Relay schema during development. This allows them to quickly implement features and iterate on the frontend code without having to wait for a Drupal developer to implement the corresponding model or schema in the backend. Our continuous integration & -delivery stack on Travis and Heroku together with our test coverage enables us to quickly iterate on our code base and still confidently deploy into our staging and production environments.

Attendees of this session will learn about the technologies we used and the way they interact with and complete each other. They will also learn about the strategies that we applied during this project. Both in the frontend and the backend.

This session is primarily targeted at experienced developers.