Component-based Drupal

sure Kevin Gina do that

alright hi hello and I'm Brian toys a

cage match is brought to you alright so

this there is a cancelled session and we

both have sessions that are later mines

tomorrow I think there's this dude right

there at the same time so again you have

to choose round 2 okay so talking with

javi yesterday and he was like hey you

and Ryan are both here and you kind of

have different opinions on the whole

component base landscape in Drupal why

don't you two have a panel and talk to

humans about how you feel about things I

said okay so here we are I also found

out about the fact that I was

participating this via nap mention on

Twitter which I thought was great

surprise Cole so I'm Adam I am the VP of

engineering and I hope for you too and

I'm Bryan I'm an interactive developer

hs2 solutions

cool and I think I would like to start

by sharing some high-level things that I

like to do with component-based

Drupal the name is kind of funky right

but really the whole space is around you

know having parts of a design split into

patterns having that represented as a

content structure and Drupal and things

like that right

made very popular by a dude named Brad

Frost who wrote a book called atomic

design where it uses the dry principles

don't repeat yourself you have smaller

bits that are reused in larger bits and

before you know it you have a whole page

right so there's a lot of uniformity a

lot of consistency and you know as

engineers we are always advocating for

reusability and things like that so

everyone's happy so this is a very very

exciting space right now in my opinion I

think you would agree definitely there

are countless solutions that are coming

up there's things that are in core

there's things that are contributed a

lot of people have different opinions

about this so I think that's really what

we're aiming to do is to share some

different perspectives or holes or

things or approaches and this isn't a

one size fits all so you're not going to

hopefully you won't leave here and say

like oh we must do things this way

that's not the point I think it's just

more informational and we actually both

have different strategies that we

respectively like to do yeah some things

in common but definitely some different

references as well yeah thank you so I

wrote a blog post that is on one of his

tabs yeah called exploring simplicity

and Drupal design components so this was

written

a while ago six over six months ago okay

so basically I outline some goals by

outlined an approach I talked about the

challenges to the approach limitations

but I want to summarize that right now

to get this conversation started and

then I think Brian can chime in on where

some of his experience overlaps and

differs at that point so the first thing

I would say is for enterprise sites you

know you're often working with clients

that don't just have one web property

right did you agree so if you have more

than one site many of the solutions that

are in the community right now like

there's a multiply and I forget this

like six or seven more just so I think

is one there's multiply seems to be the

one that is gaining the most Steve

Shila I think was an old one that used

to do this type of thing but they are

basic those solutions advocate for

design libraries within a Drupal theme

okay my preferred solution is building

design libraries completely decoupled

from a Drupal site having it fit in his

own place and be his home thing and then

having Drupal be able to pull from it

and use it and make it work

one of my main goals is when writing

this is to keep it as simple as humanly

possible I don't want any extra tools at

all I want to make use of everything

that's in core as much as possible and

not anything that's in contribute so one

of the Preferences there that a lot of

people we talked about the data

structures in Drupal right if you have a

pattern that's in design and pattern lab

that might map to let's say a paragraph

in Drupal or it might map to a content

type display or something like that

right the paragraphs is contributing

that's a contributing models so one of

the things that I generally prefer is to

try to find ways that you don't

introduce that and using a pole in court

called custom block types allows you to

avoid using something like paragraph

that has nearly you know 95% of the

feature parity that you can get to have

you know things that are more component

based data structures on the site and

poor very recently even after this

article when I wrote this article I was

participating a little bit with the what

was called the place block initiative in

core an injured boy but that was

deprecated in favor of the layout

builder that was just released in the

latest version of Drupal core very very

very recently so layout builder now is

in core and allows you to place things

like blogs and paragraphs and whatever

you want on a page as I and the one

thing I'd say about that

well build I think is still experimental

still experimental yep but definitely

now that it's like been launched as part

of this part of core this the last

release is actually in much better

standing now and will hopefully mature

and become

yeah it's definitely the path or just

even from a personal experience I always

try to remember and remind this is an

experimental yeah yeah so it may change

but actually I feel that it's definitely

the path for me so that's the way that I

think looking at this so to summarize

what basically what I did is I made sure

that the pattern library that I was

building was outside of Drupal 100% I

wired it in with composer I use Drupal's

caching system to bring in all the

assets that I wanted CSS twig files you

name it and basically you know I talked

about how all the things come together

oh yes oh so based on that I mean

there's obviously a lot that I follow in

my process that similar projects that I

agree with but in following this process

for the past I'll say a couple years at

this point you know some things on

projects that I've done differently so

for example the you know you mentioned

the idea of having your pattern library

the external dependency to your Drupal

theme I agree 100% that that is the

right way to do things especially if

your pattern library is going to be

consumed by something else or maybe you

don't know it now and it will be in the

future opinion but they're also having

cases even with that in mind that I

haven't taken that approach it's a

little bit less with that but kind of it

goes to a bigger theme with this

component based approach for me client

projects is trying to make it so that

it's easy for people who aren't familiar

with this approach to integrate into it

and be productive

so for something like having the pattern

library the external dependency of the

theme especially kind of earlier on in

this approach it was a little bit harder

people wrap their heads around maybe

people who weren't as familiar with

composer based workflows

I think that's becoming more common so I

think it'll be less of an issue but

that's one situation where you know if

we don't believe that the pattern

library is going to be used outside of

this application it reduces some of the

friction

I also definitely agree with you know

the intent behind trying to use as much

of what core offers as possible and also

with the layout initiative I think those

were doing component based theming

should be hands-on with that

functionality for a week so that they

can figure out how does you know their

approach to component based Drupal fit

into that functionality are the things

that we need to be able to use making so

that better but there are definitely

cases where there are contributing that

I commonly use as part of this process

paragraphs is one of them and it's

mostly just because I and others that I

work with like paragraphs and are just

familiar with the paragraph approach

it's not necessarily because it's the

answer for you know a component based

approach to Drupal and then also kind of

falling into the same category another

thing that I have used and following

pretty closely is the UI patterns module

and we haven't really gotten into the

nuts and bolts of how this approach work

so I won't go too deep into it in case

we do but so that provides it's a module

that kind of helps take your components

that are in your pattern library

the mappings that you might have feeding

to as a library components and make

drupal aware of them it's essentially

like a a Drupal friendly version of the

component integration and the biggest

thing that I find very attractive about

that is I think it helps simplify or

makes potentially the process in some

cases some more understandable or easier

for other developers especially back-end

developers who might be integrating into

the front-end components because another

thing that I've run into with this

process is especially for developers who

aren't familiar with it or back-end

developers there have been some

challenges trying to integrate into the

components that we've built so I've

definitely been focusing on trying to

find ways to make that process easier to

understand but the the most consistent

there's a lot of different ways to do

this and I think as a community we've

kind of been figuring it out so it's

also really important that we land on

something pretty consistent one thing

about I think that's important about the

UI patterns module is it does tend to

move things more into the site building

realm in my opinion yep

the patterns that are registered in UI

patterns tend to you know be able to be

reused as displays for content types or

views or for blocks like there's a it's

basically kind of gets its tentacles

into all the other parts of digital

system and can use patterns in that

regard for me personally when I was

exploring this I'm very comfortable

coding both in twig and bumble breath

I'm comfortable I didn't say I was good

at it I said I was comfortable all right

you're going to get the yellow all

righty so but that's just from my

perspective one challenge though that

I've heard and I think that UI patterns

has a good place for this is around data

processing so I was in the end it was a

lullaby of the Palantir presentation

last year here at make camp on his eye

loggers and it was a lot of

pre-processing functions in Drupal and

aggregating and throwing data I actually

never needed to do that because I was

comfortable using twig functions or

using you know changing how the data was

being rendered through the user

interface but for more advanced cases

where you have to do some processing

something like this would be very

programming okay

so let's maybe talk about that at a high

level so i stoled to not let this happen

and I blew it for you you'll have two of

us coming after you now

in a typical presentation I'd be

concerned that that may be stopped with

video but it's just things that's so

fine it's a beautiful looking weapons

really the fonts like sonic logo right

we can also jump out there I hear

they're stickers too we can have some

some variety and go back to the this but

anyway and I can try to I can dig up

some slides maybe also if it would help

with this concept I guess your even

before I do this let's just take a quick

poll so who has done what they consider

to be taking a component based approach

to developing or theming in Drupal 8

show hands very small a lot of people

okay cool

all right so let me let me talk at a

high level about like what their common

approach might be I'm actually gonna

cool if I try to bring up the slides for

this I'm gonna do that

I think I have an example somewhere here

I think if you all can't tell it really

depends a lot on the comfort level of

your team and what you want to be doing

there's a couple other contributed

modules I want to talk about while he's

pulling up the slides the one is

ironically called

the components module in Drupal which is

written by John Alban and allows you to

do includes inside of Wade files and so

one of the beauties beautiful things

about that is you can have all your twig

residing in Panama and reuse that or

extend that wave inside of Drupal just

by doing like include this twig file

with this field value in this field

value in this field out here and it's

really elegant so that's what I used and

I also use a module that I've written

called block type templates so it

exposes a theme suggestion that allows

you to make custom block types and then

have one twig file for that block type

cool yeah so just a quick high level of

kind of what I consider to be the

baseline component theming approach that

takes the approach of mapping the data

in the the twig templates so and again

some of this is kind of my take on this

but so the idea is that in your pattern

library and not really focusing on any

particular pattern library in this case

I do tend to use pattern lab but there's

a pattern library at place where your

component lives and here in this card

subdirectory we're making a card

component in pattern lab the idea is

that we're gonna have all the pieces

that we need to be able to render a

backronym so there's going to be a twig

template for the markup there's a

markdown file to have some documentation

the pattern

the JSON is some data that gets passed

into our component from pattern lab and

then there's also a SAS partial that

lives here there might be some

JavaScript that's particular to this

component they live here as well but the

idea is that one place you have all the

things you need to render this wonderful

card I will state to that the use of SAS

is completely optional so this can be a

raw CSS file but I explained why I chose

to use SAS in my approach inside of the

blog post the main takeaway is that it

made it easier take mom all the files

together spit out one CSS file

it was much easier to catch in Drupal so

one line yep

so this is just a super quick look at

the what the structure in this markup

might be so here we have the base of the

card with a number of divs that wrap the

different elements of the components we

also see that there are some twig

variables defined as well for things

like the header copy and the pieces of

the image as well and then I tend to

follow them naming convention for the in

my process so that stands for a block

element modifier it's really just a way

to kind of clearly define your your CSS

and also prevent there from being issues

with the Cascade or your Styles leaking

out of that component and uses a

particular naming convention there yet

usually some very specific classes so

then so we have our card and then

there's our component in pattern lab or

your pattern library it's just so matter

quite as much so we also need to make

sure that the styles that we're using

are imported into pattern lab and all

that good stuff so that it's the idea

here is that the component that's

rendered in your pattern library is the

same thing that gets rendered into

Drupal

so we have our car component that

displays the way we wanted to in pattern

lab people think it looks good we have

some ways that we're going to use it in

our Drupal application the website so

the next thing is how are we going to

map this the Drupal data over into this

component how do we make Drupal aware of

this component that we built so there's

a handful of different ways to do this

but a simple example here is using a

scoring mode so there's a display mode

for card when you want to display a

carve a note in it in his card format

and the you know common approach here is

that in the Twigg templates you perform

some mappings it's kind of like Drupal's

template this note cascada HTML that

tweak here kind of stands in the middle

and i think when this concept was kind

of first discussed it was top described

as a presenter a template but it sits in

the middle and it communicates and

translates between Drupal and your

component in your pattern library you

can see that's reference because this is

pulling from the molecules which is one

of the orders of the higher

yeah and that molecules there is from

the components module that lets you

define a tweak namespace so it's just a

little shortcut but also that is

necessary to get Drupal to look outside

of your theme for templates one comment

to this is the mapping that I was

talking about this is an example of that

but this data

these can be Twitter's like you know

card title and card on description right

and to go back to the custom block types

example so that's what I would look like

if they weren't variables cool see

you're way ahead of me thanks Brian

so the cool thing though is if you say

suppose you wanted to use a card in any

part of the site and you wanted to

integrate it with layout builder this

would be a really great example for

using a custom block type where you

would say I need a new custom block type

called a card the card is going to have

or the custom block type will have an

image a title a description right and

then you would use one twig file that

did the mapping

of that and bring I'm especially glad

that I got to use completely out of

contacts an image of Julie from

real-world season one and that's so yeah

one thing that sometimes I find it helps

especially when you're getting used to

this process and doing it for the first

time is literally just getting a

representation of the component from

your pattern library just to show up in

Drupal and passing in you know the

placeholder data and then you start to

slide in the Drupal stuff so in some

cases those mappings are pretty simple

like content upon youth or the copy

theater or label for the header which is

actually the title which is not in the

right neighborhood but then we've got

stuff like the component has defined had

a variable for the source for the image

and a variable for the alt text so

giving it that can require some genetic

saving the right URL and then getting

the right portion of the render array

for the halt tags so you know as you do

that more you become familiar with how

you came to bug have likely not to so

you learned that but there definitely is

some resistance to try and figure that

out and the more complicated your

component is if you have things like

rendered entities inside of it it can be

neat challenging to do that and that for

me has been where I've seen some of the

pain when we've done this on client

projects working with a larger team

especially back-end developers who will

see these components so great I just

want to use it just let me use it I just

want to use it I don't need you I just

want to use it

which is what ideally you know you want

to get to lowering your resistance to

being able to consume those things but I

have seen challenges with people being

able to wrap their heads around this

mapping process I will also say one

thing too because this is a great slide

like this file URL is known as a tweet

function so these are you know

processors that are built directly in

its way and Drupal the Drupal theming

system has tons of them out of the box

or ones that they've enabled from the

higher order you know twig project right

one of the things that I learned and

probably didn't make it into the blog

posts because it was already like 19

pages long is that that you don't really

you should always be doing as much as

possible as much processing as possible

in Drupal itself like if you try to put

that back into the pattern library and

move twit functions around that gets

really gnarly really quick so I would

try to keep as much twit processing and

back-end Drupal processing in the Drupal

space and try to minimize the use of

twit functions unless if they're custom

you give a quick example

file URL so like this content filled

image is this is an image field injury

goal that requires this whole table good

thing to be processed as an actual URL

that gets passed to this twig file in

pattern lab instead of doing something

funky like this just pass a URL and

you're in your you know pattern library

because then you basically don't have to

worry about any of the processing you

can let Drupal do the processing and I

feel like that's best practice because

another system might have different

processing that it wants to use so it

yeah in my mind I think it's more simple

you use a processor put that URL into a

variable so twig has a bunch of

processors already out of the box that

you can use in some are specific digital

scheming system as well that they've

provided however there I forget exactly

what provides it but they're certain

versions of pattern lab for example know

how to handle those and they basically

just ignore them they don't explode when

they get there - that was it

but so preprocessing is definitely one

approach and one thing that I've kind of

been struggling with with that pain

point I go back and forth on it but what

I'm at right now is also so when I first

started taking this approach I can build

my component that is exactly how I want

it to be it has the beautiful markup

without a lot of the extra stuff the

trim pull tends to add which is great

but I think it's pretty easy to go

overboard to try to get that perfect

beautiful thing so sometimes I think it

makes more sense to kind of allow for

the possibility to kind of build with

Drupal's flow something out great way to

describe this but take an image for

example droop was really good at

handling images right and it's going to

spit out image markup that's going to

give you an image that's Drupal's image

and what you want so rather than having

an image type that has two variables

what if the variable is actually just

the image right for the markup right

yeah exactly and Drupal is going to pass

its representation of of an image the

mark-up for an image maybe you could

streamline a little bit maybe there's a

wrapping tip that you don't want but it

saves you the pre-processing it saves

you some headaches probably the alt tags

as well yeah exactly and it's not

incompatible with using it with another

application because it's just a

placeholder for that image markup and

that other application will send its

image markup which is maybe a little bit

different but it's still an image

so ask yourself what you're really

gaining by getting that perfect markup

this is what I think there were some

other hands

I assume okay say it seemed like what

you were to display as a door oh yeah

like a pen or lab would have something

it's basically like the URL

representation this ugly thing probably

returns some file ID or something to

that effect or some file handle and this

gets rendered as a URL through into

processing each weight right but the

pattern library is expecting a URL on

the other end and I if you tried to dig

in to get like the raw value here it's

probably going to be an impartial path

to like public file someone use flash

flash so keeping this in the TWiT file

the Drupal theme even though you're

sending value to 2

have a lot better cotton library okay

yeah and you have you know like you

actually have to do that because Drupal

has all of its own tweeting naming that

it expects for all of its different data

structures content types blogs context

behind everything right so all the twig

suggestions of the naming suggestions

will pass Drupal's data into its own

twig file that you then have to do

something like an English but the

beautiful thing about it is you could

include this same part twig 90 cars if

you want to do you can reuse it as much

as you want so in any Drupal add two

things one to either you guys have

feelings about what yep there it

controls that provide the extra and

swing your filters or functions this

week

value sometimes I've found that they can

help like do some of this translating

but other times I've heard people say

like it's just too much I've used I've

used both of them especially Twitter

field value what you actually recommend

it to me so thank you and got some great

use out of it but I have found that a

lot of times when I'm using if I find

myself using it a lot

I'm from things are probably too

complicated and we've probably gone

somewhere dark yeah honestly I feel like

that's the juggling act with all of this

is to try to keep it simple requires

like a lot of kind of thought around you

know do I want to render separate image

fields do I want to render one image

like you think there's a lot of like

kind of thought that goes on and I wrote

about this in the blog post a little bit

where I talked about that when I

initially just put together at the

design library right except I'm gonna

move this people know when I started

doing Drupal I realized oh I forgotten

all that

okay so I'm going back to the design

library fixing that doing another

release of the design library mapping

adding composer bringing it down and

then so there was a lot of

back-and-forth for me and I think like

that's you would almost expect out with

technology teams right that you would

want to collaborate between an

enterprise triple bill and

library so I kind of felt like that was

expected but at the same time my first

attempt at just doing and I'm going to

build this and then I'm going to

integrate this was not accurate and I

don't think that's realistic but also

just in general being able to build

those things in isolation without having

to involve Drupal it is really free

there are so you know platform

limitations right like if you do you

know powder lab you have to pick the

twig Benjamin right if you have an

enterprise system that's not using plate

it's probably not going to be able to

use it unless if you have somebody to

convert this way to mustache or to

handlebars or it's some other whether

that's the framework their version is a

pattern lab for many of those templating

engines true but you would have to copy

or reuse that again right yeah so bingo

yeah it's actually can of worms I'm

curious about personally so I have a

pretty strong interest in how to look at

the way that we can approach not just

pattern libraries but also templating in

general across the client server life

there's pjs available of course but

that's very distant from Drupal zone

native implementation its wake

do you have any thought like you know

because I've seen a lot of people

increasingly use pattern lab with

reacted with angular

well you know what are your thoughts on

kind of the capacity for Drupal to be

able to do client-side twig or

client-side templating with pattern

violence wink I want to take it a step

higher and I you might not like me

where I see the biggest potential in

that space is by using a task manager

like ya or something like that where you

would build these tools that would be

capable of like taking one input and

making a different help right like these

converters these processors and things

like that and the beauty of that is it

would be built in natively through a

workflow so he wired in with DevOps you

could just say like okay the minute I

deployed this I want to run these five

tasks just like you run Josh plans and

you're right but I see that actually

happening in the front-end is agnostic

to Drupal and Drupal being a consumer of

that that's my vision Bryan probably

will tell me I'm crazy no I don't really

have any answer there but there's a lot

of really interesting thought going on

around that topic and just some other

things that I've seen and experimented

with they're in that same neighborhood

here's going the other way so getting

closer to something that's a couple that

talks to Drupal so be it actually in a

couple of application but there's

something that I saw recently there

haven't really had a ton of time to

experiment with but I'll really kind of

spike some things in my mind forget even

what it's called but it's I think it

might be like twig graph Kewell or

something

it's a contributed module that was

recently created but it actually allows

you in your twig templates to write

graph QL to access the data assets so

I'm by no means saying that that's the

way things would go but but I do think

we're at a point where like really

fundamentally rethinking how the

friended works or how these pieces talk

to each other I think the main the rip

the game changer

me is sure web components not like not

we're talking actual know that guy agree

to do HTML spec and the reasoning for

that is you can you will have guaranteed

parity between your you know pattern

library your Drupal your this your that

and all it does is basically render the

same markup in the same standard format

it is becoming adoptive have more

browsers or supporting it now yeah yeah

I know you're here on the ball with all

that yeah so the that's where I see a

lot of this stuff going and I could

totally totally see how something like

twig is almost deprecated in favor of a

reference to a web component it is

completely outside of everything right

you know or is the design library and

stuff I don't know if you pressing are

involved with the talk but they were

talking in Nashville yes kind of about

that with a very popular titled air

that's Preston will now be inviting

Bryan and Adam is fancy talk internal

contact yeah it's a really if you're

going to Nashville it seems like a

really interesting topic to check that

up a really kind of let me know for

misrepresenting if it's kind of like a

Bruce blue sky kind of look about how

this could change

but I do see one thing that I'm probably

getting off of the island a little bit

here but I'd really see Drupal moving

way way way more into its content store

capabilities and its workflow

capabilities as a business its own like

a BPM system with its workflow and its

moderation and I see the need to be

separating that a lot from the actual

display and the rendering so all the

initiatives around you know providing

like a more modern JavaScript framework

for core is a very relevant discussion

and will probably further the separation

or the decoupling of Drupal being

everything right I'm gonna render I'm

gonna display them in a store I'm going

to do everything all at once so I I do

feel though that Drupal is a phenomenal

total at creating very good discrete

data structures that have you know that

are not WYSIWYG everywhere right like

someone was talking me earlier about the

Gutenberg work you know that WordPress

is doing where they're trying to do

components inside the with you and I'm

like oh please God no plugs all over

again yeah I can't handle it like it's

look I really did I'll just look to my

talk tomorrow

and with 245 that's right it's on a two

coupled Drupal and react project that I

worked on so if you're interested in

that sort of stuff

I don't know do if we just want to keep

talking on kind of this general topic I

can show quickly the concept of UI

patterns if people who are interested in

that but we can kind of go wherever

anybody wants to go yeah does anyone

have questions at this point I we

weren't prepared this is like you're

seeing it okay so what questions or

comments or considerations or your plans

for those come from

yeah so basically what I do is when I

when I reference the decoupled library

in Composer it brings it into the vendor

director just like every one of Drupal's

other you know crazy Symphony stuff to

tweak stuff everything is in the same

vendor directory all of that information

gets referenced in the theme through its

relative path and subsequently cache

just like it would be in in-depth is

fully decoupled

so that's definitely a common approach

Jim it's part of the build process as

the guy who always finds ways to talk

about the UI patterns module

even without the context of that just

one of the cool things that it does when

you make drupal aware of your components

through the UI parent module you define

libraries so your component may have a

library the crates on the flier can

reference other libraries so that's

another way if you're taking that

approach and using UI patterns that you

can tell people to use those

so if your committee pattern lab to a

module or to the space of its own and

then reference in data component yeah

they're two separate repos okay if if

anybody my personal site is still not

done yet I'm kind of shameful if anybody

would like to sprint on it and just once

to get some hands-on experience doing

this I am more than happy to sit down

with you on Sunday and get the tools

installed for you and you could get some

quick and dirty experience what other

questions so I don't really work on the

same side but I do

I'm learning like how complicated is

this sort of mapping get because this is

a fairly simple component and just from

looking at this you could include your

image could be an image atom you're

heading could be a heading element and

then just expanding that up you can have

something like this with a tiny little

description three cards and some other

component you've already made when you

build those like bigger organelle

organisms are you referencing the color

are you managing those references

because it would be referencing a twig

pattern and it would also be referencing

a triple that's a wonderful question so

all right so I want to take a quick step

back and say in my opinion and I'll

probably get roasted for this I come

from like so you know seeing the worst

case scenarios that can happen in you

know projects and things like that right

i ID couple the patterns as much as

possible

like literally down through them the

most finite of discrete things that you

possibly

do I do that and I've regretted it yet

the what I will say cover but but you

bring up a really really cool point

around like how to do the patterns

actually become reusable right so in

pattern in pattern lab every time that

you have an organism or a molecule or

pagerank its reusing it's referencing

its using the exact same stuff that is

in this markup like it's using you know

I include atom card or atom title or

atom image right and so all of that

works natively in Drupal though when you

do the same thing with the components

module so it's it's using the exact same

including and syntax and things so that

it keeps it and preserving potentially a

couple of other things out of that one

is just the complexity of it all maybe

but also were you asking like if you

have a component that has a component

inside of it how does that all shake out

and the how that works is that it

actually just kind of all gets passed

down okay so all those variables are

available to their children and I think

the way that it actually works in the

Twitter world is that it's kind of

actually building this large template so

it's not actually reusing whatever you

call this note - that's probably

whatever it's making a whole new

template that's referencing card and

then putting a new name

I at the end of the day how twig

actually renders that I don't know the

answer but but it actually go it goes

and looks at that thing and it takes all

the markup and uses okay and I didn't

have one other comment about reducing

complexity you don't have to use any

what like you're not obligated to use

the patterns from from pattern library

or from Cadillac let me give you a great

example of when you wouldn't use one you

would never pull in a page template

Drupal renders many many many different

things on a page right the header the

footer blocks the content right you

would never bring in a tweet file that

has you know from pattern lab which like

a page example might have 30 or 40

includes you would never never never

never never use that in Drupal because

it has way too much stuff that it's

doing right so it's just not feasible

right and so what the one of the things

that I ended up having to do because I

didn't bring over the page level things

is I did have a very small amount of

duplication for some of the very high

order Drupal templates like the header

and you know the footer and the main

markup and some of the rendering of link

yeah so the highest order ones I would

not even touch but and it's also up to

you about how what mapping do you want

to use you don't have to use an organism

you can go straight down to an atom and

reference on your Drupal if you wanted I

find personally that the lowest level

items and the highest level items are

often the the reward for splitting those

out is sometimes not worth it for me and

it's the stuff in the middle where I get

the biggest bang for my buck

and that that is I think this safe

advice what time is it wrap one of you

Oh 15 this great award questions comment

I was gonna make a statement about

caching yes do that and then I'll we use

that as my segue into may be showing

some UI atoms okay but look at which

experience of that because that is yeah

good advice so I I have that experience

and I've been through this so if your

using a pattern like this in my

experience if you're doing something

like this with Drupal a Drupal thing

that's at the block level you need to

make sure that Drupal knows those that

it's a thing if you are not rendering

the content

that we like content variable itself

that Drupal doesn't that's like how

Drupal knows that it's a thing that it

should send a cache tag on so like it

with this code for example it just was

at a block level Drupal wouldn't know

like clear the cache if this if this

block was updated yeah one thing you can

do is actually write a no display twig

function where it would technically go

through Drupal's rendering system but

not actually outputting right so yeah I

did something similar where I just I

said I used like twig set and just like

set content render to a random variable

that I didn't use anywhere and

you know you're doing so by doing

content dot field name you're not

triggering the catch

you know you're not rendering it there

was a really good blog post was going

around recently from one of the folks at

media current I believe came from what

the title was but it was a using Drupal

with components based post and he

specifically goes into some of the

strategies to working around that yeah

it was great work for three days

I also saw I should mention this that if

anyone is curious about the actual

discipline or the academics behind these

concepts there's a talk that was given

in Drupal Camp Florida a couple weeks

ago I was there by Derek Reese of Red

Hat and he talked about a lot about like

the concepts or the methods of why

things are the way they are and design

systems and stuff like that so that's

also a really good foundational so I'll

use that that's a segue into some of the

patch stuff real quickly but so just

show an example of that but so one of

the one of the benefits that you get

from using a module like UI patterns

that makes Drupal aware of these

components in a Drupal way is that it

does handle the captioning so it is in

fact something that you're gonna help

you work around that that particular

dish

I'll just super quickly just go through

this just to show what this looks like

and then I'll shut up about it so the

there's a when using the new iPhones

module if you have components you have

to use a gamma file and define your

pattern your component I won't go into

all the details of everything and swatch

it with real high level basic examples

but basically you given the Machine name

and you'd find all of the different

fields and then so it'll give you a

default template suggestion there but

you can also alternatively say this use

statement to just go and use the

template in your pattern library and you

don't have to have that middle presenter

template example at all and then it's

going to give you that it has like a

default like pattern lab white like

module that you can enable so will show

you your component in Drupal all the

fields and all that good stuff and I'll

skip over this there is some complexity

in configuring this but the just getting

to the meat of it with that then lets

you do is if you in so this is using

field layouts you have to have some sort

of module enable that enabled that lets

you handle layout so field layout or

display suite would be another option

but if that's exposed you can select

your pattern from the list and then once

you do that into the field UI you can

actually pick your field and map it to

the particular variable in the pattern

that you would find in

so really this is just a Drupal UI based

approach to that sort of mapping that we

looked at so it does bring it into the

realm of site builders it solves some of

those issues of your included

twig templates like when you take the

twig include your extends approach it's

really just a black box that Drupal

doesn't know about but now it knows

about those things she specifically told

them actually can you go back real quick

- yeah like for to the next one over yep

don't work manage display where's that

finish this whatever okay so the manage

display page we talked about all the

data parsing and things like that yeah

like you can get up pretty far by just

trying to dork with the settings and the

formats and things like that and

honestly if you want a good problem to

solve instead of writing your own custom

parsers if you feel like there's a value

contributed into the community like

someone else might want it so then you

actually have you know done something

that instead of people having to hack at

it every single time you consider that

your stern talking-to folks but yeah

absolutely

so yeah I just wanted to at least show

that as an alternative you know I think

it's a really interesting approach to

make a dupe Allah where these things it

has some complexities as well there's

certainly as far as knowing which kind

of sub modules of UI patterns you need

to enable there's other things you have

to wrap your heads around as well one

other kind of fun thing is view modes so

that's yet another drupal wrapper around

all of this that you can consider that

if you have the same data structures and

you want to display them in you know

tens of different ways like here's a

full page view there's a teaser view is

at this view or that here you can use

view modes and basically you know have

you know even another place to make

modifications and variations the same

thing and maybe even bring in a

different template or have a different

mapping or different values behind the

scenes there really are so many

different ways at it in Drupal that it's

kind of amazing and also a challenge you

know it could be display modes it could

be blocks it could be you know content

type your answers you could be a view

yep like you know I most of the work

that I did with mine or views because I

wanted to render a list of both you know

a blog post I wrote or a list of social

media icons that I wanted to display

right we're basically pulling in from

some area rendering it and I would put

my all my pattern library stuff inside

with a few specific

all right so yeah question and question

sir can we board you all that here's

question mostly because I'm still trying

to better honest I haven't donated this

before but your basically your

components or most references well I

think this slide deck fix another one

when inside of the design libraries

there is a well known structure and it's

self-contained every pattern is

something so you build a markup if you

use them to bench structure which is

just like a standard of naming CSS

classes of you know hierarchy of those

CSS classes and that applies yeah so if

you're using s CSS you can see the

syntax here where I'm going to start the

highest order and then drill my way down

defining the different businesses so so

like if you're not familiar with this

sort of nesting and approaching sass

like the class it's going to end up

giving you is card underscore underscore

image and so with that element in the

markup regular card underscore

underscore image you put that in the div

and it's going to give all the rules

would

of all the rules that are included here

just get applies to what's in this dish

and this is completely self-contained so

you talked about like that I think

bringing them together right so like if

you have a car that lives in a region

and the region might be like an organism

or might be a molecule depending on your

hierarchy but what you would do would be

that in your organism you would define

the different logic that you want so

it's all self-contained every pattern

has all of its hollom stuff it's a

little bit of a tangent but as I've been

learning react and some of the

approaches to styling in JavaScript it's

kind of interesting in that we're going

through so much work with something like

them and that sort of structure to kind

of force it into being self-contained

like that and it is really interesting

to take an approach to selling it

actually is clearly self-contained

there's a lot of ways in the JavaScript

frameworks to make it so the Styles

literally can't peek out in any way but

that's no priceless and your your card

selected

you could be using other the image and

the header they could actually be could

be it could be just referencing that

once I think also reference that in

other places for instance if yeah

absolutely but I would say that you know

the intent behind this I think is that

you don't write and it would enhance it

would result in there being it would

result in there being potentially some

duplication across your styles and if

that doesn't make sense to you then

maybe Ben isn't for you but if you

really want to reuse things broadly

maybe that's the way it sounded like an

idea like you know an image field and

want to display that image three

different kinds of cars do that yeah

that's actually a really good example to

bring up because so this says carved on

Twitter right but you can have variation

so you could do carve - blue or blue

card and it could be class card space

blue and you could have Abyssinia mark

up and just have a blue variation and a

red variation it would probably get you

the same or better yet you could have a

variable that you pass it in to your

quick temper modifier this is sorry

sorry I should have said Betty I

actually said or also yeah the variable

idea is definitely safe here

that's what I bring sex appeal any other

questions but was this useful and

interesting to people given that we

pulled it out of our bus yes yeah we

could finally really have tough people

that talks tomorrow so go to one of them

or one of the other talks at that time

because they're all great and if you're

going to the sprint I'll be wherever

component-based being that I'm working

on or if you want to play around with

the layout stuff in a5 that I'd be

really interested Bank on that as well

so if it's Berlin talk technical

leadership 3:45 same penalties and I

have 19 stickers cool thanks everybody

thank you