A presentation at Decoupled Days by Brian Perry
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
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.