 Good morning everybody, my name is Jigar and I am going to present about Drupal UI Patterns, component-driven development in Drupal and I am from Evolving Web, I have been working with them for the last three years. Evolving Web is a medium-scale Drupal shop located in Omo Trail. We've been into Drupal like we've been doing Drupal for over a decade now, it will be our 12th anniversary in July and we are a team of 15 Drupalists and we are hiring so if anybody is interested in working with us you can send us a mail and we do Drupal training and we also contribute to like a bunch of open source projects including Drupal so we have submitted modules, patches and plugins etc. It comes to me, I am Jigar and I am a full-stack developer. I've been doing PHP since 2009 and I started doing Drupal in 2013 and I didn't switch tracks, like I used to do Presta shop and Coding Night here and other things but I like Drupal so much I stuck with it and it's going well with it. So I've been working with Evolving Web like I mentioned since 2016, three years and recently I've started exploring Ruby and Python and if you want to learn about my adventures you can simply look for Jigarius. That's my screen name, Gaius Jigarius Kaisa and Mikhail Hauskins is my colleague who helped me prepare the slides but unfortunately he decided not to present this session so very like I'm very thankful to Mikhail for having helped me prepare this presentation. So without further ado let's take a look at what component-based software engineering is. So this school of thought like promos the idea of thinking of a system which in our case will be a website to like we are supposed to think of it as a bunch of small pieces, components working together to make the system and so how does this help? Like it helps us separating the concerns and go for like a more modular approach to development. So for example if you're building a button set like three buttons side by side so we can think of it as two components the button component which is only concerned about how the button is and then the button set component which actually takes three buttons and puts them together and it is worried about how the buttons will appear side by side and it can also think about like if it's a mobile device then it will show the buttons one below the other etc so like we have a separation of concerns there like the button thinks about button, button set thinks about the button set so how does this help? Like this helps make code more manageable so you don't have all the CSS and all the JavaScript in one single place you have separation like button.css you have button set.css and so on so you can like if you see something is wrong with button set you go edit the button set and so on so it also promotes a reuse based approach so many of us might have like used views and say you're using a view to create like a list of cards and you do it for a view which is showing like a set of nodes and you must have noticed that the class names on the view are different so more often than not the front end developer usually uses the like class names like view type content etc for adding the styles but then say later in the project we decide there's one more entity type say taxonomy terms and we want to show a list of cards for taxonomy terms so when you create a view for taxonomy terms if like the thing wasn't done in a right way then more often than not you will need to make some changes to the CSS to make it work with the taxonomy term because the classes are different and in the future if you add some more view then you'll have to make some minor tweaks to make it work as well so if you're using like component-based approach and with UI patterns I have used it a couple of times and it actually helps with this so when you create a new view you simply tell it I want to show these things as cards and magically it all works like you go to the page for the first time and it is perfectly styled so what is Drupal UI patterns it's a module which aims at promoting like aims at bringing component-based development to Drupal so instead of calling them components we call them UI patterns in this module and it helps us like get why should we be why should we be worried about using like UI patterns in our development cycle so the first thing is like I mentioned it helps you reuse things so you build once and then you use it multiple times and also you get to decouple the data layer from the presentation layer so there can be a front-end developer who builds all the components and they use dummy data for it and they can do CSS and even Javascript for behaviors and then when the backend is ready you simply tell views okay I'm rendering this view using a UI pattern so that when you map the fields to the right fields and everything is working so it helps you do both backend and front-end development simultaneously to an extent and then you get to maintain an inventory of components which you can then share across projects also like you create a card collection then you can share it with the other project so you magically have card collections in the other project so it is very helpful in this way and then you have standardized appearance and behavior of elements so for example if someday you decide how many of you have used Photoshop or anything similar like you can group things together and then when you change one thing the styles get applied everywhere so it's like symbols in Adobe Illustrator so you decide to change the heading size for a card you do it once and all the cards are suddenly updated because you're using the same thing across all pages so now let's see some code I'll be showing you a demo of like around three to four UI patterns which I made for like a small website that I was building and a blog article that I was writing so to get started with UI patterns the first thing you need to do is install the model you take a look at which modules like in a in an instant and then you start with a custom theme or a module in which you are going to place your custom code for the patterns so basically you create a directory in that team or module called patterns and in it you make your patterns each pattern is like a directory inside it you have a YAML file which is like the declaration you'll see all this and you also have a template file where you tell like tell Drupal I'm going to like this is how the pattern looks this is the template for the pattern and then you also have a page where you can see a list of all the patterns so let's see how the code looks so for this demo like I have prepared this team called admin Michiel has prepared this team called admin and in it I have a patterns folder there are people who call a GUI underscore patterns but I chose patterns so in it I have say five components in here let's take a look at blog quote and in the blog quote pattern we have some css for the pattern we have a metadata file which is patterns.yaml and we have a template file so let's open this up and this is heavily commented because this code is available with the blog post that I wrote you can find it on evolvingweb.ca slash blog and in here like this is the machine name for the component that you're defining there's a human readable label a description and variants will get to it like in a vial then you define fields so each field has to have a type which is currently only used for documentation there's no validation or anything going on and there's a label there's a description a preview text which will be used on the pattern library page we'll take a look at it also and I have three fields here like a content attribution and citation and at towards the bottom I also have a library's declaration where I'm defining a css file and pairing it up with this UI pattern so let's take a look at all this in action so okay chrome doesn't show me the address bar so if you go to this page here you can see that all my patterns are here so if I click on blog quote this is the like all the things that I define in the backend and you also see a preview of the pattern with the styles that I define so after you define a pattern you need to clear cache and then you'll start seeing these things on the patterns library page and to get get to this this is the basic like output you can get from the UI patterns like just getting your patterns detected you need these modules like UI patterns and you need UI patterns library and you also need to check this one so that it defines like it picks up the YAML sorry the tweak file definitions if I'm not wrong so once you enable these you get this page you get to this page and besides like you don't only want to declare the patterns you also want to use them so to use them you can enable the other patterns which are like bridges and they're connectors with like the display suite module the field groups field group module and the views module we'll take a look at that also so for now we just enable these modules and we're good to go so in here we'll also take a look at the other patterns like this is just a link pattern which is not going to be used as a standalone pattern usually but it will be used from within other patterns I'll show you so this here is a card collection and I have created variants for it so what are variants variants are like multiple versions of a pattern and for example for the card collection I have defined six variants each of them being the number of columns that the collection has so this is the one column variant where you see all the items are appearing in one column and then the second variant is two columns so here you see like two column appearance of the cards and then here it is three columns I don't know why this image has not loaded correctly and then you also see which four etc and then finally these are the other patterns that I have remarkably like a note this noteworthy pattern here like a card it is using something called nested patterns so you have a card pattern in it you are calling the link pattern that I just showed a while back so from within the card you are generating a link so you are nesting patterns one inside the other so this is very cool and you can also go to multiple levels of nesting for example this is the card collection in it we have cards and each card has links so it's like three levels of nesting you can go even beyond that so these are my patterns now I'll take a quick look what you're doing here so we saw the pattern library and now let's see like we have defined the pattern but let's see how to use it so to put it to use we enable the other helper modules that we saw the bridges the connectors so the first thing you'll see is how to use UI patterns with display suite so what I'll be doing is I'll be configuring the article content type in such a way that the teaser view of the article will be rendered using a card so basically when you go to a views page with a list of article teasers you will see a list of cards so let's take a look at that so no code for this you just define the pattern and the rest is basically UI like the Drupal admin UI so I'll go to articles I'll go to manage display and in here I don't do anything to the default view because I am concerned with the teaser so in the teaser view I have basically chosen generic card here I can even choose block code or anything else I want so after I select this and I say I'll get this new UI which will let me map like put a bunch of fields into the predefined fields that the fields that we define in the UI pattern itself so I drag the title of the node into the title area I drag the body into the summary and I make sure it's streamed to 150 characters and image URL I just rendered the image and so I do the same with the read more link so here like sometimes you will find that you you want some data from the node which is not available as fields like these are the things which are available so that's not the end of the world like there is this display suite module which has a cool feature where you can define token based like fields based on tokens so I can say create a field which applies to nodes and I can like add some tokens and after I save this field it will be available on the other page that we were on where you can simply like drag this and use this in your pattern so after I do this and I go to my like I have three articles on the side and one landing page so when I go to the article page it's all the regular old page but when I go to the list of teasers for the articles I have all these things which are rendered as UI pattern like the cards that we define so and the link words the image words you can like also add a link to the image and so on like you can even make the image optional and things like that so if you remove the images it will become like text cards and the stylus are applied this and like in the same way across our pages so now more often than not we are building landing pages complex landing pages and we are giving the admins an option to like say create a landing page then have a field called sections where they can add whatever they want like a collection of cards they can add a block code they can add a wide image so we can also do that kind of stuff with this UI patterns so for example I have configured some paragraphs here like paragraph plus UI patterns is a very powerful combination so I have defined a paragraph type for block code and a card and a card collection and in the block code for example for each of these paragraphs I basically created the fields that I need to populate the data in the pattern so here we have attribution and body and in the managed display this time in the default view I have applied the block code component UI pattern and I've dragged the relevant fields into the right places so after I did that for this I also did for the other paragraph types card collection is kind of complex because it contains a collection of other cards so I defined a paragraphs field and each of these paragraphs field represents a car and this title is the card collection title so we'll take a look at all this in action I hope I'm not going too fast I lost 15 minutes doing the like a projector setup so I'm kind of but let me know if I'm going too fast so in content types I defined the landing page and for landing page I defined a sections field which is again a paragraph reference field and in here I enabled the block code and the card collection patterns so now to see this in action I'll edit this landing page that I made this morning so I add a title that's all regular old stuff then I have a block code pattern in which I can add an attribution I can add a body and I have a card collection where I can add like multiple cards I've added three here and I can also add other like patterns which I might have configured so I can add one more block code and I like say and we say and when I save it you'll see that magically everything appears like as UI patterns and it is perfectly styled is the card collection title is the new block code that I added and so you have the ability to create dynamic landing pages and you like style it once and it works everywhere so this is how you use it but display suite and let's go back to the presentation so the next topic will be UI patterns with views like so I've already shown you this example here where I'm using a view to render three articles but this is not a regular old view I have done some trickery with it so the thing that I've done like by default when you're trying to use UI pattern with a view you usually get each row to render as a UI pattern but like there's an option here where you can display each row as a pattern you'll take a look at that also but I already configured the teaser of the article to be rendered as a UI pattern so I chose this to be displayed like each row to be displayed as a teaser and but then I wrote like I wanted my card collection pattern to be used in this because without the current collection pattern you get like a list of unformatted list of UI pattern like cards which are visible one below the other but I wanted so that each row will be treated as a card and the view itself will be treated as a card collection that feature doesn't come out of the box with the UI patterns module so I wrote a small plug-in which is like basically around 25 lines or so and that gives me this new feature here where you can choose UI patterns as like a set of rows and then you can choose the variant that you want to use like three columns four columns and I'm actually building a better version of it so that I can contribute it back to the module and you can choose the pattern you want to use you can choose the variant and then everything appears in the front end as you want like card collection containing cards so this is a generic card and if I go a little higher you see card collection that wraps all the cards so this is very like promising and nice so the other way like you don't necessarily have to do it like this and configure like like for example taxonomy terms you don't have a teaser view by default so you can also do it in a different way so here I have a list of cards like a list of tags which are taxonomy terms and this view is configured a bit differently so this is thanks to the UI patterns views module that we can display each row as a UI pattern in the previous one we saw it rendered as a teaser but now it's a UI pattern so when I choose this and I apply the settings then I go to settings I can choose the pattern which I want to use for displaying these items and for then I get to map like which view this is played on which like field of the UI pattern and when I save everything appears in the front end as the cards that we saw so you don't necessarily need to have a view mode for the entity you can also do custom stuff so for example if I wanted to show something other than the title I can simply replace the field with something else and so on I can even add a read more and everything will be styled accordingly so this is the other way you can do for rendering UI patterns like lists of UI patterns using views so the third option the third option here is the field groups how many of you have used the field groups module okay so field groups is basically like it lets you display like you can group fields together in the form and you can also group fields together in the like rendering part like rendering of the page so the example here is like say you have user profiles on your side like each user is allowed to add a quote to their profile which is their slogan and they're allowed to add a biography so when I go to edit profile here I see that I have this option of adding my full name and I also have this option of adding a slogan to my profile and when I go to see my profile I see that the slogan and my full name are appearing as a block vote pattern that I defined so how did I do this so this is thanks to the UI patterns field groups integration the module that we saw you enable it and then you go to the display settings for the relevant entity and uh here you can create add a group and in the group I choose pattern and then you can give it a name once you save it you get this slogan here that I have and so for it to work you just drag a couple of fields the ones that you want to show as the pattern and then you save it and after you save it you can map these fields like full name is attribution slogan is content and so on and once you save it the entity is rendered like this like so this is very helpful but the most common use cases from what I found like I've been using this module for like five months or so and the biggest advantage that I feel of having used this module is to create these view spaces and you know that they'll work you just build them once and then they'll work so this is the biggest advantage and then oh I forgot to mention a small catch like a small thing that doesn't work with the module so when you configure this with UI patterns as the like a display method for rows you you can see that there's no preview here actually usually it gives a preview but it should it tells you that UI patterns as views rows cannot render previews because the way the module works is like different it depends on the team to get the UI patterns etc and when you're on the views edit page you are actually using the admin team so there's no way for the module to know like discover the UI patterns so it simply shows you a message saying you cannot get a preview when you are using UI patterns as the views like display method so if you see that that's perfectly normal don't worry so let's take a look at what else we can do with this so these are like very like you won't be using them very often but this tweak tweak module and UI patterns the way you use it is like for nesting patterns or calling patterns from within a tweak file so we saw the block vote now let's take a look at the card collection here so in the card collection if i go to the tweak file you see there's a for loop which it reads for all the items which are basically the cards so it might sound like simple that here's just rendering items and why these these like for if and else statements so the reason for this is like not all modules behave in the same way so when you supply items using an array like if you made the array and you are sending the array data like i'm doing here in the preview let's see so the items preview i'm simply sending arrays of data to like for each item so in this case we get a very nice array which we can simply send to the card generic pattern and things work but when you're using views rows like when the views views plugin for rendering UI patterns it behaves in a different way like it creates a strange type of an array like Drupal render array and so in that case you have a content like key in the array so when i see that i simply like render the item content and for any other case i simply try to render the item so this is usually you won't get to this but this is for making it use compatible it's not like it is out of the box compatible with views rows but if you want to nest things like this then you have to do some cunning tricks so the way i'm rendering this card generic pattern from within the card collection this is thanks to a tweak plugin which was like i think it's introduced by the tweak tweak module and like it is made possible by the tweak tweak module and it's introduced by the UI patterns module so you simply call pattern then here you say the name of the pattern then you send it the data and as a third argument you can also define the variant so for example let's see i have a github page open here this is it okay so in here like we have a better example where you can see block code i'm sending in the data and then i'm like sending in the variant that i want to render so for block code i have two variants one is default the second is highlighted where you get a great background it's just for demo and then last but not the least you can also use UI patterns with Drupal's render arrays the render API so you simply build a render array like this one you say type is pattern ID is the pattern ID and the variant you can define one and then you send in the fields and you get like a UI pattern in the like render so this is basically the UI patterns module and there are other modules like this if i'm not wrong there's something called emulsify also which does something similar somebody told me and then so in here you see there there's an ecosystem of modules with support this kind of like a component driven design so there's UI patterns with fractal pattern and app and you even have something called UI pattern settings which i've not explored yet and foundation patterns there's also something called bootstrap patterns if i'm not wrong and you can like use these modules to complement the UI patterns module and do even more cool stuff so that's the UI patterns module i'm glad to have been like able to present this to you does anybody have any questions has anyone used something like this before how many of you think you are actually going to try this module does it look promising okay have you used component-based like have you done component-based development in any other technology like react or javascript cool that's yeah to ask we're starting to consider using this to make you know set group of related sites look similar we want to get them more standard moving so do you have any comments on a workflow of kind of getting from a centralized pattern library is this based off pattern knowledge or something like that yeah so i mean in two of the various sites okay so the question i'll just repeat the question the question is she is trying to build a set of similar looking sites and she wants to make sure like that the sites like look as similar as possible and that she can share components between sites so as a matter of fact this is how i got to know the UI patterns module because this is exactly what the module helps you do so the strategy will be to like first it has to start at the design phase we decide like make a possible list of components that you want to use across the sites so you go for like block both you go for card card collection etc and then you try to maintain an inventory of those components so the next thing you can do is you can probably put these UI patterns in a custom module which you can put on like a version control system like git etc and then you can use composer to pull in those like that particular custom module that contains all the UI patterns across projects and that way you will have the UI patterns like set like you have version control the UI patterns and on all the individual sites you simply enable that module and you will get those patterns and one more thing will be to like like we saw the separation of concerns thing the way it will work like the optimal use of it will be when you write the css for each pattern inside the pattern itself so the pattern doesn't know about the outside world it just thinks about itself and styles itself so if the styles are also included in the patterns then you when you import them to some other site you get the styles out of the box and that said there is also a module which i have not explored yet which is UI patterns pattern lab so they i've heard that it lets you do something like define the patterns on the pattern lab platform like i don't have much idea but i'm just theorizing whatever like i know so they let you maintain a centralized repository of patterns and then you simply pull in those centrally defined patterns into different projects and then you start using them just like the normal patterns so two options pattern lab and the second one is having a custom modular theme which contains all the patterns and importing them on all projects yeah i'm sorry i missed the question because i was unblocking the screen so if you've got each pattern each library has its own list number of css and you're importing them into a site well in terms of specificity users can override that yeah so you can like what i do like i recently made two websites with the same theme and same set of UI patterns and just the color is different so so what i did was like for my use case it was i added all specific styles for each UI pattern inside each pattern because i just wanted them to look the same across like both across the sites but the other way and evolving but we are adopting the use of UI patterns and the way we are going there is like we don't want all the UI patterns to look the same across all sites but we just want so what we're doing is we're adding some basic styles to the UI patterns themselves and so for example if you have a pattern which looks like an image to the one side and text on the other then the only style we have to the pattern is the part where you make them like look like the image goes to the left the text to the right we don't add any style specific components like a style specific css like the heading is supposed to be blue heading is supposed to be green and that comes from the theme so you basically enable this pattern whether it's a module or a theme then you have your own theme on the side which is custom specific to that side and in that theme you create css files which actually address the styling issues so this is how you can like have more specific styles and less specific styles in the patterns does that answer the question okay any other questions susanne any question so thank you very much i think for a person who started late i have finished quite early so thank you very much and also that's like we do trainings so here's some of our training programs which are coming up and if anybody is interested you can like join this and you can read my blog about ui patterns like i go in web.ca slash blog and i also have other articles about migration etc you can find them there and you can look me up by searching for juggaries i have a late question yeah do you have any experience with a fractal or a storybook or any of these like okay you know documented or documentation okay so the question is if i have experience with fractal or any other like storybook or things like that the answer is no okay you owe me a late fee of ten dollars okay so any other late questions yeah um so the question is that how do you integrate the ui patterns with the drupal layout builder which is now in the drupal core so i have used the layout builder for on a few occasions so what i think is like what we'll be doing to integrate them will be um define blocks block types and use display suites to display those blocks as ui patterns and then you inject those blocks into the sections for the layout builder so that way you say add section when you add a block which can be a card collection whatever and in it like you have the full-fledged block so you add the fields and you get the block instead of parallel so it's basically like using blocks instead of parallel so great so thank you very much have a good day we look up three years to the one in reference to you