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

A presentation at Decoupled Days in July 2020 in by Brian Perry

Slide 1

Slide 1

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

Slide 2

Slide 2

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

Slide 3

Slide 3

3

Slide 4

Slide 4

YIKES! 2020, huh?

Slide 5

Slide 5

COMPONENTS!

Slide 6

Slide 6

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

Slide 7

Slide 7

OUR EXAMPLE WEB COMPONENT

Slide 8

Slide 8

Proprietary & Confidential 8

Slide 9

Slide 9

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

Slide 10

Slide 10

Proprietary & Confidential 10

Slide 11

Slide 11

Proprietary & Confidential 11

Slide 12

Slide 12

GRID LAYOUT Proprietary & Confidential 12

Slide 13

Slide 13

Proprietary & Confidential 13

Slide 14

Slide 14

(TWIG) COMPONENTS IN DRUPAL

Slide 15

Slide 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 15

Slide 16

Slide 16

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

Slide 17

Slide 17

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

Slide 18

Slide 18

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

Slide 19

Slide 19

PROGRESSIVE DECOUPLING

Slide 20

Slide 20

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

Slide 21

Slide 21

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

Slide 22

Slide 22

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

Slide 23

Slide 23

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

Slide 24

Slide 24

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

Slide 25

Slide 25

BUT HEY, IT WORKS Proprietary & Confidential 25

Slide 26

Slide 26

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

Slide 27

Slide 27

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

Slide 28

Slide 28

USING COMPONENT MODULE Proprietary & Confidential 28

Slide 29

Slide 29

USING COMPONENT MODULE Proprietary & Confidential 29

Slide 30

Slide 30

USING COMPONENT MODULE Proprietary & Confidential 30

Slide 31

Slide 31

GRID LAYOUT Proprietary & Confidential 31

Slide 32

Slide 32

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

Slide 33

Slide 33

FULL DECOUPLING

Slide 34

Slide 34

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

Slide 35

Slide 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 35

Slide 36

Slide 36

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

Slide 37

Slide 37

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

Slide 38

Slide 38

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

Slide 39

Slide 39

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

Slide 40

Slide 40

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

Slide 41

Slide 41

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

Slide 42

Slide 42

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

Slide 43

Slide 43

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

Slide 44

Slide 44

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

Slide 45

Slide 45

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

Slide 46

Slide 46

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

Slide 47

Slide 47

THE FUTURE… Proprietary & Confidential 47

Slide 48

Slide 48

I DIDN’T FINISH MY HOMEWORK Proprietary & Confidential 48

Slide 49

Slide 49

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