How we rebuilt the Umami theme with components using Drupal only

Speaker(s)
thamas
Mathieu Spillebeen
Experience level
Intermediate
Duration
50 min

The current practice of front-end development is based on the concept of components. If you check a modern front-end toolset (like React, Vue, Svelte, Pattern Labe etc) you see that they certify this.

If you wanted to follow this concept while building the front-end for a Drupal site, you had to integrate one of the above tools or a similar one. You had to decouple, or you had to add a lot of third party elements to your theme increasing the complexity of it!

But there is a new way forward which has been named "Compony", and it has now grown into an open-source project built by and specifically for the Drupal front-end community.

Compony transforms a Drupal-theme into a structure where everything becomes a component without using any third-party tool! This will allow us to think, work and scale our themes in a component-approach*.

To show the benefits (and of-course the difficulties too) of this solution, we rebuilt the theme of Drupal core's Umami demo installation profile using Compony.

During this session, we show you the steps of the process, highlight the main differences to classic theming, compare the result with the core theme and talk about the possibilities.

*A more detailed description of what Compony is can be found here: https://www.compony.io/blog/what-compony

Learning Objectives

At the end of this session, attendees will be able to resolve problems they facing while developing independent Drupal front-end components for a Drupal theme. They will be prepared for the difficulties and benefits of creating a component-based Drupal theme. They will be able to use the open-sourced toolset made specifically for Drupal themers.

Target Audience

This session is for those who work with Drupal's theming layer. So both Full-stack Drupal developers and front-end Drupal developers.

Prerequisites

Attendees will get the most out of this session if they have a basic understanding of Drupal theming.

To understand the background of this presentation in a wider context it is also recommended to attend The future of Drupal theming session.