 We start going off into tangent and are not making sense for like more than, I don't know, 30 seconds or something. Like you can wave your hands and tell us to slow down or like you don't know what the hell we're talking about. We're all cool with that. And yeah, heckling's fine too. It's the last session of the day so you gotta, you know, let loose a little bit. I think on that note, considering it is the last session, we don't want to keep you here all night, we're going to go ahead and get started. So yeah, we're just going to talk about the Jubilee theme system. It's kind of a grab bag of stuff, but the core of it is how you get from hook theme to twig template that actually outputs something, whether it's HTML or, you know, XML or JSON or whatever you're doing. So we're just going to start by just quickly introducing ourselves. So I'm Scott Reeves, developer at Digital Kidna in London, Ontario. We're about 40 people and if you see these people in the jerseys, that's us. So you can also come by our booth and enter a draw to win this really sweet Drupal 8 jersey, which, yeah, Laurie wants and I'm like not a hockey person at all, but I want this thing. It's pretty sweet. It's got the Drupal con on the front. It's got like Drupal 8 at the back. So stop by our booth if that sounds interesting. I'm one of the co-maintainers of the theme system in Drupal 8 and just helped to get twig into core and just make things in general simpler. I'm sort of, this part is sort of fading away, sadly, but I'm a Drupal core mentor as well. This is how I got into contributing to Drupal 8. So if you're kind of interested in contributing, my immediate suggestion would be to come on Friday and I, you know, come to the new contributor workshop or come to the sprints or, you know, wherever you are. And anyway, yeah, like means because that's the, the bean in Chicago, there's kind of a theme going here, you'll see. All right. So my name is Joel Patet and I'm, I've been working on websites since 2001 roughly. I know there's a lot of people that have been working on longer. I'm what's known as a full stack developer. So I like to do front end stuff and back end stuff and some DevOps stuff to break my servers. And I'm also core system main subsystem maintainer for the theme system. And I worked with Scott and a number of other people to get twig into core. Yeah. Big fan of Perogies. That's a giant Perogie in Northern Alberta, Canada. We told you a little bit about ourselves. We just like to find out a bit about you. Since we kind of started already asking you which such that you're going to and stuff. So just raise your hand if you consider yourself a site builder at all. This should probably be pretty much everyone because, yeah, um, themers, awesome represent developers like back end developers, I guess, but yeah, DevOps, handful, okay, cool. And other miscellaneous, et cetera. Awesome. Awesome. Beer drinker. Yep. That counts. All right. Cool. Well, thank you all for coming and I hope you can learn something and we should have time for some questions at the end so we can have some questions or discussion and let's jump into it. So to start with, we're going to talk about some of the, uh, theming changes in Drupal 8. We'll probably do this section a little bit fast considering how many of you went to Morton session, but we're not going to, we're not going to zoom by it, so don't worry. So the template process layer in, I think it's in Drupal 6 as well, definitely in Drupal 7. In my opinion, very confusing, like hard to tell when you're supposed to use pre-process and when you're supposed to use process. And after kind of delving into the theme system, basically, um, at least our interpretation is that the main reason why it was invented was to flatten strings into HTML and probably the simplest example would be something like classes. So if you've got like an array of classes, then you, you know, can manipulate that array through all your pre-process and all that kind of stuff. And then right before it gets to your template, the process goes, okay, I'm going to just like implode this and add, add a space in between each class. Um, and in Drupal 8, we, we kind of changed this, so we, there was a lot of work to get the, to get rid of the process layer, but it's completely gone. So there's just one layer in between basically your data and your templates. So it's much simpler. And what we, we'll talk about this a little bit more later, but basically the kind of the paradigm that we favor is lazy rendering, which is, is cool. If you like being lazy, uh, but basically what it means is that we render things as late as possible. And that usually means from the twig template itself. So yeah, it's just kind of, it's, it's a good, uh, it's a good thing for everyone. So template process layer is gone. Theme functions, um, they're, they're so Drupal 7. Actually, do you want to talk about this? Okay. Theme functions are so Drupal 7 though. So for a theme functions, we, uh, we found out and same, same with the process layer is that with theme functions, people were calling them early. Um, a lot of times, you know, inside of a pre-process, you'll call a theme function for another, for another template or another theme. And it would be flattened into a string and then that string would be sent to, sent to another template. And what, what that meant is that that data was flat and you could not change it unless you wanted to do some fancy regular expressions to try to manipulate the rendered markup. Um, cause it's already been flattened out when it hits the template that you're working with. Uh, so the process layer and the themes were, um, were removed for that purpose. Also just because we have two different ways of doing the same thing, we wanted to simplify it and try to move as much or if everything to the template, um, that way we're just always working with one thing instead of, Oh, maybe sometimes it's inside of a theme function. Sometimes it's a template. And the biggest thing in my opinion, for the reason why he's pointing at me to look at this one is that I really hated concatenating strings. And I'm sure a few of you are cutting strings to make a markup inside of a PHP file. That's what theme functions where they're just a function that rendered out, it was your template, but in function format. And it, it was a bunch of output dot equals string escape, whatever quotes you had in there, big giant list of those. Uh, and then you've got return that and that was, that was what a theme function was. And it really, this makes it hard for syntax highlighting. I couldn't actually see my, um, what tags were closed properly because my browser's like, that's a giant string. As long as you close the string, it's fine. Um, so yeah, it just makes it a lot easier to work with from a front perspective to work with a template than a theme function. So, um, there's only 12 theme functions left in Drupal 8. Um, we would really love to get to zero, but the reality is some of these are like admin type things that you're not really going to care about. But there is still, um, basically the only ones left that you would care about in your day to day as, as a theme or front end developer are a couple of ones from views and we already have template versions of them. So it's, it is still quite easy to override them as a template, uh, if you prefer, which I usually do. So we're, even though there's 12 left, we're in a pretty good state. And considering there was like 150, like we've already converted like 150 of them. So, uh, we're doing pretty good. Um, the other thing I just want to mention before we move on from this, any, um, like contrived module developers or potential contrived module developers, even, or even custom in your own like agency or practice. Um, please don't add theme functions in Drupal 8. Um, I will come and yell at you or, or your, your front end developer who's sitting like across from you will be like, why did you do this? So yeah, people will yell at you. Just, just do the right thing. Make it a template. It's still possible to make theme functions in Drupal 8. Don't do it. So this is part of the, the seams, the theme suggestion hooks are, is part of the simplification sort of that I was alluding to earlier. In Drupal 7, you could manipulate. So actually before I kind of jump into this explanation, how many people are familiar with, um, like theme suggestions or like template kind of file names where you can do. Um, so I think like the kind of canonical example that I use is like you have node dot tpl dot php or dot html dot twig and then you have no dash dash article that is a template suggestion or theme suggestion. Cool. So in Drupal 7, you could manipulate these theme suggestions in the pre-process layer, uh, for some reason, I guess, like basically the reason that I can think of is that it was just kind of tacked on there, but, uh, it's kind of problematic because at that point it might already be too late. Uh, if you want to kind of, if you're in a pre-process and you have some reason to say, Hey, wait a minute, go over here. You can't really do that. Like one use case might be if you have, um, if you have like nodes and taxonomy terms and users and all these things that are entities, you might have some use case where you want to redirect them all to like entity dot html dot twig, but it's kind of wasteful if you're preparing all the stuff for the user and preparing and then you're like, wait a minute, go over to entity and then I'm going to like redo all this stuff. So for, for a lot of reasons, we decided to put the suggestions first before the pre-process, make it its own discrete step. It's very small. Like when you write these hooks, unless you have a lot of logic, which you're keying off of there, there, as you can see, they're quite small. So, um, the top example is, uh, so the top example is, um, within the pre-process. You can see like the code looks very, very similar. Um, you're just basically, we're kind of adding some static suggestions in here, just as an example. And then, uh, the D8 version is just, you just alter the suggestions that are coming through and you can just add your own. And, um, if this whole theme suggestion thing isn't clear, then we'll have, uh, kind of a better demo in a few minutes when we talk about, uh, some more twig stuff. And, uh, this is about goodbye to theme. So I'll let Joel take this one. So this is what I was talking about earlier. Um, when you're calling theme directly, you are rendering that set of variables as a string and then passing it into a variables of, say, a pre-process to pass it to another template. This is what happened a lot in Drupal 7 and we've tried to standardize it so that we could keep that structured data together all the way from the pre-process and, and from where that may be a controller of some sort, um, or a menu hook in Drupal 7, keep that structured data all the way to the template so that you can manipulate it all the way along. If you flatten it too early, then it's useless to anybody later on that's trying to do any manipulation on that data. And we've done a lot of work to structure this data, so might as well keep it structured until we need to flatten it. And so that's what we're doing by replacing these calls to theme directly. Um, and so we're doing render arrays and they look very similar. The only big difference there is that we're using square brackets and text from, uh, from PHP 5.4. Um, that's the biggest difference there, but they have the same render array structure that we have in Drupal 7, just kind of using that more consistently across all of core. I just want to, just to kind of bring it back to sort of the more front end developer side just for a moment before we move on. Um, what this, what, what this means is that the Drupal 7 versus the Drupal 8, like the Drupal 7 version, which we've just kind of invented here, but just work with me, um, that list variable would be a string of HTML and like Joel was talking about earlier, like if you need to modify that, like do you bust out like regular expressions, like string replace, like please God no. Um, the Drupal 8 version you can actually work with, you could like drill down into that list variable and be like, oh, just give me the items and like I don't care about the Drupal markup. I'm just going to like make my own list and like I'm a rebel and I'm going to make it like a definition list or something and you can go ahead and do that. Uh, so it just, it gives you a lot more flexibility and this kind of comes back to that whole lazy rendering concept because in second version, um, if you print that list variable in your twig template, it gets automatically rendered by twig in, like from the template stage rather than earlier on. Right. Now we're going to talk about attributes. Uh, this kind of ties into the whole process thing, like I was talking about how you have this array of classes. So the whole attributes array classes array, all those kinds of things are basically gone now. We have, um, an attribute class or object now that contains all of that and, and knows, it basically knows all about attributes. So you can add stuff, you can remove stuff. It knows how to print itself. So when you do this in the twig template, it's like, oh, okay, I know what, I know what all these attributes are. And I know that classes need to have spaces in between them. So it's just kind of nice. It gives us a, a nice sort of API around attributes. So you'll see this kind of thing. If you, uh, crack open a copy of Drupal 8 and start looking at the templates. Um, and yeah, if you're, if you see stuff like this, uh, don't do that. Cause, um, like I said, attributes know all about themselves, this, this class. So yeah, um, it'll, it'll add that little space if there's no attributes, you'll just get a nice clean div tag and you're good. And, uh, you can also do some fancy things in Drupal 8, uh, where you're pulling out certain things so we can see like drilling down and grabbing the class out of the attributes and then printing all the rest of the attributes. And I think this is really nice cause it kind of reads like English to me. Um, it's just like, okay, give me the attributes in the class and then give me it without the class. And the extra nice part in my opinion is that this without concept you can use on, in like your node template as well, like on that content array, um, which Morton had some really good examples of in his talk. So I'm not going to go into too much. Um, you can look it up on YouTube, but yeah, it's just, it's pretty cool. And, um, who thinks, what, what's a better color? We're web developers, we can do this. So, um, I'll just kind of keep yammering on while I'm trying to. Okay. He's going to do it. Okay. So, uh, this concept of without was, uh, oh, this concept of without, we're actually going to go into more detail on the different slide. Um, but it allows you to drill into any array and remove one of the child pieces. So in Drupal, uh, it's, I'm actually going to just talk about attributes here. So attributes in Drupal seven, we use Drupal underscore attributes or somebody might just hard code them. I'm not sure. Um, so Drupal attributes did that concatenation for you. And then we would pass that through on properly a pre-processed layer, but now we're actually passing it directly to the template. So we can manipulate that attributes inside the template. And before it was always like an array that was held up into the last second and like Scott mentioned before in the process layer, that array would be flattened by Drupal attributes function. And now in Drupal eight attributes is an object that is kind of a smart object that knows when you try to print that object, it flattens itself. And that's the kind of trick magic that we do right now. So that you can actually manipulate inside the template. Um, and then when it's actually printed, it will flatten it. And with golden rod, that's, that's awful because it's good because, um, when talking about this stuff, it's kind of hard to avoid the code. So yeah, sorry, not sorry, et cetera. Um, so we've had this attributes thing actually, um, in Drupal eight for quite a while. And more recently, we kind of realized that we want to be able to do this kind of stuff from the template. So we started adding these types of things. Um, we really didn't have to do anything special to twig to get it to do this. We just added these methods on the attribute class itself. Um, and so it's nice because you can do this kind of stuff from the template and from, let's say, pre-process in the in pretty much the same way. Um, so I again, I think this is pretty self-explanatory. Also for any people who dabble with like jQuery, it's pretty similar to that. Um, so yeah, you can add classes, you can remove classes. Um, you can also test to see if classes are there. So this one was a special request from Morton. Yes. This is all Morton, so you can thank him for that. Cause yeah, you can, you can just see, does something have a class and then do your own logic based on that. Uh, and then we also have some stuff for non-class for all the other attributes. So you can do set attribute, you can do remove attribute. Uh, whatever you want, you can add data attributes. Um, you can remove stuff. Sky's the limit. Pretty nice. Before I, before I show this nasty bit of code. Um, show and hide in templates in Drupal 7. Um, who used show and hide? Cause I'm, last time there was quite a few. Okay, that's good. Okay. And, um, who understood exactly how they were working? Okay, okay. Yeah. Yeah, they were in, they were kind of like, unfortunately they were kind of like niche tools in a way when they should have been like every day, but anyway, so this is kind of an example of something in Drupal 7. How you would, this is a very made up use case. It's like you'd have all kinds of duplicate stuff, but it's just for the sake of this example. So, uh, Joel, do you want to explain that? So, uh, the first thing is that show and hide, um, are very simple in terms of what they actually do. They just set a property called printed to true or false that is all they do on the array. Um, and then the, uh, the render function will read that and decide whether or not it should actually print it. So in the first one here, we're, we're hiding on the content array. We're hiding the renderable array called content. We're hiding comments and links. And then we are trying to render the rest of the content and, uh, without those two things in it. And then we, we could do this later in the code or whatever. That's kind of the idea behind it. You can later down the code, you could print this out. Then what we're trying to do is print only the links. So maybe you wanted to wrap that in a special div, uh, so that you could style it specifically. Um, and then after that, we're just kind of showing those links again. So basically setting it so that the printed is false so that it can be shown again and we're printing everything except for, and unfortunately in this case, it looks like we're printing everything but we're still not printing the comments because the comments are still hidden. Um, and I found this frustrating because I didn't realize that I might have, I might have, um, I might not have turned that on or off and it could be far up the code to try to realize that. So it was, it was really frustrating for that. Also in Drupal 8, we were having some issues with being able to print like the links twice on the same page because of some reference stuff. So, um, in Drupal 8, come up with a different kind of concept to directly act on that array and we use some filters and twig to say, uh, without, and this was actually mimicked from, uh, another project and I cannot remember the name of it. Um, but there's another project that uses twig and they use a very similar concept for removing parts of it. Possibly, possibly the craft CMS possibly. Um, so we took that same concept and, and applied it to the render arrays. We have here the same thing. Uh, we're, we're removing links and comments from the comp, from the content and printing it out in one shot. So it's in context with what you're trying to do. Then if I print just the links, I can say content dot links and I can print only the links and it's just kind of a lot easier to kind of drill down that way and grab the things that you want when you want them. I could also print links twice if I want to. And, uh, on the last one there, um, I'm removing the without and I'm printing the entire thing again. And I didn't have to worry about later up in the code that I hide that or not, I can just print it out. So you're always acting on the entire object. Yeah. And so this, this kind of, I mean, we didn't change render arrays. Render arrays still have this state of whether they're printed or not. But, um, we kind of don't care about that in twig templates. We don't keep track of that state, um, because there was actually kind of like a hack in, in like earlier versions of Drupal 8, um, where, again, it was causing all this overhead and stuff basically just to support this show and I think, which was like very unintuitive. So we have this, it works for render arrays, it works for attributes. Um, we hope you like it. We also got twig in the D8D theme system. Whoops. I guess we should have mentioned that earlier. And we also get some pretty fun toys with twig. Um, we get twig debug, which is like one of my favorite things ever and Morton's as well. Um, so this shows you a lot of, a lot, a lot, a lot of useful information, no disrespect to the developers of, uh, what is it, theme developer or develop themer. But, um, yeah, again, no disrespect, but we just think this is the better solution. Um, so this shows you all of your potential theme suggestions. If you add your own theme suggestions, they'll show up here as well. And the little X, uh, little X, the little X shows you which one is actually being used. You also get the full path to the actual templates. So if you want to override it, you can just say, oh, that one, copy it to your, uh, template directory and you're good to go. Um, we may potentially get a checkbox in the UI for turning this on. And before DA comes out, uh, there's an issue for that. But, uh, for now you go into your, uh, like sites default services.yaml and you change, they'll already be a line there that says, um, debug equals false and you just change that to true and, uh, clear your cache and then you'll see all this goodness. And, um, by the way, uh, twig is also improving Drupal 7. What's up? So we have theme debug in, if you have Drupal 7.33 or higher, uh, you can just add in your settings, PHP, uh, con theme debug equals true and you get the pretty much the exact same thing that's in Drupal 8. So, um, yeah. Um, so that this is why we have this slide in here. Because people don't know this. So, sorry. Not sorry. Um, and the only real, like this is awesome that it's in Drupal 7, but it kind of comes with a caveat that most of the stuff in Drupal 7 is coming from theme functions. So, this only works for templates, okay? So, it'll work for your page templates, node templates, all that kind of stuff. But it's not going to work for like, theme item list or like, theme links or any of those things. So, but still very, very useful and I use this like pretty much every day in my day job now. So, yeah, good stuff. Uh, now let's talk about sandwiches, uh, in an attempt to get you all ready for dinner, I guess. Or, yeah, I don't know. Sandwiches for dinner? Uh, the code for this is all up on GitHub. Um, and actually while I have this up, um, I should mention that the session node for this talk will have the link to the slides and all these links are going to be live and stuff. So, um, yeah, should have mentioned that earlier, but there you go. Talk us through how we can make a sandwich with Drupal 8. Okay, um, I want to kind of describe how you would build something that's themeable for the theme system. It's very similar to Drupal 7. So, if you haven't done it in Drupal 7, you can actually do this in Drupal 7 or 8, um, more or less the same way. So, the first, I liked it to describe it as you're defining what variables you can pass to the template. Um, and so you're, you're creating a template, you want to mark it up, but you also want to pass data to it. So, you want to define what that template can accept. Um, this is what you do in theme, or hook theme. And so, in this case, our module's called sandwich and we create a, um, a hook theme called sandwich theme and then we just pass back the name of our, uh, the theme that we're, the template that we're trying to create called sandwich and we set up the variables that we want and we can actually default them to, to specific values in here. We're just setting them to empty arrays and strings, um, just to kind of prep them. And then next, we're actually building out the values, or building out the data that we want to pass to the template. So, this is actually somebody actually using this, um, this themeable output and trying to send data to a template. So, the first thing we do here is, um, we're returning a renderable array. That's the square bracket at the top. We've got theme and then the name of the, the theme and you've probably done this in triple seven a number of times and you're going to be passing all the different values. There's only a little difference here as you see that t function is actually inside of, um, is injected and that's a, like a injected, injected inside of the, the controller. Um, which is what we're doing with, uh, Drupal eight now is in controllers instead of menu hooks. Um, and each variable gets passed to the template and then the next one is we're inside of the template and you can actually, uh, see all those variables being printed out. We're checking to see if the values are, are there and then printing markup around them. Uh, the, the if and end if is, is your control structures. You see with a percent sign and then the curly brackets, the double curly brackets are how you print things in, in tweak templates. And even though like array or attributes was, uh, an array, it gets converted to that array object that we're talking about earlier and you can print it out as if it was nothing. All a render, all arrays actually are treated as renderable, renderable arrays, renderable arrays inside of, um, the tweak template and will, um, will be printed out. So I'm sure Morton went over this, but in Drupal 7, you had to, if you had a renderable array, you had to know that it was in a renderable array and then you had to say render parentheses, pass it in there and then print that. Now you just print that variable and it's a lot easier to work with and you can also check it the same way. And then, yeah, voila. Uh, this is what I styled it as. Um, so I made, I made that variable, um, sorry, that renderable array print out two sets of, uh, menu items and styled the output and that is up on, uh, GitHub for you to play with and try messing around with and making different kinds of sandwiches. And, uh, we'll show you this code actually working cause we have a demo that will tie into this, uh, in a short little while. Uh, but before we do that, we're going to talk about a few more things. So, um, this, um, really before I get into this, I'll just, I want to emphasize that basically this hasn't changed very much between Drupal 7 and Drupal 8, uh, with the exception of those theme suggestion hooks that I was talking about earlier. Basically just the only difference is that things, well, on, on a, uh, high level, the only thing that has really changed is that some of this code has been moved to classes. So, um, Drupal render is what you, what gets called on your render array. So if you've got like, uh, let's say like a block or like a page controller or something, uh, or a page callback, uh, in Drupal 7, um, you would, you could return a render array from that and then Drupal will call Drupal render on it. And inside of there, um, pre, any pre-render callbacks you've added, uh, can be, will be called. Joel will be talking a little bit more about those later. And then the actual theme function is called. Inside of there, you get your pre-process functions. Inside of your pre-process functions, you get your suggestions and then, uh, your, your actual template or your theme function is rendered. And then you have the post render, which seems like a really kind of weird step because, you know, like we were saying earlier, like, you know, why would you want to manipulate this string of HTML? Because in, in our last step here in post render, it is a string of HTML. But, uh, basically the use case for that would be if you have some kind of customization, uh, that you could, you could still cash something and then the post render could, could fill in, like, let's say the person's name or something like that. So you could have all of it cashed and then you could just have like a little placeholder or something and then post render would put in the person's name. And if I'm not mistaken, I think the, um, the messages block works like that in Drupal 8. Um, don't quote me on that, but maybe. Uh, Drupal 8, like I said, like, these things look kind of scary, like this Drupal service stuff. If you haven't seen it, don't worry about it, we're not going to talk about it. Um, basically the code has moved is the main thing. Um, everything in here is all the same other than, like I said, the theme suggestion hooks are now a discrete step before pre-process. That's it. And, uh, so now Joel is going to talk about type and give you the Kohl's notes. Um, I just a back story here. I don't like types that much, um, but they have some very good use cases for them. Um, and yeah, Kohl's Kohl's notes is a Canadianism, just so you know. So, yeah. They're, I think most people know them as cliff notes. Yeah. Yeah. Yeah. Just, uh, Kohl's is a bookstore in Canada. And yeah, I think it's they sell the content would be different, but exact same idea. Yeah. Yeah. More maple syrup, I think. The pages are pretty sticky. It's hard to. Um, so in Drupal 7, we had these element info hooks that you can use to define these. And the reason why we have these things is to give repeatable, reusable types of renderable arrays so that you don't have to define all the different properties that you looked at earlier, uh, over and over again. Um, and the main one that I see in Drupal 7 and Drupal 8 is, is, uh, a pre-render hook, sorry, a pre-render callback. And in this case here, I just have an example of HTML tag. Um, it just, in our case, it's used for making a script or a style tag in the header. Um, and it allows you to, it has a little bit of a pre-render hook in there to wrap conditional, conditional HTML tags around for IE. And it allows you to pass some attributes. So it'll be like the source attribute and the, uh, Rafa attribute, etc. And then possibly a value if it's one of those, uh, tags with a value. So that's a very generic render element. Um, and in Drupal 8, it's very similar. The big difference there is like, if you look at, like side by side, they're doing exactly the same thing. Just we've moved them into an, an object. And that object is discoverable. So there's no hook there. It's finding it based on that little attribute says app render element. And then that HTML tag is mapped to where it says types on the other side. Everything else is identical. And, um, and we, but the big difference here is all the things that it's, that's, that it's working with the pre-render is actually inside the object. So it's like contained within there. There's not these extra functions that are in the global namespace for, um, just kind of messing with things. It's all part of this render element type. Or inside of this one, specifically the HTML tag has its own pre-render, uh, methods. So encapsulates a lot better, um, and it's discoverable quite a bit easier for it to be discoverable by these little plugin annotations. Kind of weird to look at the annotations too, but they, they, they work really well. Um, and the next is that, like, I, I kind of see them as using them as deep, uh, as a set of defaults of the properties or values that I'm passing along to my, my, uh, tweak template. But I've also, um, it doesn't necessarily have to, um, use a theme. It's a renderable array that can be used with just a pre-process. In this case, Link actually does that. It doesn't actually use a template. There's no real reason to make a template for a Link tag. So it uses a pre-render and then just renders the output, um, using pound markup. And, um, you can see the, the pre-render code there, um, is doing a lot of extra work for us, but we wouldn't want to write that extra code, um, for every single Link that we're generating to, that would be just horrible. So what we do is we wrap it up in this, this type and then all I have to do is create type Link, pass a title, pass a URL to it and boom, the Link will, will deal with things like maybe it's an active Link and it'll put the active class on it or maybe it's, uh, uh, needs to be set up for AJAX or something like that and it puts the AJAX information on it as well. It allows us to kind of reuse code and that's the main purpose behind it. Um, we would love to join the two where we have the hook, hook theme and, and hook type, but we haven't got around to do that yet, but, um, yeah, this allows us to reuse some of our code and we use this mainly for forms. We also have a new one called type table that allows us to put like the infinite Zebra, Zebra striping stuff on there and the, yeah, on sticky tables, sticky header tables and stuff like that and all the JavaScript as well. Talk about twig magic because twig is magical. This is, this is one of the coolest things about twig and, uh, just to quickly mention, uh, you know, features often come at a cost. This is also one of the slowest parts of twigs. It has to do so much. Um, but there is a twig extension available for PHP. Um, and just recently, a sort of a little bit of code was added so that when you go to the status report on your Drupal 8 site, it'll say, hey, like, I noticed you don't have the twig extension and it gives you a link to documentation on how you can set that up. And, you know, it'll depend on if your host supports it or not, but that basically makes this kind of process, um, quicker because it compiles it to it has a, uh, like a C version of that. So anyway, um, so when you do sandwich.cheese within a twig template, this is kind of like a short version of all the stuff that it's going to try and the order that it's going to try to get that cheese for you and put it in your mouth. So, uh, the first thing it'll do is it'll see, okay, is this an array and it'll just grab it from the array. Uh, next it'll see if it's an object and the, that one also works for, um, the magic is set and get and frankly, I understand all of this stuff. Joel understands a lot better, uh, but we're, we don't really need to explain this. It's just if you, yeah, it's just there. It's going to go through every single one of those ones to try to find, uh, that variable. And it's the reason why it does that is so that you can think of, uh, a hasher array or a object in the same way into it. You don't have to say, oh, is this an object? Oh, okay. I have to treat it a little bit differently. Oh, is it an array? I have to treat it a little bit differently. You can treat them both the same. So sandwich.cheese, um, coming from PHP, you don't have to know what kind of thing it is in PHP. You just know that there's a, there's a property on sandwich called cheese and you want to get the value of that. Yeah, that's very good. Thank you. Thank you for mentioning that, Joel. So, and then, yeah, just going down the list, if you've got a cheese method, we'll call that if you've got get cheese or if you've got his cheese and the last one, um, I really don't understand. But anyway, it's there. So, um, Joel, you talk about, uh, cover some auto escape stuff. So this is another thing that we got from twig security so that, uh, front end developers don't have to worry about, like introducing all these crazy cross-site scripting vulnerabilities and stuff. Okay. So auto escape is what was a little bit tricky for me to grasp my head around when I was looking at how can we get this into core because it's usually done with frameworks and not with CMSs. And with, with frameworks, you have direct control of the variables that are coming into your system with CMSs. It could be coming from any number of entities or, or, um, with the wig tools that people are using. So it's a little bit of a trick situation. But what we've done, I think we've kind of gotten it working. And it was a lot of work, um, by a whole bunch of people to get this wrapped in there. In Drupal 7, you had to check plain, uh, things. So if you just, for example, took that variable, tried to print it into the template, uh, as, uh, just straight up, I'm going to print this objects variable, the user's first name, it would throw an XSS attack basically at you and you'd get a nice alert on the screen. Um, so what we have to do in Drupal 7 is we have to say, oh, that's user input. I have to, I have to make sure that it's sanitized before I put it onto the screen or else I'm going to get an XSS attack. Um, and so we check plain everything and we check plain things maybe too early or we check plain them in the template and people have to know that they have to check plain because, uh, if they don't, and I actually did this on the site recently and I realized I did and I was like, oh crap. So, um, I had to check plain it in my template, uh, and then in Drupal 8, we've switched it around. We've kind of turned it on its head and what to do that, whenever you print a variable in twig, it's going to assume that it's not safe and it's going to escape the values for you. And if you need the raw values, you can use raw, but it's still not a good idea because you'll get an XSS attack and that kind of stuff. Um, so you, you pipe raw, the pipe is a filter and it allows it to get the raw value of that variable, but if you just print it, you're going to be safe and that's, that's kind of a different way of looking at it. Instead of having to remember that you need to escape these variables, it's going to escape them automatically and then you have to kind of, it's more of like slapping the face. Oh yeah, it's escaping my string that I just put as a, as a, as a HTML. I have to tell twig that it's safe and there's a few methods to do that. I'm not going to go into the details on that. You can ask questions on that one later. I'm just going to give you a little bit of a overview of what we're trying to change here. Actually, sorry, I missed a slide here. Well, we could have put it in the slide. Anyway, quick demo time. I should have actually done this after the twig magic. So let me go back there for a second and yeah, and then we'll have some time for questions. So I just want to kind of show a couple of things. So Morton, Morton mentioned kint. So we'll kind of do a live demo of that and show you how that allows you to access the mystical powers of twig magic. So first of all, let me just get the per case. So sandwich it's beautiful, isn't it? OK, so make that nice and big and everyone kind of see that. OK, I'm going to uncomment them so it'll be easier to read. So to just see all of the variables that are in your template, you just do double curly brackets and then kint function with the two parentheses. And you have to have twig debug on. And by the way, kint is it's a sub module kind of the develop module. So if you're used to using like DPM or things like that or KPR or any of those, it's the same idea, same module. So we're getting this. I put this in the sandwich dot html dot twig template, that line. So we're getting this. We're getting two sandwiches being rendered here. So we get two little kint output things. And we can see all the stuff that's coming through. So we can see like attributes. We can see some of the strings and things and the arrays that are coming through. And this is, it's pretty similar to Krumo. The thing that I really like about it is this thing right here, in particular, available methods because this is what allows you to be magical with twig. So let me switch back here for a second. So if you notice here, we've got yet cheese. Because that's the convention for the get method. So if for some reason, just as an example, if we wanted to print the user's name like, hey, name of user or user's email or something, would you like this sandwich? We could do it using user up here. Whoops, user.email as an example. That will call that method and it'll grab it for us and it'll just work or we can do username. So let's do username. Actually, that's kind of a better one. So coming back to our twig template, we can do user.username, was it? Yeah, okay, anonymous. Anonymous person, would you like a sandwich? But that's pretty easy, right? Like even though this is some kind of crazy newfangled drooblade object, you can look at the methods on it and you can, most of the time, you can just kind of guess and see, okay. You know, get username. Yeah, we'll try that and you can grab stuff out of there and you'll be able to do that on things like node objects and stuff too, like if you want to grab like a node ID or things like that. So there's your twig magic and yeah, just if you get a chance, please evaluate our session. Let us know what you thought. Something you learned, something you wish we would have covered, whatever you want to put in there, we would really appreciate it. That's a good question. It's, I think it converts it to, I think it converts it all to lowercase. Oh, the slide. Oh, okay, okay. This thing, yes. So I believe it converts the whole thing to lowercase so that you don't have to worry about the whole like camel case or whatever. I think it just converts all lowercase. Or it's, yeah, I think it does that. Or it's case insensitive. Either or, I could try, we could try it right now. Like in general, twig is pretty forgiving and it'll, the errors are pretty good, in my opinion. Yeah, so it still works. So great question. Yep. Okay, there you go. So thank you, Steve. So, yeah, it works. Okay, yeah, so, so yeah, basically questions. I don't think there's a mic, but just raise your hand after the curly brackets or inside. The answer is it's not important, but it's a coding standards thing. Like that's part of the twig coding standards. So we just, we go by that. It doesn't carry either way, but it's just, it kind of looks cleaner. Similar to how like the Drupal coding standard of like putting dots around your, or spaces around your dots when you're concatenating. Whoops. So, yeah. And actually, before we take any more questions, I just want to mention, if anyone's interested in this stuff and kind of diving in, like we're going to be sprinting on Friday. So come find the front end United people if you're interested in that. We also have an IRC channel, Drupal twig and Drupal twig hashtag on Twitter and all that kind of stuff. You can also tweet us questions and we have like a Google hangout every couple of weeks where we just kind of get together and all our crazy time zones and talk through this stuff. So if you're interested in helping us out, that would be awesome. But yeah, any more questions? Oh, sorry. Okay, so the question was basically, I'm going to try and paraphrase. So basically, one of the kind of good things we got from twig is that you can't like drop your node table from a template. This is a good thing. But so what Steve mentioned is that if you like that debug stuff we were just showing, it shows you all the methods that you call in the user objects. So like potentially I could maybe like delete that user or something from the template. And this is bad. I haven't thought about this. So I don't know what to say to that. That's, I'm shocked and appalled. Twig, you got to own up for this twig. I'm missing the theme functions anonymous. You see. They are. It's not all the speed. We did a lot of performance testing actually to get these templates from theme functions to template files. And actually some of the ones that are remaining are the slow ones that we couldn't justify the performance degradation on them. So if they get called a lot, they would have, and on a typical page, they would have a large one. But typically we were seeing like 1% regression. Sometimes if we fixed some of the preprocess we actually got things to go faster in some situations. So we tweaked it a little bit. But yeah, there's more work to generate, to read from a template file. Even if it's actually compiled to PHP, which is what twig is actually compiled to PHP and it's running as it if it is. But inside that PHP file that looks kind of like a theme function, it's doing a lot more than what it did before. And that's actually the main thing. It's actually doing that escaping for you. And that's kind of expensive. And it's doing some magic finding some of the names for you. So that's kind of expensive. So, but we didn't see that large of a regression. That's how we got it in. And we had to do hours and hours of profiling on these templates to get them in. Thank you Fabian X. Yeah. Back there. Yeah, Fabian got us. He got us a helper kit to make sure that we could actually run these tests and it runs thousands of times and gives us the best results on both sides to see if they would be there. So yes, they are slower in some cases, but not by much for the ones that we got in. The ones that we haven't got in, we haven't been able to optimize them. There's like we said, 12 left. And if they're on the admin side, we didn't take that much care on that side of it. But yeah, on the front end side, we had to be very particular about the speed. Thank you. Christopher? Sorry, can you repeat that? Cause double escaping, yes. Yeah. Yeah. It's kind of a whole other topic. I'll talk for half an hour on that with you. Yeah. It's complicated, yeah. But there's a few critical escaping issues and we're gonna be working on those things. But if you wanna really know what's happening there, come hang out with me and I'll show you. No, not particularly, no. Okay, yeah. Okay, so the question is like, will there be a freeze on markup roughly? Okay, so the answer is that markup is frozen once the first release candidate comes out. So if you wanna help us and help Morton kill some divs, now's the time. Okay, so the question was basically there's this kind of infamous diagram of the Drupal 7 theme system, right? That's what you're talking with, all the bubbles and stuff. And whether the fact that there's still theme functions in Drupal 8 was kind of a matter of time and whether there'll be theme functions in Drupal 9 or something completely different. So I think the answer is that yes, it absolutely was a matter of time and resources. At the same time, there is these performance issues but given resources, maybe we could solve that. It's hard to say. There are definitely some theme functions that are in there and it's not because of performance that they're not converted, it's just no one really cares about them. It's not like it's like the node template, it's like some random admin template that's like on one page. And then I think, yeah, Drupal 9 probably will be very, very different. I think it would probably use some sort of template system still but theme functions I, unless there's still performance issues, I don't really see those sticking around. I think basically we would convert all those to the hash type thing that Joel was talking about so that they'd just be these small little compact things. Right, so the question is, is there something actually saying that theme functions are deprecated? I'm pretty sure the answer is no. Sort of the problem with having all of our APIs live in these big nested arrays is it's really hard to document when something is deprecated. So I'm not saying we can't do it, but a couple of things that stop that from happening though is we've set the hook theme is now set for templates by default, whereas before it was actually set for theme functions by default. So we converted that part there. And another thing is actually the theme function itself no longer exists. It got moved a little bit around and for a while it was underscore theme so that people wouldn't be using it directly. But now it's kind of in its own little bucket on a different thing. So yeah, it's just hiding now. So we, yeah. Well, and also I'll let you know in a secret, PHP template is still hiding in Drupal 8 in a dark, damp corner, just begging for mercy. It's still there, it still works, but no, does anyone want to use it? Yeah, that's the other thing. Yeah, yeah, yeah. It's not like it's super hidden. Like you can, in your info file and your theme, you can set the engine to PHP template. We're just, we've delegated, we've delegated Twig to manage the check plane like I was showing there. So it's kind of like up to the person that's creating the templates in PHP template to escape those things in their theme now, whereas before we might have been doing it before for you and now it's kind of all on your plate if you're going to be implementing a PHP template stuff. So it's a lot more work. Well, I guess we should let you go and have some dinner or something. Thank you all for coming. Was this your volunteer thing? Quig render or whatever, you're passing the name of the template and the variables, that's the basic of Quig, right? So on your other system, the same thing is going to happen. As long as the variables are the same, going into the template, you can do that. And I've seen some other people do, they're using Sculpin, because it has Quig as the basic example. So things are like really haywire that's used in my digital back, is like for sure with Quig. For sure, let me, passing the variables for the new system. You see man, I love magic. You don't want too much magic, we've actually taken out a lot of magic. So yeah, but like Quig magic is like, it's in a way that you can understand it and structure it. No, I love what's happening. Like it's kind of disquieting. This is how I do it. So this is like the sandwich, the only template that we have is, you can do this on any template. So I've got, environment settings are, because if you've got,