Componentizing Drupal front end using

Pattern Lab
Componentization has become a growing consideration in most of the web application
development firms. The reasons are obvious, instead of reinventing the wheels again and again,
why don’t we re-use them. This article will help you to understand the importance of
componentizing your Drupal front end and how you can achieve that using Pattern Lab.

So what is Componentization?
In front end perspective, components are a collection of HTML, CSS and JS that combines
together to form a display element and Component-Driven Development (CDD), a development
methodology by which the web pages are build from the bottom up. 'Componentization' is the
process of breaking things down into small and easily identifiable pieces, a practice used by
developers and designers alike to solve complex problems.

Why you should follow component driven front end development

approach?

1. Allows for re-use of Components

2. A component-based UI approach accelerates development
3. You can completely decouple the front end development
4. Testing becomes easier
5. Parallelize development
6. Flexible project workflow

How to use component driven front end development approach In

Drupal?
One of the most popular tool for component driven front end development is Pattern Lab. What
makes Pattern Lab so famous is its flexibility in pairing up with the Atomic Design methodology.
Addition of twig templating system in Drupal makes it easier for us to integrate Pattern Lab with
Drupal. Although many starter kits for Pattern Lab with Drupal 8 are available, I personally find
Emulsify the most useful one. Emulsify is a starter kit for Pattern Lab based theming created by
Fourkitchens.
Integrating Emulsify with Drupal
Let me explain how you can use Emulsify for componentizing your Drupal front end development.
Emulsify is a Drupal 8 starter kit theme, which means we install Emulsify and tweak it to meet our
needs rather than creating a subtheme out of it.

Before installing Emulsify, there are certain prerequisites which needs to be met:

1. Node
2. Gulp
3. Composer
4. Components Module:

Installing Emulsify:

1. Emulsify can either be installed using composer or you can directly download Emulsify and
place it in your themes directory.
For installation using composer: composer require fourkitchens/Emulsify.
2. You can rename the downloaded Emulsify theme to suit your project if needed.
3. Run Composer Install from your Emulsify theme
4. Move the Unified Twig Extension module from ‘themes/emulsify/vendor//drupal-pattern-
lab/unified-twig-extensions’ to modules/unified-twig-extensions.
5. Enable the Emulsify theme, unified-twig-extensions and components module.
6. Run ‘npm install’ from the Emulsify theme directory
 7. Run ‘composer install’ from the Emulsify theme directory

You will now have a working theme based on Pattern Lab.

Now, Let’s create a simple component in Emulsify

Step 1: Run npm start from terminal

Your terminal screen would look like this

A Pattern Lab instance will be created. Access URL’s are displayed in the screen. This process
would take care all of the tasks like compiling the sass to CSS and updating the living style guide.
Your Pattern Lab instance would look as below.
Step2: Create Component

Certain components are built within Emulsify by default. Let's create a view that will display article
teasers. We will be using the card component which is in the Emulsify theme.

Step 2.1 Create a view which displays the article teasers

Step 2.2 Override node template for article teaser view mode.
Here we are including the molecule 01-card.twig.

Step 2.3 Override the view template for our articles-list view
Here we are extending the card-grid organism for the necessary wrapper div.

Now clear the cache and view the article list view page. You will be able to see a nice gird card with
the contents you added for the article.

So now you know how to isolate front end workflow in Drupal using Pattern Lab. If you have any
suggestions or queries please comment down let me try to answer.