 Okay, I think we are pretty much ready to start. Thanks everyone for coming. It seems there's quite a few people trying to fill this room. It's amazing. So how many of you is front-end developers or teamers or quite a few? Yeah. How many of you are more of back-end or PHP developers? Oh, great. So this presentation will be mostly about how can we leverage most of the team system and the render system to make teamers happy while they are teaming. There is useful bits for the teamers and front-end developers also, but there will be lots of PHP in this presentation. So if you don't feel comfortable with that, I'm not offended if you want to leave the room. So feel free to do so at any point. Let's figure out my clicker. Yes. So my name is Lauri Eskola. My funny accent comes from Finland. I'm also a Drupal team system called Maintainer. There is five of us in total. I work for Finnish Drupal agency called Adroid. And I'm quite addicted into adding new kittens in the Drupal core. And that's just the competition. How many mentions of a word that you like? Are you able to add in Drupal core? Yeah, it's comments or mostly it's about test strings in the tests. You're testing if kitten is still a kitten after something happens. Yeah, so I also like to break bar thick. I've done that twice. I fixed it both times, but that's also what I that's one of my hobbies. So this is going to be the part when I'm going to be talking about teams and it's going to last maybe three minutes. And after that, we are going to move to the module level, but I wanted to explain this because this is very important. And this is also very confusing for many people. So in Drupal 8, we have new teams. We have two of them added in there. The weird concept of teams in Drupal 8 is that we have stable, which is a team. It's a base team as a default team. So if you don't extend any team in Drupal 8, you will end up using stable, which is a team. Instead in Drupal 7, if you don't extend the team, you don't extend the team by default. You can override that by setting base team false when you don't have any base team. But stable is being used by default. We have another base team, which is called classy, which is the stable, but with classes. And then we have three of the teams that we consider as a Drupal product, which is Bartik 7 and Stark. So Bartik is the default team that you see when you install Drupal. 7 is the default administration page team. These three teams are marked internal. They are part of the Drupal product. And you shouldn't be extending them. So if you want to create a team extending Bartik, you should instead copy whatever is inside Bartik and create a new team out of that. Because in Drupal 8, now that they are marked as part of the Drupal product, it means that we can improve them. And let's say if we want to change something in 7, now it is possible during the Drupal 8 lifecycle. If you want to create new button styles or if you want to create new stylings for the field upload element, we can do it in 7. And the reason why you shouldn't do that, why you shouldn't extend these teams is because if we change something in these teams, it might break whatever you have changed in your team extending them. But you're allowed to copy them and create your own customizations based on that. So this is how your teams in Drupal Core looks like. It's getting quite complex. We have now four levels of markup. So the light blue ones are the ones that you shouldn't be extending or using as a base for your markup. The dark blue ones are the ones that you should be using to create your markup. So Classy is the one with the classes and stable is the ones without classes. Classy extends stable. So if you create a team like 7 and Barthikar, they are kind of like the teams that you will create in the client project. They are in the chain of extending classy and both stable. So just to make it very clear, how should you be choosing the team? So if you want to have classes by default, your option will be always Classy. If you don't want to have classes, then you have two options. You can either extend stable or core. Stable has Barthikar's compatibility that core doesn't have. So if you don't understand what is the difference, then you probably want to go with the stable. So we want to be able to make new changes for the markup and pre-implement the markup in between the releases. And then whenever the next release will happen, Drupal 9, we will just remove whatever is inside stable and whatever is inside Classy, and that will be the new markup. And then we start again with the stable and classy from the 9.0. So that's pretty much what I had to talk about the teams today. Let's proceed for the team system itself, which is the main topic of today. So this is the pipeline kind of like ideology we have in the team system. So every time you print something, it goes through these specified steps. I'm going to be using lots of code examples when I talk about the team system. All the code examples are available on my slides that I'm going to be sharing on Twitter, but also in GitHub, there is a whole functional module that has these bits of code inside the module that you can download and install on your site if you want to have some sandwiches. I hope you are not getting too hungry because it's the before lunch session. I'm going to be talking a lot about the sandwiches. So the first step of the team system is the hook team implementation. That is the pace where we kind of like set the rule set. We set the default implementation of this thing that is going through the whole pipeline. We can set some additional metadata that affects the way that specific piece is being managed during this trip. But the most what you want to use it for is just to set what kind of data is going to go inside this pipeline. So I'm creating in the hook team implementation a new hook team implementation, which is called sandwich so that you can call inside the controllers hash team sandwich. Then we specify new item, which is called variables, and that sets the default variables that will always exist in that pipeline. The reason why we create this is because we want to be able to trust in the PHP and in the template that every time I do something at least these things will exist. So even though the controller that creates the render array doesn't add a specific piece of this thing here, it will pick the default value. So if you're pre-processing this data or processing it somewhere, you can always trust that the name, bread, cheese, veggies, protein, and condiments will exist and they are the correct type of data. So in here, you can see the hash name. It is the same as that. That is a very common question. Why do we have the hash? Why do we prefix all these variables in the render arrays? Because it probably doesn't make any sense and it doesn't make any sense. It's just a rule that we have because in the render system, we try to render a children render arrays and if it doesn't have the hash, we consider it as another render array that is inside this and we try to render it as a children render array. So let's say if you have a page and you have the regions inside the page and the regions that you have in the page render array, they don't have the hash before. They are not prefixed with the hash. If you render the wall page render array, it will render them as the children items of that render array. So they will be rendered separately with their own rules. So when you have this hash prefix, this will be passed into this render... this hoop team item and you can use it in that pipeline. The next step after you have created the render array that happens is the team suggestions. And team suggestions are useful because they allow you to create logic what kind of processing should happen depending on different kind of rulesets that you can define in this hoop. So the most common and most well-known use case of this is probably nodes. You can override the default node template for article with the node that's this article. That is called team suggestions. And someone might think that that's some magic. It is magic, but it's magic that you can use yourself for your own hoop team implementations that you create. So in my sandwich module, I have created the sandwich hoop team implementation. And I want to create a team suggestions for that based on the name of the sandwich. So that each of the sandwiches could be separated and they could have their own pre-position logic and their own template that you can override for specifically this sandwich. And that happens simply by adding a one line in this hoop. You simply just return an array or a string if it's a single item of the team suggestions that you want to create and it will just take the variable from the variables, then the name variable and create a new team suggestions from that. And then it will override the default option if someone has specified a template, which is called that. You are also able to modify the already created team suggestions or create new ones after all these has been gathered together in the outer function, outer hook. There you have all the team suggestions available from here and you can create your new ones or you can remove already existing ones if you don't want to have some of them, maybe in some specific case or whatever. These might be very confusing because that is something that works by magic, definitely. But you specify it to be loading something and it's very far away from the end bit of this and it's very difficult to configure because it can happen in multiple places. So there is a tool that you can use to simply just show all the possible team suggestions. This is actually also available in 777. It got backported from 788. So you can use this in 777 if you are still working on 777 size and it simply happens by adding a team debug variable inside your settings PHP to true. There is an example of that in the new versions of 777. So you can take a look on the new default settings PHP and see how it's done in 777. In 788 this happens in the services.jammel. So this is a specific services.jammel on your site installation and there you just tell the three that, okay, debugging should be on. And what happens when you turn it on is when you are using triple, in the markup, when you look at that you get this kind of bits of text inside there which explains to you that, okay, now we are outputting a node. For node you can use all these four different templates. You can override it with teaser which is a specific for the view mode but even more specifically you can override it with article specific template or even more specifically you could override it with specific view mode and specific node type. You can see all that in this team debug output. You can also see here which template is being used right now the specific location of that template which is very helpful because as I showed a little bit earlier that there is quite a few places where VR is now placing all these templates. It will explain you, it will explicitly specify which template and which directory is it located. So you know if you want to create this article template that you probably should be copying this template as your base without having too many modifications for you. For that. Let's say if you would have a template coming from Classy and you would copy the one from stable it wouldn't have any classes and if you've already built something on top of that it would break your things. So it is very important to take a look which template are we using at that point. After the themes of distance we get to the preprocess functions. In the preprocess functions you can modify the variables before they are given for the template. I suggest not to use the preprocess functions especially when you are creating your own preprocess function your own hook theme implementation. So if you create it the hook theme yourself I suggest not to use the preprocess functions. Preprocess functions are something that we probably are going to redefine before Drupal 9 very heavily. So these are not going to exist as they are right now hopefully because we didn't have the time to figure out what we are going to do with the preprocess functions between Drupal 7 and Drupal 8. But what you can do in the preprocess function is to just simply override the variables that are inside your hook theme pipeline. So here you don't anymore have to care about the hash prefix. They don't exist anymore here because it's not relevant at this point anymore. So the first thing that happens is the template preprocess function. The reason why it's not called hook preprocess function which is here is because there can be only one instance of this function. And that is the initial preprocessing of that template which means that you can provide one preprocess function that 99.9% of times exist in the module providing the hook theme implementation. And then the other modules could trust that that preprocessing has happened before we get there. So this will run always before the hook preprocess functions. If you would create the hook preprocess functions in the module specifying the hook theme implementation, it would mean that the other modules couldn't rely that that hook has been run before them because it's only based on the module weight instead of anything else. So in this example, I'm first overriding the name in the kitten then I change it in the Lama on the preprocess function and then I have even a third implementation which is the specific one for a chicado. So if this would be a chicado sandwich that is being printed the name in the template that your outputting would be Flamengo and so that is the order they are being run. After the preprocess functions just to clarify you can see here there's two levels but this level is only the one function that you can specify. There cannot be multiple instances of that. These ones you can have multiple ones in different modules and different themes. After that we get to the template and here we have all the variables that has been specified in the hook theme in the theme system pipeline. I will explain a little bit more of the tweak a little bit later. I'm going to explain quickly the render system that is built on top of the theme system that you can use to render system has been modernized a little bit for top light. So it's a little bit more modern than the theme system is. It's a little bit less based on the expectation some things happening and also it uses some modern systems like plug-in system so it's way more modern than the theme system is. And how it works this is a very very confusing picture because the easiest way to put it on one slide. So what happens is that when you create a render element probably many of you have used let's say a form API when you say hash type and input or text field that is a render element and it will create something inside here it will provide a default value for the theme system and that will print it and then it will give it back for the render system. So what happens is that we here we pre-define the render array in the render system so this is used to create a render array we put it into the theme system in here which outputs its back to the render system where you can still modify whatever the theme system has done to it. So they are very tight together here is a render element so I'm creating a render element called sandwich which will provide some default values for my render array so we want to always attach this library for the sandwich we always want to have the same bread we always want to have the same condiments so you don't have to specify them every time here that is one of the good points of using render element to modify its kind of default values but what are the even better improvements or better things in the render system is that you can define which function should be called to alter or modify this render array and there you can do your modifications in the set order that you want to have if you want to create your own prerender function inside a theme or a module you can just use the element info alter and add your own prerender function prerender callback here and then you can do your altering in there that is really powerful you can use it for really really complex things like form API is built on this obviously it takes some time to get used to using it but it makes sense to make the effort to try to use it because it's very powerful and it allows you to do lots of things a lot more things than the theme system allows you to do so all these code examples that I showed you can find from this github repo and you can install it on your template side if you want to and play around with the cool sandwich menu that you have in there you can even do pull repers if you don't like the design of the page it provides so let's proceed for the tweak tweak is probably something that excites many of you hopefully I'm going to be talking a very basics more of like I am creating a module what do I have to know to create the default template in my module so in three sentences is that if you want to say something use double score brackets like this if you want to do something use the score bracket and present if you want to comment something it's the score bracket and hash so this is the basics of tig in probably one slide but I'm going to go a little bit deeper than this so let's start with printing so whenever you print something inside tweak there's a little bit of logic attached in the printing something so let's say if you are accessing data inside sandwich called cheese so accessing data in tweak happens almost every time with this one syntax it says dot and whatever you are accessing inside that variable so let's say when I'm printing this cheese inside sandwich it could be an array item in an array it could be a property inside an object it could be a method or even a method with the get or is method conventions which makes it very powerful because you only need to care about this syntax and whatever you are printing you always use the same syntax some people might think that this sounds slow this is one of the tips that I have for you there is a tweak php package that you can install on linux instead of compiling the tweak files into php it will compile some bits of it which is especially this bit into C which will make it a lot faster so if you are having problems with the slowness of tweak you can install this and it will make it a lot faster it doesn't require any configuration it's simply that you install it and it will work automatically so for that reason it's very useful debugging variables in tweak right now the best way to do it is install devil and kint modules kint comes inside devil module so you only need to download one package and after doing that you can use a kint function inside the template it will output all the properties of an object if it's an object, if it's an array you will get this kind of a list of all the items inside the array you will have a tab for the available methods if it's an object which has methods excuse me it's very powerful the problem with this is that there's lots of protective properties so if you're a femur it might be a little bit confusing there is data but I can access it anyway you just have to find the right methods and it's difficult so I hope that we can find a solution which will create simply just a list of things that you will get and whatever is inside it so that we could hide all the protected values also this doesn't take in account all of the get or is method convention things so let's say a node has a getTitle method so you could just say node.title but kint only shows you in the available methods getTitle so you have to know a little bit of how it works before you can use it so it would make sense to have a more powerful tool for that so instead of having only simple functions we have also filters which are meant to manipulate a variable or piece of string or piece of an array so what filters do they simply take some data inside them and return it in a different format so let's say a length filter takes this text as a parameter for a function and returns it in different format there could be a filter called uppercase which would transform text into uppercase text or there could be a filter that translates a string there is a defilter which translates the variable which means that you can put your strings inside the trick template and what it does it simply takes whatever string is there as a parameter for the function and then it returns it in different format just like it works in PHP so filters has to be defined in a trick extension so not all the PHP functions are available as a trick filter you have to create one yourself you have examples online how to do it it's quite simple there's also functions which are quite a lot like PHP functions but they also have to be defined to be available inside a template one of them is a touch library that you can use just to simply attach libraries to a template probably some of you have traveled with the show and hide functions you might not be able to use them at all because of when you call the hide function in a render array it will change the state of that array it will mark this as printed and if you want to render it multiple times in different places it is still hidden and you might be a little bit confused why is it so but it's just marked as printed because of the hide function has done so so in .id instead have a simple filter that is called without and what it does it simply takes an array and removes these array keys from that array and returns everything else except that so it doesn't change the state of the array so if you print the content for multiple times it will print everything except the ones that you have specified do not print during that time Tric has also some pretty cool logic to not avoid duplication so now that I showed you that you can create a overriding template but you don't always have to override the wall template you can just override a small piece of the template so you can create this kind of a trick block inside a template these are not they don't have anything to do with triple blocks but they have the same name which is confusing but they are a trick blocks which can include let's say this has a h2 I'm a link and if you want to override it for the front page on the front page we want it to be h1 we can just simply say that extend this template an override block title so here I have the dots kind of like visualizing that there could be lots of order markup in the template but you don't have to include it in the overriding template and whenever you change the order stuff in the template it will change on both of the places there's also macros that are kind of like functions but they work a bit differently because you have to import them but what I use macros for is let's say if I need to create logic based on how a wrapper is being what kind of wrapper does something have you can use the macros which is a function and the reason why I do it like this instead of creating an if items count then add a div and else add a span is because then I need to have this logic in two places in the beginning and in the end that breaks the code highlighting of let's say if you use sublime or phpstorm the code highlighting doesn't work anymore with that because it doesn't know what's happening also you might really easily break these if-else's if you changed the one in top you would always have to remember to change the one in bottom which could very easily lead in the broken markup this is probably the most difficult part now to understand this is very complicated stuff that I'm going to talk about now but it's still very useful and I hope that you get something out of this I could do a whoa 45-minute presentation of this and for that reason it's really difficult to explain it in 5 minutes but it's about auto-escape and probably some of you heard when Dries said in his keynote last fall that we have some problems with twig why we are not probably not that ready to release right now during the Drupalcon and the reason why we were not ready to release wasn't because of twig, it was broken or there was anything wrong with twig it is that our configuration of auto-escape was broken inside Drupalcor and so this is the stuff that was blocking us from releasing Drupalite last fall so first let's start what is escaping that is the most simplest case escaping is that we want to turn this string into something that the browser won't render which means that all the possible characters that might be in the browser doing something with them like this Ian even though it's just a text here the browser considers it as HTML and renders it differently obviously EM is not dangerous at all but if this would be a script or something else it might be dangerous so what it does it creates them into UTF characters so that the browser won't care about them and then you can see on the UI whatever was inside here which makes sense because let's say if someone outputs their name as something like this you want them to see that on the browser you don't want it to render as HTML so what is auto-escaping is the same but we do it automatically for every string that is being printed so that every time you put a variable you print a variable inside tweak we do that kind of escaping for it whenever you print a string you have to remember to escape it manually in Drupal 8 we do it automatically for every string except the ones that we think we can trust I'm going to explain that in brief but the reason why this is so important the reason why there's people excited of this is that 33% of times when you install a security update on your client's side it's because of XSS bug it is the way biggest one instance of security bugs we have in Drupal Core but that's not all 51.5% of times you install a security update for a contributed module so more than half of the times you install a security update because of XSS so obviously we wanted to do something to make that risk lower so I'm not going to explain how to auto-escape your stuff because it wouldn't make any sense because it happens automatically instead what I'm going to explain how to get rid of auto-escaping how to when you want to print this EM so the easiest way is to create a render array you can use the hash markup to print markup and it will do XSS filtering for that so let's say if you want to output a script it won't still print but a EM has been whitelisted we think that is safe and we allow you to print that then after I say ok we have this XSS filtering functionality why don't we just XSS filter everything like that will fix all our problems then we don't have to care about this all this stuff the reason why we can't do it is because it's really really expensive we have to read all the markup true and figure out if there is something that is dangerous for this kind of a string which is only few characters whether we run it or not because it's so short but if you run it for let's say thousands of characters it will make a huge impact already so we can do it for everything so if you use the hash markup or whatever order render array you can create a template or yeah there is different kind of renderers that you can create it will print in the browser as something as HTML there is other ways than that so there is a new formatable markup object in Drupal 8 probably many of you remember format string function from Drupal 7 this is pretty much the same but it's now a object so you give it as the first parameter the string that you are formatting and then the parameters so how this works is whatever is inside here if it's not in these placeholders we can trust that it's being put there by the developer so we can trust it that is not XSS and then we filter we escape all of these bits which makes this in total safe with all the user input data has been escaped but then whatever the developer has put is not being escaped so with this method you could pretty much put any kind of markup it doesn't have to be white listed or anything we don't do any kind of filtering for that because it's always put by the developer there is also its caveats so basically every implementation that we have isn't now if we want to put markup we have to make it an object so we have this formable markup we have markup object we have the translatable markup object and all of them are markup objects and that creates its own caveats so there's also other caveats than that but the biggest problem conceptually is that auto-escaping is always safe they are safe whenever they are escaped and whenever it's been printed inside html node now this gets even more complicated so if you print your escaped string inside an html element it is not anymore in the html node which means that there is a completely different set of rules that applies for that string and it is not safe anymore even though it's escaped one another good example is the ahref if you add a URL in there the URL could be anything it could be javascript or anything and here is one example the javascript alert we are creating javascript alert that has xss and none of the characters that are in there could be escaped even though we escaped that string there is a solution for the URLs for the first one it's just please don't print variables inside html elements there is few exceptions one of them is attributes objects that you probably want to print in the templates if you've used Drupalite already there's lots of attributes objects that are coming from the theme system those you can print because we can trust that they are always attributes objects and it has its own escaping methods to make these things safe but if you are using the formidable markup please don't do this for the second one there is another solution which is a column placeholder to escape the string especially for the href use case this one here wouldn't cause any harm when you use the column placeholder then there is the order caveat which is because of the simple fact that we have lots of objects now laying in the PHP so let's say if you use the theme function it used to return a simple string now it returns an object so these two here are equal so the function simply returns a translatable markup object and if you create an array and you put that as an array key you will get an fatal error even though this translatable markup object has a two string PHP magic function so you have to cast it in the string which will convert it in the string but it's very confusing there is not that many use cases gladly where you have to do this but let's say if you create a hierarchical select list many people use this kind of thing and it breaks really badly because of the fatal error there is also other caveats that the outer escaping is only enabled for tweak templates so if you use any custom templating engine or if you are using theme functions that are now removed are deprecated and all the implementations are removed from Drupal car they are not auto escaped so this works with tweak we use tweak auto escaping and it makes sense and that was also why the PHP templating engine was overtaken by the new nyancat templating engine there is a long story of that in the issue it basically happened in Drupal car Barcelona one night we were drinking beer in the hotel lobby and we just started talking that PHP template is not very secure let's remove it and we had to figure out a new templating engine because we have to test it automatically whether it's still possible to create templating engine so we created nyancat templating engine you can use it if you want it actually works the problem is that you can't use any divs because it converts them into nyancat exe elements so you can try to figure out something but it's not but the fun thing was that we figured out after we did it in 5 minutes that it was more secure and way more faster than PHP template was so what we said we replaced a joke with another joke but the other joke was even worse joke so that's of a joke any questions thank you yeah that is actually a very good question because there is not really a way to list the filters right now or the functions so the best way to do so that what I do is there is the bot slash tweak extension class the base pass that is inside tweak and with PHP storm you can find usages of that class so you can find all the all the different tweak extension classes and then you can see in there the lists of the filters and functions they are defining it's a little bit of pain I know and it would be nice to have some debugging tool for that yeah I can actually probably show you really quickly so I'm now in the Drupal tweak extension so how you could find it so here is the backslash tweak extension you will go here and find all the usages of this if it happens just simply by here and it will find wherever it's being used and here I find the Drupals example and here I have get functions which will list all the functions that this defines so there is render of our URL the address library one I mentioned or get filters there is the tfilter and there is lots of other filters so this is the best way that I've come up of debugging those that is also how you define your own filters and functions if you do so so I'm going to go back there so this slide this is simply the order that we are accessing them so let's say if there is a property that is called cheese and there is a method that is called cheese it will pick the first one so the cheese property would be the first one on the list the good thing about this is if the cheese property is protected it doesn't affect this at all so it's only if it's public and accessible I think this is available in the tweak documentation it is not probably as simple as this one is but there is definitely a list in the tweak documentation available for this one so many of the tweak related documentations are available in the sensual apps tweak documentation it's a really really extensive documentation they have there so it's very useful the way you create a new tweak extension if you want to create filters in the sensual apps documentation which is also good for us because triple community is always not that excited of writing documentation so that we can get some help from others any other questions I think we have still time for one before lunch if we have yeah oh yeah yeah that's a really really good question so there is lots of problems caching and if you have any if inside a tweak template you basically have to include a cache context for that and that is one of the good use cases that I found so far for the preposits is the in preposits function and the cache context that you need for that template it's a big pain and what I've been talking about a few other people is that we could add a new function which where you could define the cache context for the template we also discussed whether we could do it automatically because so tweak templates are being compiled into PHP so we know what's inside it and we could do a logic in there based on the ifs but it's really difficult to figure out what's inside them and what kind of context we should be then creating so right now the best option is to do it in preposits function just add the cache context and maybe in the future we could add a function for that so there is so one of the workarounds that I found is to create empty render array that doesn't print anything it can be markup or whatever as long as it's empty and create cache contexts inside there and just print it inside the template