Drupal 8 Twig and Component Libraries Making Frontend

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 5 e 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”.

Why use a component library? ● ● ● Concurrent work Self documenting Updates are consistent Less time spent styling Less prone to visual regression Easier testability

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.

my_theme_name. info. yml Lorem ipsum dolor sit consectetur amet adipiscing donec

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 -beta 6. For Drupal 8. 3 or higher: Use UI Patterns 1. 0 -beta 7 or higher.

card. ui_patterns. yml

Thanks! Questions?