Advanced techniques for components integration with Drupal (morning)

Drupal Camp Asheville 2024 - July 12th-14th

Room
Other
Start Time

Topics

Presenter(s)

Mario Hernandez
of
Mediacurrent

Mario is the Head of Learning at Mediacurrent with over 10 years of public speaking and training experience. He is a regular speaker and trainer at tech conferences including Drupal Camps in Los Angeles, San Diego, San Francisco, Washington DC, and others.  Mario is a co-host of the Mediacurrent podcast where guest speakers discuss open source solutions.

In addition to being the Head of Learning, Mario is a Senior Front-End Developer working on some of the world’s most popular brands. Mario has vast experience in all things Front End as well as Drupal.  He developed the very successful Component-Based Development training workshop which has been conducted at DrupalCons throughout America and Europe. Mario's strengths are training clients and their development teams through custom-tailored curriculums.

Mario Hernandez Head Shot

Training Description

Component-integration with a Drupal website is one of the most difficult process to grasp when developing with the component-based approach.  There are so many scenarios for how values from Drupal fields should be retrieved.  Drupal doesn't make things easier either since in most cases Drupal will not render just the value of a field but instead provides a full array for a field.  In addition, retrieving field values from Drupal may require multiple Twig templates and these also vary depending on the entity type you are working with (i.e. blocks, views, nodes, paragraph types, media, etc.).  You will be surprised to learn that sometimes the problem with integrations may be the result of how components are built.

Topics we will cover:

  • In this workshop we will get to the bottom of component integrations.
  • We will cover how to build components in your design system (i.e. Pattern Lab), with Drupal in mind.
  • We will review how to account for Drupal attributes, title_prefix, and title_suffix in your components.  Also we will cover what all of this means in general on a drupal website.
  • We will explain how to properly break down components based on how Drupal handles the equivalent of the components we are building.
  • We will make heavy use of View Modes which help Drupal do the heavy lifting for managing fields and how to render them.
  • We will use the twig_field_value and twig_tweak modules to properly rendering fields as well as debugging Drupal's render arrays. 
  • Finally, not properly rendering fields in Drupal can lead to caching issues.  We will cover how to ensure we are rendering fields the way Drupal expects it and therefore avoiding caching issues.

Who is your ideal audience member, the person who would get the most out of your training?

This training is primarily for front- and back-end developers who wish to learn how to build Drupal websites using the component-based approach, or who have already had some experience with components in a Drupal website.

What do you expect people to be able to take away from your training?

  • Building flexible and scalable components using Twig and Pattern Lab
  • Best practices for Drupal theming and development
  • Drupal’s content array and how to preserve caching
  • Debugging a theme to obtain fields and variables information
  • Working with Twig template suggestions
  • How to integrate front-end components with Drupal
  • Best practices for using Twig’s include, embed, and twig blocks
  • Working and planning for Drupal attributes
  • Building reusable components

How much and what kind of technical knowledge do people need going in to your training?

Good understanding of Drupal's ecosystem is required to follow along with the training.  Beginner to intermediate front-end or back-end development experience is useful.

Other requirements:

  • A running Drupal 9 website will be required (If not using Mediacurrent's training environment, ensure your website is up and running)
  • This is a hands-on training and coding experience is required to follow along with exercises.
  • A code editor of your choice
  • Enable the following components:
  • Enable twig debugging (disable cache)