An overview of Drupal 8 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 beyond Drupal 8.