A presentation at DrupalCon Europe 2020 by Brian Perry
An Overview of Drupal Front-End Component Integration Methods Brian Perry Lead Front-End Developer Slides & Sandbox Repo: http://bit.ly/component-int
BRIAN PERRY • Lead Front End Dev at Bounteous • Rocking the Chicago suburbs • Lover of all things components… …and Nintendo d.o: brianperry twitter: bricomedy github: backlineint nintendo: wabrian brianperryinteractive.com 2
3
COMPONENTS!
COMPONENT BASED DEVELOPMENT What is it? • Creating modular and re-usable elements • Building a design system, not a series of pages • Can use a pattern library for documentation and prototyping • Tools like Pattern Lab and Storybook • Can help decouple front and back end development. 5
OUR EXAMPLE TWIG COMPONENT
7
{{ title }} {{ platform }} {{ year }} {{ image }} {{ body }} {{ link }} 8
9
10
COMPONENTS IN DRUPAL
WHERE DO MY COMPONENTS LIVE? For the sake of this talk… Standard Drupal Components Integrated Drupal Components • Live in the default template directory • • May not require any additional effort to get data to display Live somewhere other than the default templates directory • Require some additional effort to get data to display • For this talk, I don’t really care how your integrated components get into your theme. • Could live in your theme • Could be external dependency 12
STANDARD DRUPAL COMPONENTS May be right for your team or project. No shame necessary. • Build with Drupal (and only Drupal) in mind. • Take advantage of things that can be re-used in Drupal • Display modes • Blocks • Paragraphs • Layouts • Lose out on rapid prototyping advantages. 13
STANDARD DRUPAL COMPONENT {{ label }} {{ content.field_platform }} {{ content.field_image }} {{ content.field_year }} View mode: teaser {{ content.body }} {{ url }} 14
15
16
INTEGRATED DRUPAL COMPONENTS Building components that live outside of the traditional templates directory
COMPONENT LIBRARY / PATTERN LAB 18
COMPONENTS MODULE Creates Twig namespaces to access templates in non-standard locations 19
INTEGRATION APPROACHES Primarily fall into two categories Mapping Data In Code • Includes: Mapping Data In Admin UI • Includes: • Mapping in Twig templates • UI Patterns • Preprocessing • Layouts • More likely to get out of sync with Drupal UI • Less likely to disrupt Drupal functionality • More likely to break things like caching, Drupal functionality, etc. • Potentially not as flexible 20
INTEGRATING IN CODE {{ label }} {{ content.field_platform }} {{ content.field_image }} {{ content.field_year }} View mode: teaser {{ content.body }} {{ url }} 21
MAPPING IN TWIG PRESENTER TEMPLATE Drupal template references template in component library 22
DATA MAPPING IN PREPROCESS Map in preprocess… 23
DATA MAPPING IN PREPROCESS …and use simpler include in Twig presenter template 24
HELPER MODULES Simplify Twig Mapping Twig Field Value • Get Partial data from field render arrays • field_label • field_value • field_raw • field_target_entity • Map just the data you want • May require additional caching considerations… Twig Tweak • Helpful twig functions and filters • Render views, blocks, regions, fields, entities and so on. • Render image with specific image style • Extract tokens from context 25
STARTER KITS AND THEMES • Simplify set up and provide default tooling • Some provide default components and helper functions • Various levels of opinionated • Examples: • Emulsify • Gesso • Shila • Particle 26
EMULSIFY DESIGN SYSTEM EXAMPLE • Same presenter templates • Different component location • Different component library tool 27
28
29
MAPPING DATA IN THE ADMIN UI
UI PATTERNS MODULE Define and manage components in a way that Drupal understands • Define UI Patterns as Drupal Plugins • Configure data mappings in the UI • Optional Pattern Library page exposed in Drupal • Also allows Drupal to: • Preprocess patterns • Render patterns programmatically 31
{{ title }} {{ platform }} {{ image }} {{ year }} Pattern: container {{ body }} {{ link }} 32
33
34
35
UI PATTERNS VIEWS 36
37
LAYOUTS {{ region: title }} {{ region: platform }} {{ region: image }} {{ region: year }} Layout: container {{ region: body }} {{ region: link }} 38
LAYOUTS AND LAYOUT BUILDER 39
LAYOUTS AND LAYOUT BUILDER 40
LAYOUTS AND LAYOUT BUILDER Add ‘container’ section for teaser layout 41
COMPONENT BLOCKS Best of both worlds • Recently released (stable release, but early) • Exposes UI Patterns to Layout Builder • Sidesteps visual layout issues • Use any fields available to the entity, along with fixed inputs. 42
COMPONENT BLOCKS Add ‘container’ section for teaser layout 43
COMPONENT BLOCKS 44
COMPONENT BLOCKS 45
COMPONENT Not to be confused with ‘Components’… • Recently released • Another way to define a component via yml • Can derive block configuration • More focused on Decoupled use case (inspired by PDB) 46
47
RENDER COMPONENT AS COMPONENT BLOCK Settings passed as data attributes on wrapping div. 48
COMPONENT DEFINITION APPROACHES Manual Definition • Define component in code so that Drupal becomes aware of it. • Likely requires some amount of duplication between Drupal and component library Automatic Discovery • Drupal module automatically discovers components from component library and makes them available to Drupal. • Emerging/experimental concept. • • Dev modules, proceed with caution. Expects a particular convention and thus won’t work with all component libraries. 49
AUTOMATIC DISCOVERY
UI PATTERNS PATTERN LAB Automatically create UI Patterns from your pattern library… really. • End result same as previous UI Patterns Example • No redundant ui_patterns.yml file necessary • Some limitations • Requires yml or json file with pattern data • Requires specific approach to nested components. 51
PATTERNKIT Combines aspects of manual definition and automatic discovery • Requires creating schema definition file (which has potential applications outside of Drupal) • Automatically derives blocks from pattern library components • Supports a specific set of field types • Token support in D7 but not yet D8 52
PATTERNKIT PATTERN DISCOVERY 53
54
55
WINGSUIT Tool to build Twig UI Components with Storybook • Extended variants of UI Patterns • Generate components via cli • Use with zero config in Drupal with wingsuit_companion module • Wingsuit Kickstarter project available 56
PRE-PACKAGED COMPONENT SOLUTIONS
BOLT DESIGN SYSTEM Ready to use web-components • Full design system • Selectively require components. 58
COMPONY Component distribution system • Combines a theme, Gulp workflow and components. • Download existing components or create your own • Not Composer / NPM driven 59
SINGLE FILE COMPONENTS Drupal components with Vue style syntax • Use like any template • Automatically generates library definitions • Derive Blocks and Layouts with Annotations • Provides component library • Doesn’t really solve integration problem • Does help with distribution and re-use. 60
61
COMPONENT WORKFLOW Present and Future
CURRENT APPROACH(ES) Leveraging a mix of approaches • Integrated components in a custom theme • Majority of twig/sass/js inside Pattern Library instance. • Defining component mapping in Drupal UI for lightweight components • Preprocess for components with heavy logic • Created preprocess helper abstract class – hope to open source in future • Project specific helper functions • Limited mapping in twig templates • Build components compatible with Layout Builder • Custom block types with limited use of Paragraphs 63
SO… WHAT SHOULD I DO? Start by mapping in code. • Most battle tested approach • Chose an approach based on team makeup • FE focused – Twig mapping • BE savvy – Preprocess • Consider other methods as experience grows 64
DREAM WORKFLOW Basically React (or insert the name of your favorite JS framework here) • Build fully packaged distributable components • Easily install them • npm install cool-component / composer require drupal/cool-component • Import them in code • import ‘CoolComponent’ from ‘cool-component’; / {% include ‘@components/cool-component.twig’ %} • Use them as I see fit • <CoolComponent /> 65
HOW DO WE GET THERE? Have a lot of the pieces, but need a little extra ‘magic’ • Make it easier to package, distribute and use individual components • Track evolution of Web Components • Improve UI based component configuration process in Drupal • With specific focus on Layout Builder. • Component Blocks seems to bridge this gap well • Evolve approaches allowing Drupal to automatically discover components • Keep building amazing looking component based sites using Drupal 66
Thanks to the many Drupal component ecosystem contributors!
68
69
Q&A Brian Perry Lead Front End Developer Email: brian.perry@bounteous.com
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:
Finally, we’ll look ahead to how this process could evolve beyond Drupal 8.
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.