React on Drupal

In most cases, Drupal is a great package. You get a full web application with content management, admin/editor interface and a front-end. But in some cases, you need to break out from the monolithic structure it provides.

In this case, we had a existing Drupal 7 site that also needed to be supplied for mobile devices. So we decided to double the Drupal site as a RESTful API and then use a lightweight React web app for the mobile users. For this, we used the restful module.

Reasons to React

Modern JavaScript frameworks are in great fluctuation, it can be very confusing to pick the right one for your needs. VueJS, Angular, Meteor, Ember, Backbone or just plain web components/polymer are a few competitors here.

So the biggest argument we looked at was community. React is created, maintained and used by the worlds largest social network. There are myriads of third party modules and it is very lightweight (especially if you use preact).

Another good argument is ”react-native”. You can re-use a large portion of your source code and change it into a native app.

How does it work?

It is component based. Each component has its own state and can be passed parameters. A component has a set lifecycle defined by a small amount of callbacks.

React uses a virtual DOM where each component (node) is updated only when its state changes, so the whole DOM tree not be rebuilt. React has built in JSX parsing. JSX is a preprocessor which lets you write XML syntax in javascript. But it´s not required. Components are imported as modules by either import (ES6) or require.

A simple React Component.

Redux

Since each React component is only aware of its own state, global states like language or location is hard to share. For this we have Redux, which provides shared states and provide listeners for global state changes in a component. Alternatives are MobX and Flux.

The stack

Modern JavaScript development can be a bit tricky to setup. Especially since ES6 is not natively supported in all browsers and so on. So build tools and transpilers are needed.

As package manager we used Yarn. NPM works fine too, but yarn is a bit faster and utilizes lockfiles.

We used webpack 2 to bundle our JavaScript modules into one ”big” file. And Babel to transpile our ES6 code into commonJS.

For styling we imported SCSS files into each component and let a webpack loader transpile it into CSS loaded inside the JavaScript bundle. This way we can control exactly what CSS we use to avoid orphaned selectors.

Then we use Docker to host the API and the app locally. The app uses a Nginx server that does a proxy pass to the API. This way we avoid CORS issues.

My thoughts

Personally I loved working with React. It´s pretty easy to learn and I felt empowered fast.

Nesting component and passing data through parameters is a breeze and figuring out how to set states and using the lifecycle callbacks makes total sense.

The learning curve became a bit steeper when we introduced Redux for global states. But after some reading about actions, dispatchers and reducers it made sense.

Being encouraged into working with components also plays well with atomic design workflows.

One thing that can be a bit confusing is that it´s a very open framework that gives you freedom to work as you please. So a bit of refactoring was done during the development process.