Using Component Libraries to Manage UI Components Seamlessly

man and woman solving brain puzzle

Splitting a webpage into several component units that can be manipulated programmatically is a valuable resource for a developer who loves to reuse their components on multiple pages. Suppose you employ a third-party tool such as Storybook to render the front end. Each time a code change happens in one of your modules at the backend Drupal implementation, you may have to tinker with the frontend code separately or would see it breaking. 

That is when component libraries come to the rescue. 

Lullabot, a mainstream Drupal company, has published a detailed tech post on component libraries. The post begins with their interpretation of what a component is. Mateu Aguiló Bosch, the post’s author classifies a Drupal component as a combination of a twig template, Metadata describing the input data the template accepts, optional JavaScript and optional styles. 

Then the post differentiates a component from a block plugin used for progressive decoupling approaches. It then talks about the limitations of the Components module and progresses to talk about CL Components, a Drupal project that Lullabot developed. 

Moving away from emulating Drupal in the component space, where a single code change can cause faulty rendering on the client-side, Bosch writes about using CL Components to couple Drupal with Storybook, a react application. Here, the rendering is done by Drupal, and it supplies an Html page that Storybook can use as-is, shredding down unwanted elements. 

Read the blogpost here: Component Libraries in Drupal | Lullabot

Advertisement Here