DRY Twig approach

Welcome to the fourth episode in our video series for Emulsify 2.x. Emulsify 2.x is a new release that embodies our commitment to component-driven design within Drupal. We’ve added Composer and Drush support, as well as open-source Twig functions and many other changes to increase ease-of-use.

In this video, we’re going to teach you how to best use a DRY Twig approach when working in Emulsify. This blog post accompanies a tutorial video, embedded at the end of this post.

DRYing out your Twigs

Although we’ve been using a DRY Twig approach in Emulsify since before the 2.x release, it’s a topic worth addressing because it is unique to Emulsify and provides great benefit to you workflow. After all, what drew you to component-driven development in the first place? Making things DRY of course!

In component-driven development, we build components once and reuse them together in different combination—like playing with Lego. In Emulsify, we use Sass mixins and BEM-style CSS to make our CSS as reusable and isolated as possible. DRY Twig simply extends these same benefits to the HTML itself. Let’s look at an example:

Non-DRY Twig:

<h2 class=”title”>
<a class=”title__link” href=”/”>Link Text</a>
</h2>

DRY Twig:

<h2 class=”title”>
{% include "@atoms/01-links/link/link.twig" with {
"link_content": “Link Text”,
"link_url": “/”,
"link_class": “title__link”,
} %}
</h2>

The code with DRY Twig is more verbose, but by switching to this method, we’ve now removed a point of failure in our HTML. We’re not repeating the same HTML everywhere! We write that HTML once and reuse it everywhere it is needed.

The concept is simple, and it is found everywhere in the components directory that ships in Emulsify. HTML gets written mostly as atoms and is simply reused in larger components using the default include, extends or embed functions built into Twig. We challenge you to try this in a project, and see what you think.

Thanks for following our Emulsify 2.x tutorials. Miss a post? Read the full series:

• Part 1: Installing Emulsify
• Part 2: Creating your Emulsify 2.0 Starter Kit with Drush
• Part 3: BEM Twig function
• Part 4: DRY Twig approach
• Part 5: Building a full site header in Drupal

Watch all the videos on our YouTube channel.

Download Emulsify.