 Well, good evening and welcome to the last session of the day You've chosen build your Legos a practitioner's guide to building reusable components with me first greetings a Little bit about myself. I am the director of digital experience platforms at a company called bounties We're located in North America with offices throughout the United States and Canada I've been a developer for over 25 years now Been working at bounties and with Drupal since 2009 or so and a fun fact about me Is that I'm currently half finished with a 9,000-piece jigsaw puzzle And in case you want to see what it looks like The with the workspace is about two and a half meters by two and a half meters and when the puzzle is done It'll be you know, roughly two meters by one and a half meters. So get in there So who's bounties I won't spend as much time as the marketers would like me to talk about us But we're a company. We do lots of great things. We have a you know, an amazing Drupal team We do more than just Drupal though. We have engineers that cover the gamut. We do marketing Analytics and insight experience design you name it. We do it So if you'd like me to ramble on about that see me afterwards So what's the big idea about this talk? What you know, what do I think you should take away from the talk when you leave and I broke down into three different questions You know, why should you build your Legos or why should you be building reusable components? I think in a nutshell it's Consistency and efficiency and we'll talk about those things along the way The other thing is you know, how did we go about doing this? Now I know there are many ways to do this And in fact the way that we do it might not be suitable for you and that's fine I think what you should really take away from the stock is the more the big picture kind of thinking that went behind it And and how we got to the decisions we got to and then lastly What have we learned so far so when I originally gave this talk? It was last year around this time To talk in the United States And since then we've had about a year to ruminate on What's happening and to use the components more and get some more ideas. So I'll share some of those learnings with you So why should we be doing this? Why should we be be building Legos? And before we jump ahead to that The one disclaimer is we should really agree I want the definition of the Lego is and so I went to a really nice talk This morning talked about web components. I'm not going to talk about them here What I'm really focused on are the reusable building blocks that our content editors are going to use to build Drupal pages and so Away we go Component-based approach. I'm sure lots of people are using it for those of you that are not using it yet We love it and it's got a number of advantages. I think you know One is the the idea that the content editors have a great deal of flexibility to build the pages They they no longer want to be You know building pages that fit template They want to be able to create that template for themselves on the fly and the best way to do this is with you know components The other thing is a lot of the customers that we've worked with as we've moved them on to new Drupal systems You know one of the problems we've had in the past is that Developers have had to be you know part of the content creation process and you know, we don't want to do that One we don't like to do that or we said I don't want to do that and two we don't want to be a bottleneck To to the marketers. We want them to have a faster time to market If we spend less time helping them do the day-to-day content creation Then we can solve only cool problems and we can be really focused on the problems that matter the problems that are going to bring more people to our website problems that are you know You know preventing people from from doing what they need to do on daily basis, so it's really important for us to do that and Using this component-based approach. We can also add some guardrails to help the content editors out clearly with a really rigid approach you can do this as well, but You know we can do this and make sure everyone's happy People that are trying to protect the brand as well as the content editors themselves and lastly Personalization may be testing hopefully we're all doing that But a component-based approach really makes it easy to swap out pieces and parts of the site So we can do a good job with this So when we started thinking about not only using this component-based approach, but You know building our own component library. There are a number of different problems. We were trying to solve And being an agency doing lots of different websites You know there's some efficiencies of scale that we can get By doing things one time and then we're using them over and over and over again So if you think about it You know a lot of the components that we built out and you build on your sites They're used, you know on every different website, you know pretty much every website has a quote of some sort We have hero banners. We have two ups. We have lots of those different things And so by you know building these components once and distributing them along the way It can make it's more efficient, right? If we fix the bug We can fix it one place and distribute it as opposed to finding the you know 30 different places amongst our sites that we do it We also Have some issues with consistencies across the websites So if you think about it if you're you're doing a copy pasting Rebuilding this functionality over and over and over again What you find is you're gonna run into parts of these components and other systems And they're gonna be different and you're gonna you know not know exactly why they're different Do we mean them to be different? Is there a specific reason or not? And so this leads us to having a lot of you know system specific knowledge that we don't really need Meeting the regulatory requirements is pretty important You know as an example, you know as accessibility Now to be clear we should do that because it's the right thing to do and not because a bunch of lawyers tell us we need to do it But you know building components in a standard way can help us make sure that our sites that are accessible and then lastly Working with designers. I want to have a common language and a common tool set that we can use So we can spend less time on Building the things that we already know how to build and more think you know more time on the things that are gonna make this site unique so a number of years ago we built a website for Wilson sporting goods and This was one of the components we built. We call it the quilt And basically the quilt is a row that you can add two by twos one by ones one by twos and two by twos And any combination that you want And you know build up pretty unique site now We built this in Drupal 7 And you know we were you know this was right around the time or just before Drupal a to come out And once we were finished with it We had a couple of developers that decided they wanted to learn Drupal 8 and I thought this would be a neat Experiment to take this from you know our 7 Installation and make it into Drupal 8 So once they finished it we showed it off to a few people and they kind of liked it In fact, they wanted to use it And so that was an unexpected problem So we had to figure out fairly quickly how we were going to you'll make this scale how we were going to do this across many sites so You know, what did we do you know first thing the first question we asked ourselves is what should we build and to To determine this we started by auditing recent sites we had built You know some even a little bit older Some that were coming up so in different platforms that we we built that bounteous They just kind of get a feel for the types of components that were out there And we had to you know two criteria that we use pretty much to decide whether or not to build these components out One was you know how often were they used so something was used all over Pretty much every site. There was a really good candidate for us to build Again, you think of you know hero banners and you know frequently asked questions and things of that nature You know, so that was like one criteria and then the other criteria was we wanted to make sure that that functionality was common Across the components. So if someone's hero banner did some really funky stuff We left that off our component. We didn't want to to bring that in to start And it's just kind of an interesting note while we started with the quilt because it really wasn't used on a lot of sites Probably was going to be a lower in the priority scale for us So What do we end up with we built 12 start even doesn't And this is by no means all the components we use on all of our sites There are lots of different components we use As well some less popular some very specific for the sites But this was a good starting place or at least we thought it was and this is a list that we continue to talk about expanding As that time goes on So I'm going to buzz through them all so you can see them quit accordion An alert So the hero banner and this one's kind of interesting there's three different hero banners here There's one at the top. There's two stacked slides and then there's a carousel And so a lot of our components have a lot of functionally baked into them. They're they're really Really flexible You know call out frequently asked questions a grid And just kind of scroll through this guy, too You know one of the interesting things for us was as we did our audit We found you know most of our sites when they used something like a grid We're only three or four wide and so our grid is you know three or four wide you choose But there are certainly ways to make this So that you know you can have you know five wide or two wide or whatever your use cases may need Overlays kind of similar to that, you know just the differences as you scroll over it We're going to show you additional text And again three and four wide for us that was common The quilt so the thing that started to roll off You'll see a variety of the different rows Also is a side note all of these Images are coming from a site that we built internally so we could show our Our design team our developers all those folks you know what we had built and how to use it It's a sandbox so people can go play with it. We don't care what they do to it Also has a space theme. So I hope you like pictures of space much as I do Quote and you know in this case, it's a really long quote with a background image But you know you can imagine it just has a background color Where the quote is well? We can do tabs horizontal vertical text divider if you want some kind of interesting you know design experience in the middle of your page and Lastly, but not least is the two-column again. This is one of the ones we find ourselves falling back to quite often So You've seen the components And I'm sure in your mind you've got lots of components that you'd like to build to the question Is how do we build them out? And again, this is kind of our method for doing this. I'm sure there are other ways to do it That that might work well for you And this is actually version two. I'll say it the first version of this was really just a custom block and the paragraph type We started building that in the very early days of Drupal 8 So there was you know, not as much development as much available to us And we were using you know blocks to lay up our pages as time went on we we started to Evolve and we're continuing to evolve to this day But you know two things that happened along the way that made us change our original approach one is paragraphs We like a lot of people sheepishly use paragraphs to control layout right and make it easy for our content editors to To control the later on a page That worked really well for us and then Layout builders come out right that went from a thought to an experimental module to now It's a full-blown module. And so what we ended up doing was ending on An approach that we could work and use both ways and so Let's talk a little bit about this so we have the paragraph type in the middle You can think about that as containing the content and then any you know layout Or styling issues that we want to control for just a specific piece of content and then the paragraph container Kind of buns that all together and it also has You know fields that control functionality that affects everything that's within this container And then eventually you can stuff this in a custom block that we built out Or you can use it within your entity is like content types So let's take an example because I'm sure that's clear as mud The paragraph type If we're thinking about like a hero banner, that's the individual So as you saw on our screen before we could have stacked banners. We could have carousels but we all know each of these paragraph types represents one of those banners and so we have the Headline the sub headline the call to action You know is content the background image and then we have you know styling theming things we're going to do with it So how wide is that container that's going to hold the text the size of the text the size of the button? Color of the fonts all the good stuff Then the container Has all of that stuff So if we have five banners it has all the five banners, but it also has additional Fields that we need to control like the carousel. So which letter we starting on You know is it turned on automatically and in those types of things so Let's walk through the hero banner a bit As I mentioned You know kind of beneath this we're using paragraph types. So we have two different paragraph types for each of our components one is this The banner rows or the subcomponent again, that's that the individual banner that we're using And then we also have the components banner, which is that whole entity for the hero banner Container field. So what's in that? You know kind of the container again? We we have a reference into the reference revisions for the banners themselves And then we we have a numerous fields that we can use You know to feed transition to you know to do less different things The the subcomponent so this is the actual banner itself has a lot of fields on it In fact it has many more than this this is just all it could fit on the screen But this is a good you know cross section of the types of fields we have so we have everything from like the CTA or the headline You know the content that we talked about and then we have some selling Fields as well like additional classes that you can add or the CTA color those types of things and then we also have a for the hero banner itself We have some other fields that we deal with on things that are not desktop You know like are we going to drop the text below the image or not? And we have lots of fields We'll get into this a little later our our content editors Especially the ones that we're we're building for are pretty sophisticated They want that power and so they'll they'll wait through a few extra fields for us to have the additional power at their hands So Let's walk through this And just see what it looks like to edit one of these Banners so this is the page that I showed before with the banners on it And you can see here we have the three different components and we're going to edit the bottom one Which was the one that had the carousel And once we go in here, we have two sections we can work with we can do work on the slides Or we can work on the carousel options in this case. I'm just going to walk through the The first slide, you know and again we have them broken down into You know essentially you know content And you know styles and then the mobile experience and so we can add our background image if we want we have The subheadline or the headline the subheadline call the action so anything you consider content we can go ahead and edit And then we're going to go back to the top and we'll walk through the different styles So again, you can there's a lot of power here for the the user They can add additional styles if we have them in the CSS to specifically style this banner And then we start talking with textiles. So again, how wide be the container width is The size of the text the color of the text and then we do the same thing with the image and the call the action as well And then we're going to go back to the top and this is where we're going to deal with some of the mobile aspects you know we find a lot of times we need to drop that text because the the Headlines too big or in fact sometimes we can just change that headline again to allow the the content is to build the content the way they need to And then you know the carousel option so here by default we turn the carousel on if you have more than one banner And then they can go through and make changes to make the carousel work exactly what they want to And then that is the finished page and this is our carousel slide that we can see So it's pretty stuff. I know it's late in the day. I don't have a lot of Toad slides, but we can walk through some of these things that we found to be important Bunch of layout pretty straightforward obviously But you know a few things that we have in here We have some CSS and some JavaScript and things like that. So right out of the box are our components are well styled You know, certainly you would probably update some of the styles to fit with the website itself But if you drop this in with any theme like it just works, which is nice and then some of the JavaScript we use for like an admin thing or for the hero banner there's some Some image manipulation we do as well The banner info again nothing too exciting here But the one thing that we do have is the just two components module and What that module is it's kind of the parent module for all these and so it poses some some interesting pizzas it has some real basic at CSS that we need throughout all the The different components like breakpoints and things of that nature It also has a composer.json file so we can control this and use composure to bring this into our projects as well as We look at some code the you know, I don't have a ton of code and hopefully You don't as well, but we do have a couple of needs You know in one case when we're using the paragraph widget. We need to make sure that we tell it which Libraries are needed. So we use this hook to tell us that And then most of the rest of the code that's in these these modules is really dealing with The the templates are making sure they're set up. So we want to override the block template and so we use a hook to To add that suggestion and then we we register with the theme and Then in the dot module file as well We also have a couple of fields that we want to to override And another thing that we want basically we want to make sure that if anyone is using this that they use our templates You can't override them, but we want them to Really be mindful when they do that You know, and then what do the templates look like? What are the template files look like? You know, we have this is that container template. So we're going to talk about the carousels And make sure those are set up right and then we have our for loop to go through our individual banners And then we include that template right from here as needed and then You know pretty straightforward in the banner template, but this is the template that we use to build those individual banners out So some things to consider As you do this yourself You know We've I feel very strongly. It's a good idea, but you need to make sure you kind of think it through Why is this how you're going to plan to build your sites? You know, as I mentioned before, you know Originally we were doing the the block thing You know the block layout and then we've we've transitioned and so our code bases had to transition with us as well But if you're going to plan to do this make sure you think through that as well and you know in the case You know of layout builder for us. We didn't know if it would take off or not So we built our code to handle both ways And we're still there right now You know, I I gloss over this a little bit, but you know how sophisticated are your editors? You know if you are working with folks that are in a marketing department that are really dedicated to their craft You can give them a lot more freedom And you can give them a lot You know more complexity in the UI if your content editor is You know someone that does this like every other Friday for an hour like you want to tone down How complex things are? How will you extend the functionality so as you think about your components You have to think about it a little bit into the future and then understand like what your approach going to be to to do this Not necessarily technically, but you know, what's you know, how are you going to use your components? So our base components are more basic than some of the components we have You know on some of the sites and so, you know Understanding, you know that our idea is everyone's going to get this or no one's going to get this In the functionality standpoint, you know helps us understand how we're going to extend that functionality Make sure you're able, you know, we also can override the templates and themes and all that good stuff So we're a pretty good place there And then, you know, how do your projects incorporate these components is another thing You know, we use Composer. I'm sure most people use Composer But making sure you have your projects set up correctly so that you can pull those things in Those components in and make it really easy for you to do those updates as you add, you know functionality To your component base alright So what have we learned so one of the things that we learned is that What's clear in my mind and what I know isn't clear and everyone else is fine So we need to make sure that everyone's on board, right? And it's not just developers. It's everyone. So it's project managers It's especially designers You know, business analysts everybody everyone needs to know what's going on Because you want people to speak up if things are not working as they should And then, you know, it's not enough to like do like a training session and give people going You need to continuously do this So on a recent project that we had we didn't use the components because the architects who was new to our Company just didn't know we had them So, you know, live and learn I guess but make sure that everyone as they come on board or taught about it Default the system to using it so better than just telling people to use it You know, make sure that it's the default choice make sure you have to opt out for us we have our own starter project that we used to build their sites and so a Project in the near future or task in the near future is just to make sure that these Components are included by default make people opt out of them If you don't have a starter project, hopefully have like a starter checklist or something and make sure you add it to it And then the last part is You know key for me, which is to make sure that you schedule a demo with the team before you start Because you don't want to get partially through your design phase and then start to introduce the concept to the designers Lastly, this is a great idea and we use it and we love it Doesn't work for everything right so Make sure we're you know, you think through on the project for you use it Yes, I want you to default to it, but you know make sure that there isn't a good reason not to use it You know, sometimes the designers are just going to design things That don't fit your components and you've decided you're not going to add them to your components So leave that component out. It doesn't mean you can't use the other components, right? There's still value in using 10 of the 12 or 15 of the 17 or whatever you have But you know make sure that we're mindful we're using it And Also, I would say make sure that the content editors are comfortable with how you have the components set up You know a recent example from you know about this for us was we had a company that we built and launched a site with you know earlier this year and As we were going through The process with them. They said it's really awesome, but we're not ready for it So we still built the site and we still use their components But we found ways to add guardrails to really focus them on it and as they get more comfortable with content editing when they get More comfortable with Drupal we can start to pull those guardrails away and give them the full power that we'd like to and then lastly Clients can have unique requirements and you know, we had a recent site build where we needed to replatform a number of sites and As we worked with the client to sales budget and all those things we said hey, we're gonna have to Condensure components from Someone seemingly number across the seven sites to another to another number and everyone agreed and then once we got into the build Like all the people that own the individual sites were like well I want my component not you know this one that doesn't have all my features. It's ultimately we Didn't use our components. We built some new components that that give them some some different functionality and flexibility But ultimately, you know, recordings might just prevent you from doing it So And what's quick Come to contribution days on Thursday and help us out help make Drupal better Let us know what you think of both Drupal Khan and Drupal and this session in particular Are there any questions? Yes Our's works with responsive, I don't think we use bootstrap for it. Oh, sorry the question is Do the components work there's responsive and And or with bootstrap. So yeah, they're all responsive. I didn't show it on the on the This rain, but if we compress those right out of the box, they're all responsive and they work well And I don't think we use bootstrap in it, but there's no reason that yours can't Anybody should be able to use anyone are any of our projects, you know Can and will get these the combined Each individual site might have more things that they have to do with them to make it fit within the other sites But yeah, you know out of the box they work and they're styled and they look pretty but there certainly are some adjustments That might have to be made I'm gonna repeat the question and let me know if I got it right You know the I seem to be against custom modules and I am What in this use case, but then I think the question is are they set up in a repository? How do we work with them? Yeah, I think Yeah, I think what you end up with if you really need to do those customizations is you're gonna have a custom module That that only has those pieces of it So you don't have to build rebuild the whole thing hopefully you can just add you know like if you need additional fields Some additional CSS you should be able to just add that you know custom module and kind of layer on top of it But then get the benefit of all you know that's been previously built You know and then for us too, you know if there is a use case and we really like the functionality We'll just build it into the component and then you know we use get To keep track of the versioning so you can use composer to grab the specific version you want And so we can you know make sure that we pull in The right version. It's a living breathing ecosystem right and and you know as we Learn more as you know you learn more you're gonna have to keep growing it I So I'll repeat the question as best I can And then you'll let me know if I got it right. I think the question was a class in money to do this and Who incurs the first you know the class? And really good question how we approach that well the the easy answer is what we've already done and With this particular approach I Used bench time for my developers and so I just made the investment Into it and we were using it for a couple of ways one is to get you know This you know efficiency built into the practice a bit, which is really good But it was also to get some folks a little bit of experience with with Drupal 8 as well so there's that and Then the question is going forward. What will we do? And that's you know, it's a it depends You know depends on our relationship with client, you know Sometimes we would you just you know have a relationship where we could just pull it in and to our common components and not worry about You know and if that's if that's not the case and we really wanted it then I would find bench time and I'd rebuild it The question is how do we bundle the configuration? Yeah, it's it's bundled within in the module itself. We have a config directory that we use when we install it So there was a comment I think it's a comment that they use a similar approach that we do And there are some multi-lingual issues with paragraphs specifically a thing needing to have the same number of paragraphs for each language and And then some client specific Cases that we haven't really run into that yet. So I had I don't have an answer to that particular problem, but The approach is not without challenges, but every every approach that we have in Drupal seems to have challenges as well The question is if we want to add a new field to one of the components And we want to roll it out to a number of sites. How do we deal with the config? This is really good question. We haven't had to do it yet I suspect that we would end up with some some hooky code to Figure out whether or not it was already there and and then add the config Custom box Yes The question is based on the approach do we have a consistent data model so that An API could pull the right data About Probably Yeah, I don't you know, I don't think we've you know, we haven't used it in that way We haven't been using API pulled out so I don't know what you'd run into but yeah I think you know kind of going back to some of the the general thoughts is like thinking through how you're going to be using them And you know my approach there would would be to to kind of Set up a sandbox and just play around with a little bit and make sure you know to see you know If that is an issue and then you know, can you indeed get around it? I don't I don't have an issue or an answer to the specific issue But but yeah, you know that's what you know kind of interesting about this approach is is you know You know just kind of in general right not part specifics But there is that you know how you're going to use These components is going to be different than me and you're going to run into you know some different issues You might have to tackle We're also using a similar solution. Okay However The user experience So many components, so many options can get messy real fast Yeah, so one of the things we implemented the thunder and mint which has a sort of a better Okay, but still we have UX problems. It's still messy. We have no suggestions So the the comment was that They also use a similar approach and then the question is or in that the UX can get messy and then are there You know suggestions for how to solve it You know we haven't kind of gone through like a second version of it and you know for us You know, you know our users have the real kind of power users and so you haven't really had to worry about it one of the ideas that we Thought about though before it haven't executed was you know maybe having You know different experience for different levels of users So like I could assign a role to somebody and then based on that, you know adjust what they see You know so I mean it's it's a sticky problem, right? And it's one of the reasons why we kind of haven't left paragraphs although I've heard some things about Leo builder that maybe tell me that that's going to get solved But you know we can you know within you know our content types. We can say you know in this area Only use these components and in this area only use these components of those types of things But you know, yeah, it's you know, but it's one of the reasons we started with 12 because we don't want 100 because You know even talking to clients in general not even considering this project. That's a problem You know, they were like hey, we need our current site has like 112 components and we need them all and you're like no not really You won't like that The one thing I saw recently Was with Acquia acquiring cohesion I saw a demo of it I'm not a you know showing for Acquia, but cohesion seems to take I mean I don't know how it's architected but it seems to take kind of a similar approach to what we're doing They have a pretty pretty UI That looks like it's pretty pretty snazzy. So I would you know, where'd you take a look at that? That might give you some ideas as well So There was a comment that they use view mode selector with the approach and it works well I mean, so we don't yet, but I'm gonna take that as a note and and go back to the office try and check that out all right If there's no other questions, thank you for your time and if you need to get a hold of me there I am