AN OVERVIEW OF FRONT END COMPONENT INTEGRATION METHODS: DECOUPLED EDITION Brian Perry Decoupled Days – July 23, 2020 http://bit.ly/component-int-dd

BRIAN PERRY • Lead Front End Dev at Bounteous • Rocking the Chicago ‘burbs • Lover of all things components… …and Nintendo d.o: brianperry twitter: bricomedy github: backlineint nintendo: SW-4051-4946-3420 brianperryinteractive.com 2

3

YIKES! 2020, huh?

COMPONENTS!

COMPONENT BASED DEVELOPMENT • 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. Proprietary & Confidential 6

OUR EXAMPLE WEB COMPONENT

Proprietary & Confidential 8

{{ title }} {{ platform }} {{ year }} {{ image }} {{ body }} {{ link }} Proprietary & Confidential 9

Proprietary & Confidential 10

Proprietary & Confidential 11

GRID LAYOUT Proprietary & Confidential 12

Proprietary & Confidential 13

(TWIG) COMPONENTS IN DRUPAL

TRADITIONAL CMS COMPONENTS 3 main integration related questions: Where do my components live? How am I providing data to my components? How is Drupal made aware of my components? Proprietary & Confidential 15

TRADITIONAL CMS COMPONENTS 3 main integration related questions: Where do my components live? How am I providing data to my components? How is Drupal made aware of my components? Proprietary & Confidential 16

WHERE DO MY COMPONENTS LIVE? Traditional CMS 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 Proprietary & Confidential 17

WHERE ARE MY COMPONENTS RENDERED? The Decoupled Analog Progressive Decoupling • • Drupal handles the initial page request and yields some portion of the page. Drupal has some level of visibility into your components. Proprietary & Confidential Full Decoupling • Drupal only provides data. • Drupal may know nothing about how the consumer will render. 18

PROGRESSIVE DECOUPLING

DRUPAL CONTENT {{ label }} {{ content.field_platform }} {{ content.field_year }} {{ content.field_image }} Content Type: Game {{ content.body }} {{ url }} Proprietary & Confidential 20

Container Block Wrapper Component • An extremely contrived example. • Could just use Drupal to render this… Proprietary & Confidential

RENDERING IN A DRUPAL BLOCK Roll your own approach • More work than you’d expect! • Unfriendly to a JS Developer Proprietary & Confidential 22

So… Much… Drupal… • Create a custom block type • And a library to load our assets • Create a theme hook Proprietary & Confidential

So… Much… Drupal… • Preprocess the block • Define the template • Take a PHP nap? Proprietary & Confidential

BUT HEY, IT WORKS Proprietary & Confidential 25

Progressively Decoupled Blocks • Convention for exposing JS powered blocks to Drupal • Components defined in info.yml file • Simplifies framework integration Proprietary & Confidential

Component • Inspired by PDB • Components defined by a component.yml file • Creates necessary libraries • Can define block configuration form Proprietary & Confidential

USING COMPONENT MODULE Proprietary & Confidential 28

USING COMPONENT MODULE Proprietary & Confidential 29

USING COMPONENT MODULE Proprietary & Confidential 30

GRID LAYOUT Proprietary & Confidential 31

Decoupled Pages • Easily define a route that can be taken over by your JS app’s routing • I’ve written custom code for this repeatedly Proprietary & Confidential

FULL DECOUPLING

TRADITIONAL CMS COMPONENTS 3 main integration related questions: Where do my components live? How am I providing data to my components? How is Drupal made aware of my components? Proprietary & Confidential 34

INTEGRATION APPROACHES Traditional CMS Components Mapping Data In Code • Includes: Mapping Data In Admin UI • Includes: • Mapping in Twig templates • UI Patterns • Preprocessing • Layouts Proprietary & Confidential 35

INTEGRATION APPROACHES Traditional CMS Components Mapping Data In Code • Includes: Mapping Data In Admin UI • Includes: • Mapping in Twig templates • UI Patterns • Preprocessing • Layouts Proprietary & Confidential 36

INTEGRATION APPROACHES The Decoupled Analog JSON:API GraphQL • In core! • Popular in React ecosystem • Growing contrib ecosystem • … but also expanding outside of React. • Multiple endpoints • Combine data from multiple sources • Schema customization Proprietary & Confidential 37

NO HORSE IN THIS RACE • If your team is inclined to use GraphQL, you probably already know • Our teams tend to use JSON:API • Shape of API something majority of devs are familiar with • Did I mention it was in Core? • GraphQL adoption limited / not consistent across practices. Proprietary & Confidential 38

JSON:API ECOSYSTEM Continues to grow • JSON:API Extras • Enable/disable resources, configure field enhancers, etc. • JSON:API Include • Simplify access to relationship data • JSON:API Search API • JSON:API Explorer • JSON:API Cross Bundles Proprietary & Confidential 39

Something I’ve struggled with: What is the right way to customize and extend JSON:API responses? (Hopin chat – feel free to school me on this one J) Proprietary & Confidential 40

SMALLER SCALE CUSTOMIZATIONS Supported patterns: • Create a computed field • Write a normalizer at the data type level • Create a field enhancer plugin using JSON:API extras (From: https://www.lullabot.com/articles/jsonapi-2) Proprietary & Confidential 41

WHAT ABOUT A COMPLETELY CUSTOM ENDPOINT? My use case: proxying a non-Drupal service In early days we rolled our own with json-api-php • Solid implementation of spec • Worry about long term maintenance challenges Now we have some more Drupal-y options: • JSON:API Resources • Seems like the most ‘official’ way • API Proxy • Tailored to this proxy service use case Proprietary & Confidential 42

TRADITIONAL CMS COMPONENTS 3 main integration related questions: Where do my components live? How am I providing data to my components? How is Drupal made aware of my components? Proprietary & Confidential 43

COMPONENT DEFINITION APPROACHES Traditional CMS Components Manual Definition • Define component in code so that Drupal becomes aware of it. • Likely requires some amount of duplication between Drupal and component library Proprietary & Confidential Automatic Discovery • Drupal module automatically discovers components from component library and makes them available to Drupal. • Emerging/experimental concept. 44

AUTOMATIC DISCOVERY Decoupled Analog - Closest thing is probably the promise of Gatsby Proprietary & Confidential 45

GATSBY THEME CONCEPTS Experiment – single purpose Gatsby theme and companion Drupal module Proprietary & Confidential 46

THE FUTURE… Proprietary & Confidential 47

I DIDN’T FINISH MY HOMEWORK Proprietary & Confidential 48

Q&A Brian Perry Lead Front End Developer Email: brian.perry@bounteous.com