Training: Component-Based Development with Drupal

What you can expect from this course

Best practices and standards are at the core of this course. This means you will be exposed to the latest trends, processes, and tools used on today's web development to build responsive, accessible, and component-driven Drupal websites.

Learning Objectives:
After completing this course you’ll come away with knowledge of:
● 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

Prerequisites:
Students will get the most out of this training if they have the following:
● the Latest Docker and DDEV; good understanding of Drupal's terminology such as modules, node, twig, templates, views, and others;
● familiarity with running commands in a command-line tool is required, basic understanding of Twig's syntax;
● good understanding of HTML and CSS;
● site building skills;
● a text editor of their choice.

Target Audience:
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. This is hands-on training and coding experience is required to follow along with exercises.

Syllabus

Building components in the front end
● Principles of Atomic Design
● Using Pattern Lab and Twig to build flexible and reusable components
● Using front-end tools such as gulp, node, npm and others
● Writing semantic and accessible markup in components
● Accounting for Drupal-specific requirements when building components
● Twig's include, extends, embed, and Twig Blocks to nest and reuse components
● Styling components to achieve responsive design
● Creating components variants to leverage previously-built components and avoid duplicate code

Building Drupal’s back-end infrastructure for components
● Build Drupal content types, paragraph types, views, and view modes
● Using media to improve management of content assets
● Planning and creating image styles and responsive image styles
● Manage images for improved performance
● Using entity references

Integrating components with Drupal
● Theme/Twig debugging
● Working with and creating Twig template suggestions
● Working with Drupal's content arrays to get the field's values in a best-practices manner
● Using modules such as Twig_field_value or Twig_tweak to improve rendering of content
● Integrating components with Drupal using Twig presenter templates
● Working with Drupal attributes, title_prefix, and title_suffix
● Leveraging Drupal's view modes to enhance components integrations
● Planning, building and using Image Styles and Responsive Image Styles