An overview of Drupal front-end component integration methods

Since the release of Drupal 8, great strides have been made to develop a component-based theming workflow that takes advantage of the best that Twig has to offer and also plays nice with component libraries and design systems. Gone are the days of redundant styles and markup, making way for the efficiencies found when Drupal and tools like Pattern Lab or Storybook can share the exact same code. That said, handling the mapping of data between Drupal and your component library can still be quite complicated and difficult to coordinate on larger cross-functional teams.

This session will provide an overview of methods that can be used to provide data from Drupal to a front-end component that lives outside of the traditional Drupal templates directory, including:

* Mapping data via preprocessing
* Mapping data in twig templates
** Helper modules including Component Libraries, Twig Tweak, and Twig Field Value
** Popular component-based themes and starter kits
* UI Patterns and related supporting modules
* Pattern Kit
* Compony
* Single File Components

Finally, we’ll look ahead to how this process could evolve in future versions of Drupal.

At the end of this session, attendees will be able to:
* Develop a solution to map data from Drupal to components that live outside of the templates directory.
* Recognize the potential challenges related to front-end component integration in Drupal 8.
* Identify the component integration approach that works best for their team or project.

*Session Materials*