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

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

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

4. The Hero
Utilizing the Components Library and UI Patterns!

5. 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!

6. Component Libraries - The Good and the Bad

7. 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 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.

8. 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!

9. 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.

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

11. Components Module
You can get the module at
It add a simple functionality; you can define new Twig namespaces that Drupal is aware of.

12. 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.

13. card.twig

14. node--event--card.html.twig

15. 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.

16. Bonus Round!

17. UI Patterns Module

18. 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.

19. card.ui_patterns.yml

20. 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.

21. Thanks!
Questions?