An overview of Drupal 8 front-end component integration methods: Decoupled edition

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 first provide a brief 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 modulesSecondly, we’ll apply some of those concepts to Decoupled Drupal projects and review approaches to providing data from Drupal to applications outside of Drupal’s control. We’ll look at approaches supported by the following modules:* The JSON:API Ecosystem* GraphQL* Decoupled Blocks* Decoupled Pages