Decoupled Drupal Technologies and Techniques

Part 3 in this series is continued from a previous post, Decoupled Drupal: A 10,000ft View.

One of the main considerations when building the POWDR website was uniformity. POWDR is a holding company composed of many separate companies, all with individual websites. In order to ease the burden on content admins, we sought a solution that avoided multiple content types for each separate site. As a holding company with so many websites to maintain, managing many content types can become really complicated really quickly. It was our job to keep the content admins at top of mind in order to make their job updating the various websites as easy as possible.

Drupal Multisite for Easier Administration

The reason we ended up going with a multisite is that for each POWDR property there is a separate Drupal instance. In typical ski industry form, POWDR continues to acquire additional resorts and companies. They are constantly bringing on companies with different processes, different applications, and different third-party vendors. Many have different teams acting as admin. So, one of our first considerations was how people on the main POWDR team were going to administrate and edit all of this content.

We considered doing it all in one large API site though that plan quickly became too complicated when it came to permissions. Instead, it was decided that the project would be split up into multiple sites. Acquia made this process nice and easy. Using Acquia and Drupal 8, we were able to spin up a new multisite instance within the parent Drupal instance.

After some practice, we are now able to spin up a new instance in a matter of minutes. Using Drupal 8 and configuration, we copy the configuration from a parent skeleton site into a new site This allows the design team to start their development process with a basis on the API side without us having to reprogram and rebuild from the ground up.

Paragraphs Makes Complex Content Manageable

Working with Hoorooh Digital, we created an overarching entity structure using paragraphs that allowed us to make a baseline unit to build upon. Each paragraph was essentially a different piece of the website. They made components within Angular line up with paragraphs on the Drupal side. If you’re not familiar with paragraphs, in Drupal 8, their entities in and of themselves. This was nice for us because it allowed us to load and alter them programmatically, much like any other entity on the backend. They could be rearranged and served to the frontend from any site to meet design needs.

Implementation was one of the larger challenges of the POWDR project. The difficulty arose as we matched up the frontend to the Drupal backend. Custom code was required to ingest the paragraphs in the components. If you’re thinking about taking on this project, be sure to consider this step during the estimation process. In our experience, a good portion of the frontend development was required to render frontend components. We took the time to decide how componentry and paragraphs would be ingested from the Drupal platform, then matched up with the frontend framework. This allowed us to standardize all of the content coming out of the API so that frontends wouldn’t have to be rewritten for every site.

D8 and JSON REST API Decrease Development Time

The real power here was that, out-of-the-box, Drupal 8 does have a JSON REST API. We took that and ran with it. We realized early on that the Angular frontend and the out-of-the-box JSON API were going to require a lot of work to get them to work together. Instead of sacrificing this time, we extended the JSON encoder class in Drupal 8 and created our own POWDR format JSON encoder. This allowed us to create a serializer service and a bunch of custom entity normalizers. We then added related entities and some custom processing to meet the frontend needs. Out-of-the-box, the JSON API is built so that you’re requesting each related entity down the line. You get an entity ID and then you make another call to the API to get the content of that entity.

Essentially, what we did by extending the JSON encoder and all the entity normalizers was create an entity reference class. By using this structure we were able to load related entities, such as paragraphs and media, all on the same parent node, enabling the JSON encoder and all the entity normalizers to load the related entities and be served up as pieces on the API call. This gave POWDR the ability to create pages in much of the same structure that they’d be using on the frontend. The content admin sees a structure similar to the frontend and their API calls. POWDR is building pages on the backend in much the same way that they’re coming out on the frontend. This saves a lot of these extra extraneous API calls.

One of the great things about Drupal 8 is that it is built on Symfony, and incorporates a lot of modern PHP concepts, which helped our development of this custom API move quickly. Using Drupal 6/7, we would have to build from the ground up then figure out how the API was going to call itself. Instead, we just extended the class, extended a few other classes and, in a matter of days, had at least a working model for the design team to work from.

Overall, development was much faster for this project. Since everything was an entity point the back end API could load taxonomies, media, paragraphs in the same way and they also looked the same. This meant the design team could be presented something that is agnostic to the backend functionality but still utilizes Drupal’s media power.

To Be Continued...

In the next post of this series our hosting Partner, Acquia will cover the ins and outs of the POWDR project’s frontend design. Stay tuned!