 Okay, I think we are ready to start, because more than arrived. Just so that this doesn't get dirty. Okay, so I'm talking about back end of front end today. Thanks for coming, everyone. It's nice to see that many faces in my presentation here. So my name is Lauri Eskola. I'm Finnish, as you can probably hear from my accent. I'm the Drupal team system maintainer. I work for Finnish Drupal company called Druid. You might have seen the black t-shirts around. They are not all working for Druid, they are just spreading the t-shirts for everyone. I love kittens, which is obvious. You can maybe understand it when you see my presentation, but I've added 68 of them also, the Drupal 8-core. So if you sometimes see in some code comments or some weird use cases, some kittens, you know who has added that. And I also like to break partake. Just that's just the inside joke of all the people, because every time I change something, it breaks partake. So let's proceed to the topic of the day, which is pretty much the Drupal team system. But the topic is the back end of the front end, because people very commonly make misunderstandings what is the team system. And the team system is the back end of the front end. That's obviously what team system is. And that's why the presentation's title is a little bit different than the actual component in Drupal Core that I'm talking about. So what the team system in Drupal Core does is it tries to provide a flexible way to output safe HTML. And in Drupal 7, when we are moving from Drupal 7 to Drupal 8, I'm going to explain in this presentation what we have done to achieve this goal better. So my presentation doesn't apply if we are building headless Drupal or something else. You are then using JSON, which is not using Drupal's team system. So this is only when you're printing HTML from Drupal itself. So what we try to achieve in Drupal 8 is to have a simplified team layer because when we move from Drupal 6 to Drupal 7, we actually made the team layer a lot more complicated. So this time we finally figure out that we have to make it simpler because of when the team layer is too complex, it makes people build things differently and it makes more possibilities to misuse the APIs that we have there, which is not what we want. Also, another important thing for us is that we want to be lazy. Being lazy doesn't always sound good, but in this context, it might be a good thing to be lazy because what I think is and what this person also has taught at some point is that laziness is the first step towards efficiency. And you have to be a little bit lazy to do the things as efficient as possible. I'm gonna explain what that means in the team layer. So let's say in the Drupal 7, we have the template process layer, which is a good example of an API which commonly makes people misuse the API. So in the process layer, what was being done in Drupal 7 was we had nice arrays with structured content that in the process layer we converted into strings. But when something has been converted from an array into a string, it cannot be changed anymore because it's not structured anymore. So it is bad data structure to have your data in a string. That's why we don't save the nodes in the TXT files because it's very hard to try to load your nodes from the TXT files because it's not structured. Also, another problem which is the laziness, we are doing things that might be unnecessary. So let's see what we have in the template process HTML in Drupal 7. So we have to Drupal get JS, Drupal get CSS. So what the Drupal get CSS does, it returns a string of all the CSS files that can be printed into the template. We have also, oops, the mouse is there. We have also a page top and page bottom and we call a Drupal render on both of them. What happens if the teamer decides to not print the page top or the page bottom? Nothing happens because nothing is being printed but we just wasted the CPU for rendering something for nothing because it's not being used for anything in the template. So this is something we wanted to remove to make people be lazy. So we removed the template process layer completely. There is the change record. If you wanna read more about the discussions behind this, there is the issue where it has been actually removed and there is all the information about that. So what happens now when we don't have the process layer? We have all the render arrays, everything going to the templates as they are. And we are rendering them as late as possible which is after the template. So if you want to change your render array in the template, it is still possible. And all the data is still structured so they can be changed at any point before the rendering. And the rendering is happening after the template which is already quite late. And how this is possible that everything is being done this way is we have everything now in the render arrays. We are using render arrays for everything. In Drupal 7, another example of non-lazy functionality is the team function. When you call team function, this structured data you have there is being converted into a string right after the function call. And if you are returning this from the controller, everything that is happening after the controller has returned this cannot change it anymore because of the fact that it's a string. So we use render arrays because of that. The syntax is very similar. We have the render arrays also in Drupal 7 so it's not a new thing but we are using in Drupal call render arrays for all the different use cases which is pretty neat. I have also another example, why team functions are bad. You can see, oops, my slide is not changing. That's weird, let's try this one. Okay, now it's working. So I have an example of a team function here. So whenever someone wants to override a team function, the teamer has to copy this PHP function into the template.php. And this is just a simple item list. This is one of the most simple possible team functions I can imagine. And it cannot even fit my slide. I have to scroll to see all this. So I have to copy all this PHP. And okay, let's think of a teamer. Does teamer know PHP? What happens if a teamer writes PHP? I don't know. Have you ever seen PHP every time by Morton? It's something, I don't wanna break the code of conduct but it sucks. Yeah. I'm sorry. We don't wanna do that. So we have converted this team function and all the other team functions too into a template. This is something that even simple people like Morton can manage to change. Yes, we have team functions in a twig. And it actually fits even on the half of the screen which is cool. We haven't got rid of all of the team functions even though we would want to. We have still eight team functions left in the triple eight. Those are all team functions that I think many of the people don't have to override anyway so they don't matter much. They are very complicated ones. All of them has their own reason why they couldn't be converted into templates. But all the orders of the 154 team functions that triple seven has has been converted into template which is awesome. So let's proceed to the team system. How team system in triple eight should be used. I have a nice overall picture of the team system here. So this is the pipeline that most of the people will follow when they are outputting content from a controller into the browser. So it starts with the hook team implementation and the render array where we go next to the team suggestions space. Then we go to the pre-process functions and then we are already at the template. Simple. Let's go deeper into all the different pages. So if you want to download the code that I'm using in this section of my presentation the whole module is available in this G2 repository. I will give the link later on again just so that if you're interested to use it during the presentation you can get it later. So the hook team implementation is the first thing that happens always. So what the hook team implementation in the module file is doing is it's creating the initial, it defines what's inside this hook team implementation. It tells, okay, we have these variables which type the variables are and it also gives the name. You can also give some properties to change the way this specific hook team implementation behaves. Let's say if you want to make it a team function you could define it to be a team function in the hook team implementation. But obviously no one wants to do that. So I'm creating a sandwich hook team implementation in this demo and we have few different types of data. We have a string for the name and we have an array for the veggies and the condiments. As you can see, when I'm returning a render array from the controller or a block build whatever where you are returning the render array, I'm defining the same data as I have in the hook team implementation. The veggies and condiments, they are array as in the hook team implementation and then there is the name, bread, cheese, which are all strings. And what happens after this is being printed is we go to the team's resistance phase where we define new team's resistance. So what team's resistance are if someone is wondering what they are is when you are overriding the node template for node dash just article, we call that a team's resistance. If you want to create your own team's resistance, that happens in the hook team's resistance hook. So this is the name of the module and this is the name of the hook team implementation. In this example, I'm creating new hook team implementation with the name of the sandwich. So I created a Chicado named sandwich here. So then I will have a template overriding for the sandwich.html.tweak, which is called sandwich dash dash chicado.html.tweak. This hook should be used only in the module that is providing the hook team implementation, not in any other modules because they might clash. So this is the initial settings for the hook team's resistance. Then we have also the hook team's resistance alter which can be used in any other module if you need to change what the original module has been taught of the team's resistance. So after we have the team's resistance, we are moving to the pre-process functions where the pre-processing of the variables happens. So in this example, I want to change the name of the sandwich to be something else based on some other logic than what is in the controller. This might happen in the team or somewhere else. So the first thing, the first pre-process function that is being run is the template pre-process function, which is a pre-process function that should be also in the module defining the hook team implementation. It shouldn't be added into any other module or team. Even though it will be picked, but you might cause really weird things happening because of the fact that it's designed so that there is only one instance of this function. And this is just a function to provide the initial pre-processing of the template. So let's say if your template is depending on some variables that you don't want to add in the controller, you can add them in the template pre-process function. Then if you somewhere else need to change that, other module or a team, then you can use the hook pre-process function where again the hook is the name of the module or the team and then it's the team hook implementation. And then you can change it to be whatever you want. But in Drupal 8, we have also something super cool. We have a third option, which is the specific pre-process function, which means that if you had the specific, the template system added in the hook template team suggestions function, you can actually alter the, you can pre-process the template even in a specific, for specifically that template. So because I'm printing that, because of the bread I'm returning in my example at Chicago, we would run all these three examples because it would match even this third pre-process function, the name of the sandwich. When it goes to the template, it would be Flamingo. And in Drupal 8, the specific pre-process functions are actually even more important than in Drupal 7 because there is more use cases where you could use them. Let's say we had on my own Drupal 8 site that I've been building, we have all the attachments in the libraries and we want to load them dynamically based on the team, the hook team implementation that are being printed. We don't want to do it in the template because we don't have a template override for all of them. So we can actually add a specific pre-process functions for each of these specific cases. So let's say if I want to add a attachment for the article or basic page, I can just add a specific pre-process function and do the logic there. So it's kind of like what you had to do in Drupal 7 was you take this pre-process function, then you do the if logic, which is the same if logic you would do for creating the for the team's suggestions. And then you do it again and do the same thing because you couldn't do this anymore. You couldn't do that there. So it's nice way to remove duplicated code from there. Another thing that has changed in Drupal 8 pre-process functions is that we have more different kind of data in the pre-process functions, which makes things sometimes complicated. So I'm telling you that T function in Drupal 8 which returns an object. What happens in this example? Does anyone know? Anyone has an underscore? What happens in this code snippet if the variable's name is an object? Fatal error, right. Obviously we would assume that the name is always in string, but that's not always the truth in Drupal 8 because we have the objects in multiple different places. So I'm making a very stupid assumption in my pre-process function that someone is printing my sandwich and setting a and the person is having the name as a render array and has a machine name variable inside that render array. This would work if the name is a string. Then this wouldn't cause any problems, but now when it can be string, it can be object and it can be an array. You have to take care of all these different scanners. So how you would have to do that is to first check if variable's name, if this is an array, and then you can do this logic if you necessarily need to do that. But we shouldn't make these kind of assumptions anyway, so it's a bad, bad code that I have here. But this is just a warning for people who are writing code because when you are installing a module, something might be returning an object there instead of the string that you might be expecting there to be. So after the pre-process functions, we are finally at the template where we can create the markup. Awesome. And here's my template. I'm creating the markup here and yay. That's the whole pipeline of Drupal 8 theme system. This is how things are being done when things are being done the right way. If you want to download the code snippets, they are available in the GitHub repo in this URL. There is a fully functional module, which hopefully works even with, because Drupal 8 is still changing quite a lot, so it writes sometimes. Last time I was testing it, it worked. It was yesterday. So let's move to the tweak that I was already talking about a little bit. So what the back enders need to know about tweak because tweak is a very cool piece of functionality for the teamers, but it might add a little bit of extra effort that the back end developers need to do because in Drupal 7, if you want to provide a function or some helper for the front end developer, you can just create a function in your module and the teamers can call it inside the template. But that is not how it works in Drupal 8 anymore because we are using tweak and we are safe and we are doing things better. And we are working on very hard to make tweak as secure as possible. We have issues to disable entity removals and entity edits and all these kind of things in tweak so that it would be as secure as possible. This is unfortunately not yet the situation, but all the MySQL queries and things like that is in most of the cases prohibited. So you have to know what you are doing if you are doing crazy things there. So how tweak actually works? So this is the nice index of tweak which you might have seen already in different presentations or if you have been using tweak in other type of projects, you could even use tweak with Drupal 7, I guess, because there is a product for that. But so what happens if a teamer wants to print the sandwich.cheese? Teamer is happy because the teamer gets the data. Teamers are simple. They don't think what the cheese is in the sandwich. But backend developers are like, oh, I have a sandwich or is cheese, but what is cheese? Okay, cheese can be multiple things when we are using tweak because we have only single syntax for doing different things. So when the teamer is printing the cheese out of the sandwich, we have to do a little bit of different kind of tests to find the right data the teamer wants to print. So the first thing we test, if sandwich is an array and there is a key with the item with the key cheese. If it's an array, there is a item with the key cheese, everything is fine, we are printing that data. But if that is not true, we have to proceed with the tests. So then we test if the sandwich is object and cheese is a property in that object. If that is true, we are printing the containers of the property and everyone is happy. The data is again being printed. Then we are proceeding to a little bit crazier things like testing if the object has a method called cheese. If there is a object with the get method convention, if there is a object with the is method convention, and then we even try to call the dynamic metrics inside the class. So these all different options the cheese possibly could be. So for if I ask the question again, what the cheese is or what the sandwich is, what the cheese is inside the sandwich, it can be quite a different things. It can be any of these, which makes things simple for the teamers. But sometimes might make it a little bit complicated, 40. We can developers to understand this. So I have it here. So in the twig, like in PHP, there is functions, but there is also filters. Filters are a little bit simpler piece of functionality that are meant to manipulate a variable when the variable is being printed. So what happens when this kind of syntax is being used? So when you use the pipe and give the name of the filter here, it calls a function in PHP and returns something out of it and prints it immediately after that. Which means that when I'm calling name pipe length, we return five. It just simply returns the length of the variable. The reason why this is cool, why the filters are cool, is that the original value of the variable is not changed. It remains the same. So in PHP, you might have to create a new variable or something or at least some people are doing that. And so they are processing first it to be something else and then they are printing it in some other place, maybe in pre-process function. So this is also something that you could use to remove logic inside pre-process functions. You could create a filter to not have to do pre-processing in the pre-process function because themers don't want to use PHP, to be honest. There is also functions. They are used to make a little bit more complicated. Logic usually they can be used for different kind of things but this as an example is the bar dump for a dump function in tweak template which is just dump. We can use it without any parameters because it doesn't require the fun parameter before the pipe. If you don't provide any parameters for the dump function it will just print all the variables inside the tweak template. So one very nice use case of the without filter is render arrays. So without filter is a filter which removes a one item of an array. So in Drupal 7 when you wanted to print a render array but you wanted to hide something inside the render array you didn't want to, you wanted to print the content but you didn't want to print comments or links. You had to use the hide function. What happens when you call hide function is we actually mark in the render array that okay, let's just print comments. Let's not print links. And if someone is printing that thing again it might be a little bit unpredictable. What is the state of the render array? Because of you could call the hide and show function in multiple different places and you might not be able to figure out anymore what is happening inside the render array. So actually I was fixing a bug in Drupal 8 core maybe a month ago where hide function was used and we had like probably four people trying to figure out what is happening there. Why is this hide function being called? Then there was actually not even hide function being called. There was just manually someone doing the same functionality as the hide function does. And it was really super confusing. What is happening? Why is this not being printed? Why, yeah. And it was happening like way before the place where it was printed. So you had no idea that someone has called the hide function somewhere. So in Drupal 8 we call the feed out filter when we are actually printing the render array which makes it super clear that in this case they are printing everything else but except these two things. And then you can print these two things separately wherever you want to. You can just call content.comments or content.links and you can print whatever is inside those. So sometimes what Tweak has built inside might not be enough. So I'm gonna show you how to create a Tweak extension. So to create a Tweak extension you have to create a new class extending the Tweaks built in Tweak extension class. I'm creating a filter so I have to provide a get filters method which returns an array of Tweak, in this case, Tweak simple filter objects. I guess the other one is Tweak filter. Tweak filter objects is the other option but Tweak simple filters is what I'm returning in this case and what happens when you're creating a new Tweak simple filter object is you give us an first parameter for the object the name of the filter that you use to call that filter in the Tweak template and then as a second parameter you give where you want to map that filter what it should be calling in the PHP. So I wanted to call a method in the object and the object is the current class so I just tell okay this and then as a second item in the array I give the name of the method which is TrimString. So now if someone calls a TrimString filter inside a Tweak template it will call this method. It has just simple as tier pause call and returns it back to the Tweak. In order to make this work not creating only creating a class is not enough we have to tell Tweak that well we have a Tweak extension here please come pick this up and it happens using the services.traml file so I'm creating a TrimString.services.traml file inside the module then I have services here which tells okay this is a list of services then it's the machine name of the service class that is the service that I'm adding and then I'm tagging it for the Tweak extension and then Tweak will come to pick up all the Tweak extension all the services with that tag and after that profit you can go to the beach and your filter is working it's quite nice. So as you can see I'm giving it a parameter in this example it is the length over here and you can add unlimited amount of parameters for the filter. If you want to download a module doing a Tweak extension you can go to my GitHub and download the module. Let's move forward to the last topic of the day which is for me at least the most important one which is a Drupal 8 auto escape and maybe this morning if you were at the Dries note Dries mentioned that there is one remaining critical issue that we are working on. This is the thing we are working on. It's pretty awesome right now or it's becoming really awesome but there's few things that needs to be still fixed. Yeah so in the auto escaping the problem is that it affects all the things in Drupal Core. So every time something is being printed it's being escaped but let's go into the specifics. So why we are doing this is just to show people that we don't want PHP to have any markup. Markup should be in the Tweak templates. So if you are outputting a PHP markup in the PHP it will be escaped by default because markup shouldn't be there. It should be in the template so that the teamers can easily change it. So what escaping means? It's not probably obvious for everyone what is escaping. So I'm gonna just show what happens when something is being escaped. So I have this PHP template I'm using here. I'm calling HTML escape for this string which has an HTML element M inside it. If I would just call print some escape text everything would be fine. Nothing bad would happen in this case because there's no accesses, no nothing but because we want to be safe we want to escape all the things. So I'm escaping this variable manually now in the PHP template. What happens? This is the markup that you get if you look the view source. So we are converting all the possible characters into HTML entities which means that they are being printed as is. So we assume, okay, someone creates a username with an HTML element E-M, Lauri closing E-M. We are making an assumption that that is the person's name. That's what he wants to show on the browser. That's what he wants to show everywhere because maybe someone's name could be that. You don't know or maybe someone's name is script alert XSS blah blah blah which causes a security issue but you can't blame the user. So this is what you see in the source. This is what you see on the browser. So we expect that if someone wants to print this from the database, from the user input, anywhere in the PHP, it's what you want to see on the browser. So what the situation is if we use tweak is I'm adding into my sandwich a new variable called markup which has the text. I'm printing the markup. I'm not running any escape here but again, it is escaped. This is auto escape. So this is escape, this is auto escape. No escape is being run. So how to avoid auto escaping if you run in the problems where you want to output HTML in the PHP. Okay, the number one thing, the best solution always is to use vendor array. Either use a template to put your markup into or use the markup key inside the render array. Even when using the hash markup render array item it's being excess filtered. So you kind of print script tags with that. But you can print the EM and now you can see nice italic text over there which is pretty cool. So number one rule, if you print something from the PHP use render arrays but that's also not always possible. So we have tools for that. So if you need to add a let's say one, one let's say EM element like in my example, you could use the save markup format where you add placeholders for all the variables you put in there. So what happens when you use the save markup format is that this fdxt like in couple seven it will be escaped to a string. And then all the other stuff inside this format method is considered to be safe. So what we do when the save markup format is being called we escape all the parameters that are being passed for the method. And the rest of it, everything that is manually being put in there by the developer is safe because it's just static HTML. So static HTML in PHP itself can be considered safe if you use this. But for sure also auto escaping has its caveates and that is the thing why we are still working on this. So when auto escape strings are safe it's only when your string is being printed in HTML. If you are doing something else than HTML auto escaping is not helping you. And one big misassumption is that attributes are not HTML. Some people think that attributes are HTML. Let's say I'm printing the text inside the EM elements opening tag. Okay, we convert it in this string but it doesn't help because different rules apply. When we are not printing HTML anymore. You can't write another elements or HTML inside the EM elements opening tag. So it doesn't matter that we put it into a string or secure it from running HTML. You can do different things because let's say in here this is a one very good example, href. Okay, JavaScript alert. I'm putting it in the href. What happens? We are getting an alert. There's nothing that the escaping would escape away but we still have to security hold there because there is nothing that it would assume is unsecure. This is not HTML at all. This has nothing to do with HTML. This is just a one string that is being now printed in the wrong place. If this would be printed inside the h element not in the href attribute, it would be safe. It wouldn't be run at all. It wouldn't be a problem. So when you are printing something into the attributes think twice where your string is coming from, how you have to escape it to be safe. This is the most common use case, the URLs. So we have created a placeholder for that which you can use when you are using safe markup format. So with this syntax, the JavaScript will be removed from here. It will remove all the non-wild listed protocols. JavaScript is not a wild listed protocol, it's not safe. So it will be removed from here. And it's actually quite clever. So please, when you're printing URLs in Drupal 8 if you are doing it this way, use this syntax. Other problem we have without escaping is that it's only enabled for tweak templates. We are using the tweaks out escape functionality. So if you are not printing your HTML using tweak you don't have auto-escaping turned on at all. So let's say if you print JSON, you don't have auto-escaping. If you are using PHP template that still exists in Drupal 8, your markup is not being auto-escaped. Or if you use team functions even worse you are not being auto-escaped automatically. So when you do that kind of things please reconsider again if you want to use a team function or the PHP template because you could be safe by just using the tweak. So as I said earlier, finishing this API is the only thing still blocking the Drupal 8 release candidate one. If you want to support us please do testing. It helps because of this is an API and testing an API automatically by unit tests or integration tests is really complicated. It needs user just writing code and testing it out. So we can make sure that the API is safe. There's sprints happening on Friday. So if you want to help on releasing Drupal 8 please show up on Friday at the sprints. There will be mentors available that will help you get started even if you don't have any experience of using Drupal 8 before. There's even tasks for people that are non-coders. So if you want to work on documentation or other things there will be people that can help you out. If you want more information about that there is Twitter handle for Drupal mentoring where you can get good information about that. And then we are ready for the questions. Hello. First of all, I want to say thank you to Lori since I know how much he's working on the issues with on the female layer. So thank you Lori. Thank you. And my question is what is your opinion? How about to start templates, tweak templates in the database? I haven't given any thoughts on saving the tweak templates into the database. Right now we are saving the compiled tweak templates into the PHP files. Actually to be honest, we do have tweak templates that are being saved into the database because you could create tweak template in an view. And there, that kind of tweak templates are actually being saved into the database. So it is replacement for the old views tokens that used to be in Drupal 7. Because one of the real use case for that could be when you use a theme but you have to customize it a little bit. It could be very useful to overwrite a template in the database. So this is a still existing theme but a little bit customized just in the database. Yeah, we don't have any discussions about that at least yet. But if you have any ideas how that could be done we can talk after the presentation and I will think about that for sure with the other theme system co-mainters. Yeah, okay, thank you. Yeah, can you use the mic? Thank you. In Drupal 7, the variables in the templates used to know whether they were already printed or not. And now you showed us the without filter. Does this filter tell the variables that they are not, do the variables still know whether they have been printed or not? Yes, they don't know, okay. So the printed variable, I know it exists there and you can set it manually but it's not being defined anymore if things are being printed. Okay, thank you. So you can print the render arrays multiple times because of that because in Drupal 7 when something is being printed it's marked as printed and then it can't pre-print it again. You just showed how to prevent auto-escaping. In the symphony, in the two templates you could use the filter raw is that not present in Drupal 8? The raw filter is present in Drupal 8 but it's unsecure because it won't escape the string at all. So if anyway, user input goes into that string you might get unsecure markup being printed on the browser. And I would never suggest using the raw filter unless you are 100% sure that there is no way that user input text is in that string. So basically calling raw is basically like the PHP templates from Drupal 7 if you don't check plane them, right? Yes, and check plane is actually the functionality we call by default, kind of check plane. And the second question is in that raw, how the templates are being processed. Didn't mention the process hook, hook process template which I think was in Drupal 7, was that removed? Yes, hook process layer was removed from Drupal 8. Thank you. You showed two examples of avoiding auto-escaping the pound markup method. Is this something considered the best practice? Or since we're having HML markup again in the template file. So not the template, the theme file. It is usually being used if you just want to print a static HTML from the PHP code. Let's say you want to print a empty span somewhere or something like that, it's a good way for that. But anything else shouldn't be done with the hash markup. You should use the template. Yes, a template should be used for all the markup. As I said in the presentation, it's XSS filtered so that the most unsecure cases will be covered even in that case. Do you have a question? I'm so happy to see old man doing exercise. Yes, I'm old and wise. No, I'm just gonna take over now this kind of okay session and explain to you guys if you're all developers and you wanna know why we did this, I'm doing a session in 25 minutes, down in 111. So you actually understand why we did and why we killed all the theme functions and why you might gonna hate me the next three or four years, but it's actually Lowry's fault and it's God's fault and it's Joel's fault. And I kind of think we all owe them a big hand for the work they've been doing for the last two years. And they have actually taken quite a bunch of abuse from my side of me yelling at them. So I just wanna give them a hand actually. Thank you.