Wiring Drupal to Pattern Lab

Human sacrifice, dogs and cats living together...mass hysteria!
Dr. Peter Venkman – Ghostbusters

Let's forget about human sacrifice, substitute "front-end" and "back-end" in for "dogs" and "cats" and re-work the famous Ghostbusters quote to read:

Front-end and back-end living together...mass unity!

This is the outcome when our front-end team creates and shows off components to the client in Pattern Lab, and the back-end team wires up Drupal to use those Pattern Lab components. The component code – twig, css and javascript – lives and is canonical in Pattern Lab. Drupal includes and passes all the data needed to properly render the components, in our case as Layout Builder blocks. Tweaks to the components are done in Pattern Lab, so the front-end team doesn't really even need to know that it's Drupal doing the rendering.

This session brings together two devs – one front-end, one back-end – to describe the project set-up and to explain how we share the work. We'll show how Drupal is wired up to Pattern Lab in our theme directory structure, we'll use a few code snippets to show where the magic happens, and we'll discuss the pros and cons of combining Pattern Lab and Drupal.