Drupal 8: Twig and Component Libraries Making Frontend developer lives’ better.

Justin Langley Senior Developer at Code Koalas. Drupal ⅞ sites. I could talk with you about D&D 5e for 8 hours straight.

The Problem Front end developer waiting on the back end architect.

The Hero Utilizing the Components Library and UI Patterns!

Component Libraries A “component library” is essentially a repository of reusable pieces of HTML. In Drupal 8, these are just small Twig templates. With a component library you have a self documenting repository of all the design elements on your site. You can break a design down into “components” and then after implementing those components; you are nearly done styling your entire site. And then in the future, when adding new content types/views/blocks to your site you can reuse these components. Or even create new components! No need to apply a entirely new suite of styles for particular pages, you can simply reuse what you already made!

Component Libraries - The Good and the Bad

Component Libraries - The Good Defined set of components reusable throughout the site. Styles and javascript are co-located with components - makes it easy for new developer to find code. CSS styles are loaded on a component-based need; no more 10000+ line CSS file that gets loaded for every page. Changing/updating components easily applies changes across the entire site; notice the background color of the Card is wrong? Update the component itself and all pages using it get the changes.

Component Libraries - The Bad Takes more time at the beginning of the project to define the “components” from designs; some are easier than others. Requires time for a developer to learn/understand. If the component architecture is not clearly defined it can become a “time suck”. Some of the “cons” of component libraries aren’t necessarily tied to the actual implementation of the component library; more or less tied to the idea of doing something new/different. New structures/libraries/technology always requires time to use effectively, think of it like a time-based deposit with huge returns!

Why use a component library? Concurrent work Self documenting Updates are consistent Less time spent styling Less prone to visual regression Easier testability An example of a Drupalism a front-end developer might benefit from know is regarding images: in their component they can simply expect an image “element” and render it. They won’t need to map values for image URLs, image alts, etc etc.

The module that makes this all possible! Components The module that makes this all possible!

Components Module You can get the module at https://www.drupal.org/project/components It add a simple functionality; you can define new Twig namespaces that Drupal is aware of.

Lorem ipsum dolor sit consectetur amet adipiscing donec my_theme_name.info.yml Lorem ipsum dolor sit consectetur amet adipiscing donec Inside the theme *.info.yml file is where you can define the directories where Drupal is aware of *.twig files. This is powerful because you use any directory structure you want inside your theme.

card.twig

node--event--card.html.twig

Drupal Templates as “Data Mappers” The principle is to treat Drupal entity templates as a data repository which you then map to values in a component. This helps separate the “logic” from the “display” of an entity.

Bonus Round!

UI Patterns Module

UI Patterns with Components From the module page: “Define and expose self-contained UI patterns as Drupal plugins and use them seamlessly as drop-in templates for panels, field groups, views, Display Suite field templates, paragraphs, nodes or any other entity types. The module generates a pattern library page to be used as documentation for content editors or as a showcase for business and clients.” For Drupal 8.2 or lower: Use UI Patterns 1.0-beta6. For Drupal 8.3 or higher: Use UI Patterns 1.0-beta7 or higher.

card.ui_patterns.yml

Here is an example of the patterns page with some patterns I created Here is an example of the patterns page with some patterns I created. Obviously a little styling was added.

Thanks! Questions?