An overview of front-end component integration methods in Drupal 8
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.
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.
Brian Perry
Lead Front End Developer at Bounteous
Brian is a versatile developer with experience building complex, interactive web applications in support of large-scale localized sites. Recently he has focused his efforts on evolving Drupal front-end development practices, decoupled Drupal, and style guide development techniques and has spoken on the topic at various Drupal events. Brian is a Drupal 7 and Drupal 8 Acquia Certified Grand Master and loves all things Nintendo.
https://www.fldrupal.camp/sessions/design-theming-front-end-development/overview-front-end-component-integration-methods
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.
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.
Brian Perry
Lead Front End Developer at Bounteous
Brian is a versatile developer with experience building complex, interactive web applications in support of large-scale localized sites. Recently he has focused his efforts on evolving Drupal front-end development practices, decoupled Drupal, and style guide development techniques and has spoken on the topic at various Drupal events. Brian is a Drupal 7 and Drupal 8 Acquia Certified Grand Master and loves all things Nintendo.
https://www.fldrupal.camp/sessions/design-theming-front-end-development/overview-front-end-component-integration-methods