 Dobro, lahko bomo težko težko, da se počuva. V poslednji seč na rečem ui patterna modu, je to, da ui atomi komponente v drupa 8 ui zanajstvo. Prvno više, ovo je pa. Jeste Nuvore, je zvednji web vsehojte, v te tudi nerevanje, v Nitorijanju, Belgijskih repubri, v Belgiju in v Fajbeni v franti, v Šekre, in v Sviselji. Svoje kljeni je zelo vse vse organizacije, in če je to zelo vse prezentacije? Zelo vse zelo vse organizacije, zelo vse prezentacije, zelo vse prezentacije, zelo vse prezentacije, which technology we are going to use in implement the site or build or deploy any site, they just want to deliver a consistent UI language for the organization. So often we find ourselves working with this kind of team that just produce just a beautiful front end piece of work and they just ask us to integrate it. So here good cooperation between Becker and the Frontend is really, really essential and this good cooperation also pass us through in optimizuje vse, in joj pače počasne vse. Už nekaj, nekaj, nekaj. Už nekaj, nekaj, nekaj, nekaj, nekaj, nekaj. Už nekaj, nekaj, nekaj, nekaj. Kaj je, nekaj, nekaj, nekaj, nekaj. Prejde se, da nekaj je zelo, da je kaj je, nekaj, nekaj. lezda in dobroreni, da bi naprejvali kažen iz tajv tanga. Tako dobroreni seveda, ko je potrebjamai, seveda, ko je potrebjava, kot smo se naredili, kot se waterspedi, lezda, kot se podreveni, ki čitaj imajo odekl. Taj ima izgubanas skupnja in ne igrašavec, ni si začelaj noga vsega izgubanja in z vrhod ко je kaj čiti. In z daljev je je vsega izgubanja in četaj pristen, četaj, in stavljšenje. Zelo, frakta je to jedno. To je v fronu. Nisem in php nekaj. Zelo, da se vse zelo. To je vse dobro komponentlibr. Zelo, da se organizuje komponente, presend nekaj, in na obrvju seksu in tako. In druga je pattern lab. Pattern lab je nekaj php-frendi. Čekaj za izgledanje. Yeah, that's what most of us in the Drupal environment I believe work with. So, we have the most support of them all. And they pretty much offer the same kind of services, like the fractal one. Well, what is atomic design? We can borrow this one from the partner lab website. It's basically a way to organize your interface, right? So you start from the most atomic component, the atoms, as they like to call them, so for example the baton, the search box, everything that is really atomic. And then you compose these atoms in something that are like molecules, so different atoms together, to build for example a search box, and this search box that finds its place into something more complex, so organism. So you go on until arriving at a template level and the pages level at the end, so you really build your UI language in this way. Now, what's the status of this in Drupal 8? So we have several options at the moment, a very valid one. One is component libraries, components module. It allows you to expose components in a way that Drupal knows about them, and you can easily load them into your tweak templates using them spacing, basically. Yeah, tweak them spacing. Then you have more complex solution, more comprehensive solution if you will, like emulsify for example, or starter kit, or pattern lab starter. They all like work with pattern lab, and they try to integrate pattern lab with Drupal to streamline your workflow. And they do pretty good job at that. So where tweak is about, like, what's tick state then when we talk about atomic design? Well, tweak aims at enhancing reusability already, so you already have stuff like include, extend or embed. All this statement allows you anyway to structure your workspace in a proper way. So you can do stuff like that, include template.tweak with foo bar. You can render the template.tweak, passing the value bar to the variable foo inside the template.tweak. This is already very good for reusability. You can also extend other templates. For example, if you have blocks in one template, you can extend that template and just change one of the blocks. So you have a sort of inheritance that's a very powerful tool as well. The tweak already gives us all the embed one, which is like a kind of combination of the two of them. So it's really good tool for reusability. How then the tweak reusability would look then or looks in Drupal. Let's say, for example, we want to style an article from a view. We want to style it as a card. So we have this card component in our pattern lab library, let's say. And we want to use it to style an article from our view. So we would do something like that. Inside the tweak template that is exposed by views, we would import or include the card tweak template. The add molecules is what pattern lab uses. So it's a way of loading. It's a namespace loading for tweak. So it just goes and if you have add molecules, then you tell tweak where to get this template and load it. And then you would basically map the variables that are available in the pattern template. So the one of views, you would map them into the tweak template variables. Pretty easy. So just do a simple mapping. Now, what are the issues here? So several issues. Well, first thing, the card component itself cannot be preprocessed. So Drupal does not have any knowledge about the card component, right? Because it's embedded inside the tweak template. Drupal knows about the views template. It knows very well how to handle that. But it doesn't know anything about the card template that you're eventually using to style that tweak template. So you're kind of separated to things, right? You're kind of hard coding the component, the UI component into Drupal. You can load assets that are necessary for the card template to render correctly by using an attached library function, which is a Drupal 8 way of doing it. But then you are using Drupal inside your tweak template. And imagine if you have an external library built in tweak, but not necessarily for Drupal, then you cannot really do that. So you need to find other ways, because that external library does not know about the Drupal specific function attached library that we are used to use. And there is also a problem. A very important problem in Drupal 8 is cache invalidation. So when you do that, you would have problem with cache. You might have problem with cache. Because the card itself does not know about Drupal object, does not pass cache invalidation, does not bubble up cache invalidation, and so you might have also issues about this. All these issues are because Drupal is not aware that you are using the card template inside that parent use template, right? So you just are coding it there. So UI patterns aims at addressing these issues and a bit more as well. So it allows developers to define and expose self-contained UI components, but as Drupal 8 plugins. So it's a way really to make Drupal aware of your UI components, exposing them as Drupal 8 plugins. Then it allows providers to reuse the components as a drop-in template for panels. A few groups use this template. So you think about the mapping that you saw earlier. It will give sidebuilders a UI that will make this mapping much easier at a configuration level and not fiddling with the TIG template. This will reduce a lot your TIG templates that you need to use in order to integrate these components, of course, because it happens at a configuration level that sidebuilders and developers can work with. Then since components are exposed to Drupal 8, then Drupal 8 knows about them and knows to treat them properly so we can preprocess them, we can have theme suggestions, we can preprocess per context and stuff like that. And then most importantly, maybe UI patterns does not mean to replace the existing solutions, but it wants to be a complementar tool to those solutions. So it does not really replace if you use component libraries, for example, it works with component libraries. So you can use namespace that are provided by component library inside your pattern definition and it works pretty well with that. So what's the architectural overview of the module? So basically, here it is, basically you have on the top the first layer are the UI components themselves. So these UI components are managed by your pattern library of choice. It can be fractal, it can be pattern library, it can be anything, it can be the YAML UI pattern one which we'll see in a moment. So these UI patterns then reads the pattern definition from these template libraries and pass them through Drupal. So it turns basically that the UI components that are Drupal agnostic into Drupal plugins. So the Drupal knows them and knows how to process them. And then it pass that to the Drupal theme layer. So it really is just a bridge between any kind of component library you might want to use and the Drupal word. That's what the main idea is. So here you have different components again. This one is what is already bundled in, we'll see it in a minute. You can have several component libraries that provides components to UI patterns. Interestingly enough, you can have more than one at the same time. So you don't have to choose one, but you can have several. For example, if you have fractal but you still want to use atomic design for your site-specific things, you can still use another one that you maintain. So you can have both. So you have the main one that is maintained by another theme and another one that is per project-specific is maintained by you. So it allows you to do that as well. Basically it takes all this information and makes it consistent turning it into plugins and pass it to Drupal. So how you define patterns. This is one way of defining patterns. For the moment it is the only one. But the plugin architecture of UI patterns allows this to be changeable. You can define patterns pretty much in whichever language you want. But for the moment it is YAML. Definition can be placed in files that are name of the pattern or name of the module or name of the theme dot UI patterns of YAML. This can also be changed. So you can choose if you are comfortable having UI patterns you can change that. Where the patterns are depends from your discovery methods so you are going to you have a lot of options there. The patterns are converted into standard Drupal 8 render elements. This is pretty powerful. So when you expose a component to UI patterns these patterns become a render element for Drupal. So you can render the pattern into standard render array type pattern. Then there you would pass ID of the pattern, the fields and all the mapping. And this becomes really, really powerful because this makes it consistent with all the Drupal basically core. And it exposed patterns in the Drupal theme system in the following way. So basically given the media pattern ID for example you would have the UI patterns that will make available a pattern media function theme function and it would expect the pattern media tweak file to be there to be rendered. Of course we are in Drupal so all this is completely customizable. We don't want to impose a specific naming convention a specific way of doing things. That's the point of it. So pattern definitions are kind of flexible as well. They can become complex depending from your use case. If you just want to expose a pattern in the system maybe you are just interested in saying this is the hero pattern and these are its fields. So the image, the title, the subtitle and the rest I don't care. Or maybe you want to be a bit more verbose because maybe you want also to use those metadata as documentation so you can say the image pattern as an image label label called image description maybe so you can also have this kind of more elaborate pattern definition pattern definition file can contain one or multiple definitions as well and the definition engine will understand which one you are using. Then pattern template is the most common thing that you ever seen so far is just a normal tweak template so you just have the fields that you see here above pass through to the final template and then finally rendered so this is for example the hero pattern. Now so the question is now how is this better than simply using tweak because we didn't introduce anything new at this point this is pretty much what tweak can do already. The answer is really the droopa theme layer so since patterns allows to attach the metadata to tweak templates then it passes this metadata information to droopa theme layer and droopa theme layer can then do a lot of things with this metadata so really pattern as a metadata engine one of its functions really that attaching metadata information to template which did not have such a thing at the moment. For example, just exposing which fields are the fields that the template is rendering this is already a very important information and if this is structured in a formal way then the droopa theme system can do something with it so that's what pattern is basically this is the first layer now as I told you earlier we are in droopa world so we have to be fully customized every workflow is different every organization is different so you can customize the definition by having extra ID keys so you can change the theme hook if you are not comfortable having pattern underscore ID you can change that you can change the template of course if you are not comfortable having pattern dash name of the idea of the pattern you can change that as well or this is the most powerful thing you can use the use property when you define your patterns this use property allows tweak to load whichever pattern it's exposed to tweak and this uses tweak name spacing so the add molecules or the add my module these are like tweak loading mechanism that are in core in droopa8 and here is where it gets for example complementar to component library module because the component library module allows you to define this name spacing so that you just you can have both you can have your own name space for your own components and then you can pass this to pattern so you can tell instead of going and looking for the pattern dash hero dot html dot tweak please use this template instead which leaves my pattern library so this is a way to integrate external libraries can also be defined locally so one of the thing that we saw earlier one of the limitation was that you had to kind of code the library loading inside the template file and you can not always do that easily because maybe the template file is maintained not by your team but not by a droopa team but by a fractal team which is outside your team so you cannot do that so by doing this you can actually attach libraries to your pattern but not only that you can define them you don't have to maintain libraries in two places you don't have to maintain libraries in the library dot html file you can just have an atomic approach to define libraries as well by defining them where you define the pattern so you bundle all together in really an atomic fashion inside that the assets that the libraries refers to can also be bundled in the same directory where the pattern is so if you see there down below it's in the same sub directory where the pattern is so you can really glue them together and really have an atomic approach to this then since patterns are exposed as render objects basically render element you can render them easily like that so you can just say type pattern ID the ID of the pattern fields you just map your fields there of course you can pass whatever renderable thing you want because a field can accept a render array so you can pass anything, you can pass blocks you can pass anything you want you are in the render array here what happens here is that at render time the render element object will load well we will ask the plugin system give me the information about the black quote pattern and then you will know which fields to use and then we will map the fields and we will finally render it and then from here the natural evolution is this one so we want to be able to do that inside our tweak templates that's really easy at this point because once it's a render element so I just deal with render arrays then I can have this so this is also supported so inside your tweak templates you can actually render the block quote or whatever pattern you want by just mapping fields there we use it also for layout for example if you have a very complex layout you want to reuse sometimes we put this in the page.html just mapping stuff so we can reuse parts of the layout as given by the external libraries for example the fractal team is working on a header we just include a header and expose it as a pattern and then do this then of course since the Drupal theme knows about it then you can have pattern suggestions this depends on the context you use the pattern in it will come to it a bit later but this is just to say that you can have different preprocesses depending on where the pattern is rendered so if you render a pattern into a view you will have one preprocess function that you can call if you render the same pattern into a node there will be offered to you another preprocess function so you can massage the data properly depending on where the pattern is used basically that's very easy to do it with this architecture now so far we have just seen how UI pattern works so it just to recap provides it turns every component into Drupal plugin by doing that allows Drupal to use that as a render element so you can use render array, tweak integration is very easy everything is cache aware of course because it's a render array and all that the point is that UI patterns really need a pattern library in order to function so you need to have your patterns somewhere but maybe you cannot you don't want to use complex pattern solutions like pattern lab or fractal for any reason so because of this UI pattern modules actually ships with a component a module called UI patterns library which is this block here so it's bundled inside the UI patterns module and expose patterns from your modules and teams it keys you an overview page where you can just screen your patterns and showcase them and it's really like a pushman fractal or pattern lab so it's very simple solution for having like a pattern library if you don't have or want or can use fractal or pattern lab so how does it integrates with UI patterns very easily it just provides an extra an extra property on the pattern definition object which is a preview so this preview is basically test the UI pattern system what content to use when you preview the pattern so for example here we are having like a block quote pattern so you want to have like the preview of the quote is like this text here and the preview of the attribution then that's the pattern object and this is what you see basically on your UI pattern overview page this is style of course I mean when you style the module you just see a very basic blue thing but then if you style you can get to that kind of thing very pretty easily so you see all the information is presented to you you have the title, you have the description you have the fields that the pattern accepts so it's pretty much a bit like what fractal or pattern lab do it's like just a simpler way just to have something running and then you also have a preview of the pattern itself using those content that you defined here in the definition so if you have a preview is that then it uses this in the preview here now the preview property it can be anything renderable so it can be a string or it can be itself renderer element which means that we can pass patterns inside the preview as well so if you have a pattern and it uses an image and you want to use that pattern as a preview for another pattern then there is another render element array which is called pattern preview which is very obvious what it does just take the preview pattern and then runs it so if you have an image as a pattern then you can use the same pattern as a preview of another element so you really kind of compose them same way really as you do with fractal or pattern lab for that matters like either an image, theme image that's totally acceptable because it's a renderer element or it can be type pattern preview ID image and then it just renders the image so it goes and fishes the image definition takes out the data and renders it now you can also organize patterns in subfolders with the UI pattern library so this helps you to keep your pattern library clean and nice so here it is for example you have the theme .UI patterns.yaml here is where you define all your patterns or you can also have definition per directory so both stuff works so the system will just screen all the directory scan all of them then just take the definition out of it so let's have a little demonstration now just to see a bit how this one works in real life alright so let's go here this is a site that I have set up yeah so actually if you go on the model page on the github there is a readme and to do that is pretty easy you just have to do composer install and to build the site for you this site, the site that I myself use for developing the model itself so it's really easy to have this so this is the pattern library page already styled of course so I use a bootstrap because it's very easy to manipulate so I just styled it to be a bit nicer for the presentation and then basically you can see in the demo theme this is how the UI patterns.yaml looks like so I have all my patterns defined here for example the block quote as is a block quote with this description the fields are the following so you give the type, the label the description, the preview the only mandatory field here is a label the rest you can also skip this is just for documentation so for example the block quote is this one here so we have the information here now patterns can also be so then the block quote pattern as this template here very easy simple as that then patterns can also be defined inside subdirectories as I said earlier so for example a button pattern can be defined inside the subdirectories next to the tweak template itself so you can have a button like this description then the fields title URL and then that's basically the template for the button or the media component the same thing so you can have the media component defined into the yaml file next to the media tweak file you can attach libraries as you can see here these libraries are like fictional libraries they are not actual libraries exposed by UI patterns so you can bundle them all together here and then of course the assets are also next to the template itself so you can really keep it well structured yeah that's pretty much it I think ah yeah forgot something what you can do also is of course to style the pattern page itself so the overview page so if you go here then it's very easy to override this meta information here and that's pretty much it so you can style this kind of thing you can adapt it to your theme of course and you can override the default one now sorry jumping a bit now let's continue so here it gets interesting how you expose your pattern via third party library so let's have a look like I have fractal or pattern label can I just use them so this is the situation here I want to integrate external libraries this is pretty easy to do there are a lot of people doing it already now you just have to basically include inside the directory of your pattern sajamo file and this will and then place the directory of your library inside your theme and this will work so pattern will will basically detect them and expose you to these kind of patterns but we can also have a more advanced way of doing this imagine if you don't want to expose patterns with yaml files for example or you want to use a different format maybe you have jazon so all your metadata is already there but it's in jazon so you don't want to use yaml file, you don't want to convert that you already have a place where your fields are defined but it's in jazon because you're using fractal you can do that because at the end what pattern really are are just plugins so each component is a plugin so you could define each component manually by actually creating one class per pattern or better you can ask a deriver class to do that for you that's how Drupal 8 plugin system works so how it works first of all you need to provide a new custom pattern plugin and it's very easy just this class you don't have to do anything just extend the pattern brace class add the annotation with the id of the pattern and then deriver the class that you won't use as a deriver so just an empty class for the moment you can of course override metals from the base class etc then you have to provide a custom deriver class and the deriver class just has to implement two metals basically get patterns and get file extensions so imagine if you don't want to have the yaml files or you want to have another or you want another extension you can do that there this will scan directories for the moment we are just extending the abstract yaml pattern deriver which is the same deriver that the pattern library module uses but that's just as an example you can also remove that class make your own deriver and just really provide your own parsing metals and stuff so in this instance we need to build pattern definition objects so as soon as you return from the get pattern metals an array of pattern definition objects then all the pattern system can take over and it will all work so let's have a look at this I have it on the other side here for example have a look at this one this does not look like anything drooper I guess just a tweak file we just did a small tweak file here then you have your assets here the css and js the button is the same and then you want to just use the yaml so not know your pattern just the yaml file to describe your components you can do that this thing is pretty much drooper independent apart from this that of course is drooper dependent if I had more time before the presentation I would have done also that but I didn't have time so you can actually swap that as well remove the use and be the full the driver that actually parses whatever location in the disk you have for the moment just to for a quick sample just to reuse the yaml driver so that one is necessary but you can also remove it you can have that in any way you want then the only thing you have to do is the custom pattern here so that's how you implement pattern plugin and then that's where the magic happens the driver so for the moment this driver just scans this directory templates where the patterns are and creates this object here pattern definition from that moment on the pattern ui pattern system takes over and you can have everything from now on you can have the mapping you can have the rendering as render element etc and then get file extension it tells you which which extension you want to use that's pretty much it alright so yeah so then once you do that then you have this kind of thing so you can really go on your content for example the title here it's an article if you go manage display that's you can see your patterns here as a layout this actually brings us to the next topic which is how you actually use this with Drupal because until now we've just been defining patterns but apart from being able to render them into tweak templates or render elements we didn't do much with that but where actually it's getting interesting is this part here so once patterns are plugins so Drupal is aware of them then we can have integration modules and this is the interesting part because then you can now turn patterns into layouts into view, style, plugin into display, suite, plugins fill groups, anything and from this point on is just about mapping the only thing that we have to do here is just about mapping source data to destination fields in the pattern so we have for the moment four modules that are bundled inside the UI patterns module because I would like to explore that and have one project per module but for the moment like this so if you download the UI patterns module you find all of them bundled together and how does this work we have another plugin that UI patterns module exposes it's called the source field plugin so the source field plugin what it does is that it understands the context where the pattern is used and it provides you with source fields for example if you use a pattern in views it would understand in which view you are using this pattern get the fields of that view and provide those fields to you for just an easy mapping to the destination fields same for display suites or any other things so basically the source field can be mapped to pattern destination fields they are context dependent so they really are aware of the context they are executed in they are very extensible because they are just another plugin type so you can provide your own source field plugins to have like your own map field sources if you want to expose blocks for example two patterns you can do that very easy then you can just implement a source plugin for example this is how the view source plugin works so you just have again a plugin definition you wrote some information there and it provides you with source fields so let's have a look now how this actually works we go back on this side here and we check that so we are going to see the different things so first of all we are going to see we want to style an article with some metadata information for example the author and for that we want to use we want to use this pattern here let's go and check it out the metadata pattern we want to use this pattern here so we want to use this one we want to just use this template dropped in our nodes rendering thing and just use the author just meet publication date and then categories that's all we want to do so to do that in the DS module it exposes the source fields plugin for display suite so we can do the following thing we can go and manage display ok so you see here metadata this is actually a field group so it's another module if you click on the settings here you have the metadata here these are basically the patterns that are exposed to UI patterns you can see here the plugins the field source plugins that are available in that context in the context of a field group they are fields plugins, display suite plugins so these are the actual node fields and you can just have simple mapping so I want the tag to be injected into my categories you want the post date to go in publication date the last modified date also publication date so this is basically the following thing here right? if we change so the full rendered field is really injected into the pattern directly so you didn't have to touch any template you just use this pattern and it's done we can also for example add the labels to the last modified fields for example the post date of the last modified we add the labels here if you refresh the field is really rendered with all this format what we want to do now in the next iteration of the module is having settings per mapping so per source field plugin so that when I go here each one of them will have settings here so a little gear icon that you can really set what you are gonna map these settings will be depending from the source plugin system it's quite powerful because for example imagine about having post field plugin so you can inject tokens inside pattern areas, pattern fields so you can get pretty advanced or blocks or anything like that so this is one thing then we also have other parts of the nodes are actually styled using patterns for example this is a paragraph actually so if you go here, you can see here a little paragraph see the jambotron paragraph this is with the jambotron component and where I did that so if you go on paragraph type and then you check the mesh display here you see that patterns are also exposed as layouts so you can use them as layouts for your panel pages for your anything that supports the layout discovery module is also working with patterns see here, select a layout all your patterns are available as layouts as well put the title into the title field of the pattern put the subtitle of the paragraph into the subtitle field of the pattern and the result is just what you expect basically this and the same is for buttons for example imagine this typical example is I want a link field to become a button so how do I do that again since we can just go here on the links fields and then we choose a pattern field template and you get the same interface you can map components of the field the link field to destinations since this is at the link field level so the field level you get other sources here so you can map the links URL into the URL and the title into the label and then you get basically the pattern you are styled nicely here same you can do for views of course so if you go on the articles you can get this view and this one again is yet another that is integration so you have like the pattern row display plug in and there is the same thing so media object you just get the same stuff so you can map fields of the view into the pattern thing and then you have it just styled everything is loaded think that when that happens so all the libraries that you define are loaded everything is bundled together so you can mark up basically alright so that's it I think we covered everything alright so what's the future of VI patterns so basically we had some very courageous early adopters and I want to thank them because they were really really great in testing the module we got a lot of feedback people start to use the module in really crazy way which is a very good sign I think but it also calls from a responsibility to make the core smaller and more flexible than possible because I want to make it like really really smaller core so that our own responsibility would be to just have the patterns working as a plug-in system basically and then all the rest is then delegated to contribute work so I want also to explore the main module into separate submodels because this also will increase maintainability for example if you have an issue with the field group module that blocks only the UI pattern field group module then it is not a problem for all the project but just for the subproject we want also to have a more extendable pattern definition so to make pattern definition more flexible so that you can add your own values in the pattern definition so you can have I don't know an extra field extra information that you need for your own business domain field mapping settings as well so as I told you earlier when we map we want to have their settings for each mapping so that things like variance subfields multiple fields can be provided in separate modules so we don't need to take care of that so that's the direction that we are giving to the module the module is currently in RC1 so we want to tag 1.0 soon enough then we see that before or after the explosion with all the modules we will see but anyway one last thing so this is just food for thoughts basically what we have been doing until now is just like creating a metadata system so describing a way of formally describing our templates that's all it is really all the effort that we do are in this direction so component libraries like Flutter, pattern lab component library module our module, they all aim at the same direction of describing what a piece of presentation logic does, that's all so we are wondering if not to have then just a separate component that is not really even a Drupal component which would be called for example a twig annotation so why don't we use a notation in twig and then we describe what the twig template does and then the UI patterns can just load this information from within the template itself and then just do whatever it wants to do and then of course from here the next natural step is why do we still need the hook theme function if we can do this if every template can describe itself then we don't need the hook theme anymore we just we can do that but they are just like food for thoughts we want to play a bit with this stuff maybe having just like a completely independent component that just parsed twig and returns a notation I just used a notation format that we are all familiar with of course, I mean there are two levels of comments there of course but that's just because we are familiar of seeing those annotations on top of classes but that doesn't have to be that format of course when we do it for twig we can also use yaml or anything it will also serve purposes of documentation of the template so maybe it's also this will increase adoption from non-Drupal ecosystems as well so that's really just think about it, I think it can be a nice direction also for the future and so we get rid of the hook theme finally now UiPatt is an ecosystem I want to thank all these incredible contributors that just used the modules and got really excited about it and then just started creating foundation patterns that integrates the drup foundation with UiPatt and so you just get up and running and you have also a little theme that does it with bootstrap component combo the Sheila Drupal theme it was one of the first adopters so big thanks to all these guys really great community so how to contribute to the module basically well, first of all read the docs so we are putting our effort of maintaining docs, it's very painful but okay, so please read the doc first then if the issue is still there we can issue clone from the repository just run composer install this will create for you the build site that you can just use and fire pull request on the git repository then we also have two real time conversation spaces one is gitter so if you go on the gitter page just click on gitter you get it and the other one is luck drupal trick is luck drupal UI patterns we are all there so if you want to join please do that there so this is an organizational information from drupalcon and that's it remember to leave your feedback, thank you if you have any questions just please use the microphone so that we can record them this looks really awesome so one question what are these fields and so far what I understand is that every field is like a markup a piece of markup so what if you want to have one field like an array or something or maybe just a CSS class or something like that so at a certain moment so how we use this we do map with the UI but then there is always a moment where we go with the preprocess and we just massage the data and then we use preprocessing the preprocessing is quite nice because as each pattern is aware of the context where it is rendered the same pattern is rendered into a view or into an entity display mode then we get different kind of preprocess functions that are run so you can massage data and then provide so you can preprocess this kind of data but it does not do it automatically I mean if you have a pattern that displays a list of something and the list items should be maybe field items then this would be maybe a field but the field would require an array so if it's renderable if it's something renderable then you can pass it directly but if it requires some manipulation then you need to do it in the preprocess manually we can have a look at your paper anyway yeah I just wanted to say I'm really excited to see solutions like this come up in Drupal 8 and I have a ton of questions just one and that is you showed examples of taking a field and then putting into a spot in the pattern is there a way that you can handle multi-value fields where you can then have wrappers around each field in a number individual field so that's exactly so we don't support it now so the UI does not support it now but the architecture has always supported it so we always thought about this that would be the final goal and the final use case so the way the configuration is saved allows for this to happen at the moment you can do it for example here you see you have two sources to the same destination field so you have both the post date and the last modified date so you can swap them you can put one after the other so you can do a little manipulation already but we want to improve this thing but this is just a UI effort I mean once you have the architecture this is really a UI effort what you want to do is that instead of having the predefined dump there with all the things you can do you can just choose I want this source then from this source I want to use this source plugin and then this destination so it's fine but it's just a lot of UI work which we didn't have time to do but that's totally possible it's where we want to go that's fantastic, thank you thank you very much for this approach it's really useful for consuming component libraries my question is about API so when you talk about mapping thing that patterns is kind of a mapping between regions and data it's pretty the same as layout API working now so the good thing could be to use layout API instead of custom pattern API because it's pretty the same there is a lot of overlap that's why we see really we are all going towards the same direction which is basically describing templates in some sort of formal form that then the layout system can pick up we can do that not all context are exactly the same so we still need some tweaks so you cannot really apply that to everything but we have to be careful not to overlap with it it's something we need to watch closely there is a module about field templating, field layout experimental module and that then it watch out because probably it's also overlapping here but if we arrive at the point that mapping system and replace it with the layout I mean I'm all in favor of it it's where we should go we already did it actually when we did the layout discovery thing we are also like this kind of operation of removing stuff from UI patterns okay other questions, thank you guys