 All right. They have set me free. So applause for these guys right here. So yes. Hopefully, it will be a little bit more interesting if I can move around. We'll probably trip over this a little bit. Welcome, man. It's 5 p.m. and I can't believe you guys are all here. So nice job making this. Thank you for filling the room. This is awesome. It will be well worth it. So the title I have up here is Being Dangerous with Twig. It's a slightly different title on the actual thing, but we had such a cool Harry Potter font for Dangerous. I didn't want to change it to something else. So that's why we did that. Hold on one second here. Let's hit that. The actual unofficial title of this talk is This, Being Dangerous with Twig. So you can basically read through this. All the features of Twig basically right there ready to go. So it's hard to distill all the great things about Twig down into one title. So that's actually the real title of this talk. All right. This is where I get to talk about myself. I'm in the lead for the symphony documentation. Actually, we actually have a really great team around me, but I'm in the lead for the symphony documentation. If you are interested in using symphony, you start using symphony and you hit some problems, please do come over to GitHub, make a poll request. If you've never done that before, we're the friendliest place to start doing that. If you don't even speak English as your first language, it's cool. We have a great team that will help you like fix any mistakes you have. And symphony, it was originally originated out of France. So if you do speak English, you actually kind of immediately rise to the top of the symphony documentation rule. So like, oh, you speak English as a first language. It's like, all right, we need you. So this is a great way to contribute. I work for KB Labs US. We are symphony consulting and I am a writer for KB University. We do screencasts on symphony, dependency injection, those types of things. Some of them are paid, some of them are free, like dependency injection. So check that out as well. And my biggest accomplishment in life is that I married up. I married way up. So I'm the husband of the much more talented Lana Palm, who is right here in front trying to hide. Hey, you should point, there you go. Thank you. Thank you. Yeah, right there. Yeah, so you can give her condolences later. Okay, on to the serious stuff. Birthday wishes. So let's start. Happy birthday to my dad. So my dad is now on a fish search. This is as close as my dad will ever get to a tech conference. So happy birthday to my dad. Let's see who else here. Happy birthday to Anne Sophie. She is the brains behind Sensio Labs. You may have heard of Fabien Patancier, the lead developer of symphony. Actually, she's the brains behind everything. So it's her birthday as well. And she is here. And she's actually in the room now. So but find her later and wish her happy birthday as well. See what other friends have birthdays today. Ah, Raphael Nadal and Anderson Cooper. So they're here in the conference somewhere, I think. So if you see them wish them a happy birthday as well. All right, now the for serious, for serious stuff. Twig. All right, so why twig act one? Because template engines are awesome. And so let's let's go and invent something. Actually, I'm gonna kick off my sandals here. There we go. So let's imagine that we have a templating engine called Ryan's fantasy templating engine. And templating engines are really simple. Okay, we have this object here, we can kind of load a template called Drupal condo PHP. And then we're going to want to render it, we'll pass it in array of variables. So I'm passing a variable called place. And then there's the Drupal condo PHP template down there. It would now echo the place variable. And maybe we can call some other functions. Okay, you guys are all somewhat familiar with this idea. The big takeaway here is that templating engines are just an input output. We basically say the input is this templating file and these variables. And the output is the finished HTML or the finished string. Very, very simple tool. This is good. Oh, and the one other thing, of course, templating engines are the should give you is some extras, right? Because we're not in PHP code, we're not writing like hardcore business logic. So she gives us some shortcuts, maybe some functions, maybe some other nice sugar so that we can keep our templates looking nice and do a template type of things. So ultimately, like a template engine is just a tool that you can use. So why not just use PHP templates? If you guys have done obviously Drupal seven theme, you're used to sort of the PHP templates. And there's nothing wrong with PHP templates, but there are a couple of disadvantages. One of them, maybe you care about this, maybe you don't, is that PHP templates are actually like a big hack. If you've ever looked at a PHP template engine, there's a spot that actually says include whatever your template file is dot PHP actually before this, it does like an output start basically stops the output buffering. It includes that file physically. And then it stops the output buffering and tries to capture whatever it is that you just echoed out. It's kind of this weird little hack in the middle of your code. Even symphony's PHP had symphony as like a PHP template engine and symphony's code is like all beautiful object oriented dependency injection. And all of a sudden in the middle of this one beautiful class, you have like this include statement with output buffering and other ugly stuff. There's also no no template inheritance or fake template inheritance. I'll talk about template inheritance is going to help you guys out immensely in Drupal. And there's no isolation, which means that the PHP templates have access to like all the variables, global variables, global functions, you can make database calls, which I mean, some some of you might be thinking like, that's awesome, I like making database calls for my template. But you know, sort of not awesome. Yeah, I'm seeing this one one guys like no, please take that that weapon away from me. All right, so we want the want to keep the kind of brevity of templates, but we want to kind of the isolation of object oriented programming. So introducing twig, etc. It's fast, blah, blah, blah, blah, blah. This is basically off of twig's homepage. So let's actually see what this is. So thing number one is that twig is you'll notice is very, very short. It syntax is very short and easy to read. And ultimately, it compiles down to a PHP object. So we have a twig template. But when twig actually renders that it compiles it down to a PHP object, or PHP class. And you'll see that in a second. So let's see this in action. All right, so this is our PHP template, not like a Drupal seven theme, but like, you know, if we were to write a PHP template, include header, we have some blogs, echoing data, etc, etc, fairly straightforward stuff. All right, so you're ready. And there's the twig version of that. It got slightly smaller, which is good. That's not the whole point, though. So it's basically a very similar thing. We're iterating over the blogs, we're echoing blogs title, we're echoing some date stuff. I'm going to go through all of the syntaxes and things. So we don't have to be like, what is the curly brace percent thing doing? We'll talk about that in a second. But it looks very similar. And ultimately, you may not care about this. I totally meant to get rid of that text behind there. Ultimately, not care about this, but this is actually what it compiles down to. You'll see this if you dig inside in Drupal eight, you can actually go find the compiled version of your template. In twig, we had a block body, we'll talk about blocks, it has to do with inheritance. We have a block body, and it iterates over the blog blogs, and starts dumping some stuff out. Here, we have a block body function. And then you can see it echoes some content, and then it does a for each, then it echoes an h2. I mean, it's just literally in ugly PHP code, exactly what you did inside of your twig template. So again, you're not going to care about that day by day, but that's what's really going on behind the scenes. And heck, if you really get bamboozled by something in twig, it's acting weird. You could just go look at that file and say, what the heck are you doing, twig? Oh, okay. So backing up like a moment of templating zen, I want to remember that the purpose of templates is to express presentation, not program logic. And that goes back to that not making database calls things. So twig is going to be something that this is nice to have, something that is going to look cleaner and simpler. It's going to simplify things. So we can kind of focus on what we're trying to display and not like all the weird function calls we need to do. And it's also going to sandbox us a little bit, which may people uncomfortable at first, you're like, whoa, you can't, I can't call php functions anymore from inside twig. That's true. You can't just call random php functions from inside twig. But trust me, you're not going to get overly sandbox. It's going to properly sandbox you. And if you do need to do something custom and twig, I'll show you later, there are ways to do that. So ultimately, you're like, no, I actually do need to be able to call this php function from twig. You can do that. But we want to start here and kind of like simplify our templates. By the way, this is significant Django, you know, Python framework because twig is based off of Jinja, which is Django's templating engine. It's kind of like a side benefit. Like when twig first came out and was getting popular, all the editors instantly had code highlighting highlighting for it. Because they were like, yes, we support twig. They're like, add twig, just make a copy of the Jinja highlighting. And now, you know, and then our editor will have support for it. So there's like little overlap things like that, that are that are kind of nice because it shares the same syntax. And last thing before we actually dive in is that twig can be used anywhere. So again, just twig is a tool we're going to talk about what it can do. And I'll show you kind of what it looks like inside of Drupal. But it can just be used anywhere. And I know lots of people that bring this into like their random legacy php projects. It looks like this, you create a couple objects, you render a template, you pass a variable in kind of like what I saw before. And then down below, and again, I'll talk about the syntax, just echoing out that name variable. So it's all about having a twig template, and just passing variables into it. So you can totally just use it directly. See, it was all four lines of code to initialize the whole twig engine, and then render something. All right. So let's talk about how simple twig can be. All right. So twig has exactly three tags. So twig, obviously you guys could kind of tell twig is just like php where if you write HTML, it's just HTML until you open up, open up php, until you open up to a twig, open up twig tag. There's three tags, comment tag, the print tag, and the block tag. So first, the hard one, the comment tag, I call this the do nothing tag curly brace percent. It's a comment, easy. It can be single line. It can be multiple line. It does nothing. It's a comment, boom, 33% of the way home. The second one, the say something tag. If what you want to do is print content, if they like ultimately you're like, I'm about to multiply three times five and reverse it and do all those other things so that I can print it. You're going to have curly brace, curly brace, and then whatever it is that you're printing. So you see up top, I have curly, curly print me. That's literally just printing the string that's like echo, you know, string print me down there where I have curly, curly foo foo is a variable in that case. So it works just like PHP except we don't have the dollar sign. So foo is a variable there. And I'll talk about the little pipe thing down there, but name is a variable down there. Upper is what's called a filter and I'll talk about those in a second. Point is if you're printing something, it is curly, curly. I don't care if you're, you know, doing a million other things. If ultimately you're printing something, it's curly, curly. So that's number two. So now we're most of the way there. And number three to round it off. I sounded like a some sort of an announcer right there. Number three, the do something tag. If you're not printing something, but you're doing something, some sort of a language construct like an if statement and if statement is not printing something, that's some sort of language construct a for like a loop, that's not printing something. You might print something inside of there, but that's not printing on its own. If you're doing something, it's curly brace percent. The key thing with this do something tag is that it's always curly brace percent and then a keyword like curly brace percent set or curly brace percent if. There are a finite number of these do something tags. Like you can't just say curly brace percent Drupal con. That doesn't make sense. It's curly brace percent set, curly brace percent if. And if you go to twigs documentation, it'll actually tell you the 15 or so do something tags. There are, there aren't that many. Okay. So you just kind of get used to the five or so that you need like if statements and loops and a couple other ones. And that's what you're going to have. And that's what you'll use. And some of these have n tags and some of them don't. You can see the set there. It's just like curly brace percent set. And then with if there's like an opening if and then there's a closing if as well. So the big takeaway here is three tags. One does nothing. One prints things. And the third one does things, but there's only about five or so do something tags that you even care about. And that's it. All right. So this is where it's even going to start looking even more like what you guys are used to like a PHP land. So everything is an expression. So actually let's talk about expressions and PHP. We all know what an expression is even if it's not a super familiar term with us. So the expressions are the inside. So in PHP, the dollar sign food dot dollar sign bar is an expression. We all know the expression gets this variable concatenates it with that variable. That's the expression. I is less than 50. That's an expression. We all understand how these work. This is the core of PHP in the core of JavaScript, the core of every single language has these expressions. So twig also has expressions and they're going to feel very, very similar. It's the exact the guts of twig are the exact same things that you're already doing. So for example, the foo up there, that's a variable. It's not a very complicated expression, but just like dollar sign foo, there's foo foo equals bar. That's just like PHP. That's an expression. You're setting a variable. The, let's see here, which one should I get to? Range. I'll explain some of these pieces here in a second. Range is a function. We all understand how functions work. This is a function that takes three arguments. I don't need to explain that to you guys because you guys all know functions like the back of your hand. Twig has functions. They look and work exactly the same way as they do in PHP and JavaScript and every other language that you've ever used. So on the inside, twig is exactly the same as every language that you're used to. I'll show a couple more examples later. And then I just want to highlight here. I have green is, you know, just remember when you use the do something tag, the curly brace percent, it's always curly brace percent. And then like the one keyword that's like, okay, which do something tag are you using? So expressions can consist of many things. Again, just like as I'm going through this, add dollar signs to whatever I say and be like, oh, yeah, it's just like PHP. By the way, how about that photo, right? Yeah. Leanna actually added that. And it caught me off guard like when I was going through the slides like half an hour ago, I forgot about it. All right. So what kinds of things can we have inside of expressions? We can have strings, numbers and variables just like PHP. There's a string, there's a couple of numbers, and there's a variable. Variables don't have the dollar sign other than that to the same. So kind of like JavaScript in that sense. Okay, we got it. What else? Arrays and hashes. So this is a slightly different thing than than we have in PHP. So in PHP, we have associated arrays and indexed arrays, but there's no difference. It's just, did you set like a key or not set a key? In twig, there is a difference. So if you actually have an array, an indexed array, you use the square bracket. So I have an apples and oranges. So if you think of that in PHP, it's like an array who's zero indexes, apples, and who's one index is oranges. And then down there, if you actually have an associated array called a hash, you'll have the curly brace guys on the bottom. So you guys key value pair. And notice this is exactly like JSON. It's this is the JSON syntax. And yeah, exactly like JSON. I was going to say about that. Oh, one quick thing. So plant this in the back of your head for later. This is called a hash, the second thing. And you notice that hashes have curly braces. And notice that curly braces are also what are always on the outside of twig. So sometimes you'll hear an error and twig that says like unclosed hash on line 13 of your twig template. And you're like, what the heck is a hash? Is that the pound sign? Is it saying I have an unclosed pound sign? No, it's actually talking about unclosed curly brace. So hash is curly brace. So twig error. We'll talk about hashes. It's talking about curly braces. All right. Twig also has operators exactly like before. There's some nice additions to the operators. We have plus, of course, we have an and operator, which is a, you know, equivalent to ampersand ampersand. They also have an in operator, which is basically similar to using the in array functions. This is kind of the syntax syntactic sugar things I'm talking about. You don't have to call an in array function. You can kind of just use human language and say, if Apple is in that array, then let's do something. The one dot dot 10, that dot dot is also an operator. One dot dot 10 turns into an array with 10 elements. One, two, three, four, five, six, seven, eight, nine, 10, that kind of stuff. And then the till day is actually the concatenation. So the dot inside of PHP. So same exact things. Well, I mean, same exact things. Plus we have a couple extra things. So filters, I talked about these earlier. So so far we basically have, you know, like numbers and variables. And we have operators, like the most basic day one of stuff that you would have learned in any programming language. Filters are like one of the first different things. They're very, very easy and they're very, they're one of the things that are going to make your templates really, really look good and be very powerful. So a filter is basically, you have some value to the left, like let's say that some underscore date, that's a variable. Let's say that's like a date time object that's set to yesterday. We use the pipe and it basically sends that value into the date filter. So if you're, you know, unless, you know, if you're used to the Unix command line, this is exactly the same thing. You always like, you know, do something like pipe it into grep and whatever is returned like goes into grep. It's the exact same thing. So that some date goes through the date filter and the date filter, you know, basically that is the format that it's going to turn into. Same thing down there. We have a range function. Again, functions work just like normal functions. The range function, by the way, is another way to make like an array that's like one through 10 or sorry, in this case, zero through 10. So you have the range and we pipe that into the reverse filter, which reverses it. Again, if you look at twigs docs, there's just a bunch of built-in filters, maybe 30 or so built-in filters, upper, lower, reverse, and I'll show you a couple other ones. So you'll notice that they're exactly like functions. Like let's look at that reverse filter. Let's imagine that that was a function, not a filter. How would that read? We'd actually have for i in reverse, open parentheses, range, open parentheses, zero comma 10, close parentheses, close parentheses, right? We just wrap it. This looks a lot better, and that's basically the purpose of filters. Filters are just like functions, except because you can put them to the right, you don't end up with like parentheses on top of parentheses on top of parentheses. So it's just like a nice syntax thing. And of course functions. We have functions. I won't even talk about them. There are built-in functions. And you can, well, I'll talk about that in a second. They're built-in functions that work exactly like you'd expect. So in this case, we're actually piping through the date filter, and then I'm using this constant function to supply the format that I want. Cool. So we have strings, numbers and variables, arrays and hashes, operators, that's all basic stuff. Filters are a new thing, but they're super-duper-easy. And functions are exactly like we have inside of PHP. So it's the exact same thing, plus a couple of extras. And the fact that you can modify or add to any of these. So like the, even, well, if you want to add your own custom filter, no problem. Custom function, no problem. If you want to add your own custom operator, because you're like, you know what would be great for job security, is if whenever I added something together, I used like two Ms. I was like, if three MM5 equals eight, job security, you can do that. You can introduce your own operators there, or even change the plus operator to be a minus. Right? That would be kind of fun. Good. Everyone's like, I thought this was supposed to make my template safer. Cool. So let's kind of see, kind of step up to a challenge here. So let's imagine that we have an array of like widgets, like some, some imaginary object called widget. And we're going to pass an array of these widgets into a twig template. We're going to iterate over them. I know we don't really do this anymore because we have fancier CSS. But we're going to add some odd, even rows as we iterate over them. And we're going to create some like pagination. All right. So here's where we're starting. So the do something tag, like one of the few do something tags that you will know, like the back of your hand is the four. By the way, there's no four and four each inside of twig. It's always four. Four is the loop. So I have some widgets variable on its four widget in widgets. So it's actually the opposite order of PHP where we say like for each widgets as widget. So for widget and widgets, we iterate over it and we have a widget variable. We say widget dot name and widget dot body. So imagine like widgets like some sort of object that has like a name property and a body property on it. Cool. And you can see we're using the block tag to do something tag and we're using the say something tag. Really, really simple. All right. So let's go further. All right. So let's use a couple of filters. Boom, widget dot name, pipe title. That's a built in filter. It title cases it easy. Next, widget dot body. Ah, cool. But we want to do a strip tags on there. So let's use that built in filter strip tags and let's just keep going and put that into a trunk gate filter. And that's basically going to shorten it to a certain amount. The trunk gate filter also has an optional argument which is the number, I believe of characters that you want to trunk out of it. So we could have said trunk gate open parentheses 100 or something like that. Cool. Oh, yeah. I forgot about that. I think that caught me off guard. And I just wanted to slide like 10 minutes ago. Okay. So the trunk gate filter isn't technically part of Twig's core, but there's a library of extensions. I'll talk about well, I'll talk about extensions right here. Extensions, everything inside of Twig, all the way down to the functions, the filters, the plus sign, those are all added via an extension or a group of extensions. Extensions are Twig's plug-in system. So if without any extensions, Twig actually doesn't do anything other than kind of understand what curly, curly means and what curly percent means, but it can't even add things together. So even the core functionality is an extension class that says I have a plus sign and when you put plus between two things, here's what that means. So when you guys want to add your own stuff, it's going to be you adding an extension that says I have a new filter or a new function called this. The library on the bottom there is just a repository full of a bunch of useful extensions. So if you plug those into your project, then there's some extra extensions you have like the Trunk A filter. And I'm going to talk about extensions a little bit more in a second. All right, let's keep going. All right. So here, I want to do the odd even. So cycle is a function. It's kind of a weird function that where you basically kind of give it like a number to the right and it just kind of goes back and forth over even an odd. So if five gives you even or five gives you odd, six gives you even seven gives you odd that type of thing. So that's cool. So that's a function right there. The real takeaway I want to show you is that loop variable. That loop variable comes out of thin air because we're inside of a four. Like I don't see it here, but like we're looping over our widgets, four widget in widgets. As soon as you're inside of a four, you have a loop variable. And you can say things like loop dot index and that's going to be one, two, three, four, five, six. If you want a zero index, there's a loop dot index zero. That's zero, one, two, three, four, five, whichever one you want. There's also other things like loop dot last. So you can say things like actually have this in a second, like if loop dot last, then I need to print something. So it kind of gives you context. So no more like setting an eye and then, you know, doing like a plus plus operator on it to try to keep track of like where you are inside of your array. All right. So a couple more filters here. The date filter, you guys saw that before. So widget dot added that and we can just pipe that right into date and do whatever form we want there. And that one's kind of cooled down on the bottom. Let's say that widget dot tags is some sort of an array of tags. We can send it to the join filter, which is the, oh, okay. All right. I'm going to say what I think is that I always get it wrong. I have to look up. That's just like implode, right? Implodes, explode, which one is which? Yes, that's so. It's just like implode that takes the array and turns it into a comma separated string. And then heck, let's pipe that into lower and lowercase all of those. So you can see like what that, think about what that would look like inside of PHP. You all know how to do it. It's simple. It's the exact same words practically, but you have things wrapped inside of things, wrapped inside of things. Cool. So, you know, all this is basically for like, you know, one of the biggest benefits is a convenience of readability. Like this right here, that's actually something you can do. That's built in. If you need to see if something's divisible by, you don't have to do like a percent four equals equals zero, modulus type of a thing. Or walk your front end developer through like the modules kind of stuff. You can say is divisible by four. That by the way is called a test. I didn't talk about that yet, but Twig has built in test like is odd. That's a test is even is divisible by is empty is defined. Those are all things that you can just say at any point inside of your Twig template. And you can even add your own. Like I've seen a project before where somebody was selling products. And they actually had in the Twig template, like if product is purchased. And what that actually did is looked up for the current user to see if the current user own that product and then return true or false. Which is pretty cool. Oh, and a little sugar here. Notice I have a four else tag. How cool is that? So no more like, you know, four and then if it was empty type of deal. If there's no widgets, then you automatically fall into your else of your four. Cool. And then page nation. This is just another example. We can use a radius function. Which basically if the current page is equal to five, then that gives you an array of three, four, five, six, seven. So now we're iterating over page in the array of three, four, five, six, seven. So that's going to print us like pages three, four, five, six, seven. And boom. There's that loop that last guy again, coming in to help us out. You know, because we want to add pipes, but we don't want an extra pipe on the end. So really easy loop that last. And you'll also notice just like PHP, just like JavaScript. If you're into it, we have the ternary syntax so notice I'm echoing loop dot last question mark empty string colon single pipe. And even has the shorter thing where you can do that question mark colon. I'll be even shorter if you know what I'm talking about. Oh, yeah, yeah. But the radius function doesn't actually exist either, which is cool. I did that on purpose. It's kind of handy because I want you guys to I want to show you guys what the tweak extension looks like for this. So okay. So we're like, this was really cool. I do want that radius function. It's very simple functionality. So let's create that. Again, it's called a twig extension. And I already told you this everything in twig is loaded by an extension and you can change stuff if you want to. By the way, if you want to get really crazy, you can even change the curly curlies to other things. So that's like mega job security. Change curly curly to QQ or something like that and really get crazy. So tweak extensions to say class, it has to extend that twig underscore extension. And then because we want to add a function, you override the get functions function to add your function. There's also a get filters function, a get tests function, a get operators functions, just override whichever thing you're trying to add. And it just looks like that. Hey, when somebody uses the radius function inside of any twig template, I want you to call that compute radius function and pass the arguments that they're passing. And it's just that easy. So the tweak extension is to say mat from when you call radius and twig, call compute radius inside of my code and I'll take it from here. And it's that simple. And this is something that you will probably do in your code. It's this is not like a super edge case. Like you're not going to do this every day, but it's it's fairly common to add like extra filters and functions in your code. And yes, there is a missing piece of like hooking this up. Like how does Drupal magically know that this classes exists? I'm not going to show that here, but it's a small amount of code involving services. It's kind of like, I'd have to get into service stuff. But basically, it's like four lines of code. Once you are comfortable with the service thing, it's like four lines of code. This is I have this class and it's a tweak extension. It's a little bit of YAML that you would do to basically hook this up inside of a configuration file. Cool. Oh, yeah. And if you want to know about that side of things, the services side of things, I do have a talk tomorrow morning about Symphony and Silex. We're going to talk about services and all that kind of stuff. So that's kind of, we'll kind of push that off until then. Cool. All right. This is what I wanted to get to. So theming in Drupal 7 versus Drupal 8. All right. So this is what, by the way, I come from a Symphony background. So my Drupal 7 experience started like four days ago. So, but it's really cool. Actually, I couldn't understand things really well because I can look at how it's done in Drupal 8 and look at how it's done in Drupal 7 and it all made good sense to me. So the cool thing is the changes are actually very underwhelming. And it's, first of all, it's basically the change from PHP tags to twig tags. And then it's just the renaming of some files. So like you guys all know page.tpl.php. It's page.html.twig. node.tpl.php is node.html.twig. Theme.info is now a theme.info.yml. And you guys probably know at this point in Drupal 8, like a lot of things have turned into YAML, which looks basically like what we had before, but it's slightly different. And I'll show this in a second. The override functions that used to live in templates.php, those are also now their own twig templates. So we used to have like theme, name, underscore, field, underscore, underscore, taxonomy, underscore, term, underscore, reference as a function. It's now basically the same thing except it's a twig template. And we can actually shed the theme name at the front of it. So it's actually a little bit shorter. All right. So this should look familiar. It's the top of like a kind of standard node.tpl.php. Cool. Got this. And wait for it. Wait for it. Okay. Boom. There is the twig version. Oh, let's do that again. Watch how simple that changes. Like, oh, look at it. Node equals print node-nid. Node.id. Basically the exact same thing. Print render title prefix. Echo echo title prefix. When you look at the files next to each other, you're like they almost literally just replaced the PHP with twig. They didn't go ahead and like go to a next step and be like, let's change the entire philosophy of the theming system. It's just kind of this switch to a new engine. And now you have new tools because twig gives you all kinds of new tools inside of there. One cool thing that I did hear somebody talk about once was inside of Drupal 7, you kind of had needed to know when to use the render function and when not to use the render function. And in Drupal 8, you'd never use the render. There is no render function. You just echo it. Okay. And it kind of takes care of if it needs to kind of go through the rendering thing or not. Couple cool things in here. You can see the without filter. That's something that was added by Drupal. And it basically takes something and removes an array key from it. So you can see we have attributes up there, but it's like, oh, but don't print the ID or role attribute. So let's do attributes pipe without that. Same thing with the content. It's like, I want to print the content, but I don't want to print the links. So in Drupal 7, we would do like a hide function. And then we render the content. So now we just kind of do it all once and just say kind of pipe without. You can kind of that values kind of passing from left to right. The links are being removed from it. And this one is even better. So I talked about the function override. So this is what it looked like in Drupal 7. And if you can kind of look closely, it's printing out a UL and an LI tag inside of there. And in Drupal 8, that is now a twig template. And it looks so much better. It's a long line. So it's actually breaking onto multiple lines. It looks cleaner when you don't have a small screen like I do. But it's a twig template, which is where HTML belongs. And we're just printing things out. Both of these just build an LI, UL with an LI. And now it's much, much simpler. All right, cool. So this is the last actor. This is where things get really good. So one, debugging. This is the first time I used twig. I was like, help, I don't have var dump. It's terrible. I don't know what's going on. I want to call a PHP function. I want to go home. Yeah, because you're like sandbox. I know how PHP, but I don't know things inside of twig. So debugging is a really, really important thing. So first thing is inside of settings.php, there's a settings twig underscore debug equals true. If you're theming, this needs to be on. For two reasons. One, twig is compiled. Well, the most important reason, twig is compiled down to a PHP. If this is off, you change twig template. It doesn't recompile. So you'll change a twig template, and you won't see the difference. You turn this to true, you change your twig template, and it will update automatically. You don't need to like clear, you go through Drush and clear the cache. You go through the admin and clear the cache. As long as you have this to true, it's going to automatically happen for you. The second thing, which is really, really cool idea, is as soon as you turn the debugging on, your HTML source code gets littered with all these comments, which are basically hints as to what's going on behind the scenes and what type of template overrides you could be using at that point to use those things. Or even said better, where the heck that's coming from? Like where the heck is that field stuff coming from in the middle? Oh, it's coming from core slash module slash system slash blah, blah, blah, blah, blah. So you have a map right in there. It's like this is where this craziness is coming from. And you're like, awesome, I know how to override that. And you do have var dump. Yes, it's called dump. Hey, they even saved you the var underscore. That's awesome. So again, curly, curly, right? Because we're printing something. And then it's just dump. Behind the scenes, this is literally using, I believe, you literally using var dump. I haven't actually looked at that, but I remember somebody saying that once. And this is what it looks like. Obviously, it goes down further. And it's basically, oh, actually, so it's dumping everything that you have access to. So that's another important thing. You're like, I'm in a template. I know all the templates have like 150 lines of comments on the top that say exactly like what variables you should have access to. But even without that, I can turn my volume up. Even without that, you can just dump everything. I don't know what I have access to. So this is everything that you have access to. Boy, that's a little hard to look at. So let's just dump the names of the variables we have access to. By the way, if you Google for like Drupal twig debugging, they have a page that like talks about several of these tricks. So even if you don't get like this part on there, underscore context is not something you ever normally need to worry about. It's just technically a variable that's floating around that contains all of your variables. This will be the only time I guarantee you ever see underscore context. I actually didn't even remember what it was. I had to look it up because I've never used it before this. And I've been using twig for years and years. So actually underscore context is an array holding all of your variables. We pipe it, filter through the keys, which is array keys, php function. And you guys can tell what we get out. We get out the keys, the names of the keys, and it looks like that. And that's actually the full list. That's really, really powerful. And then of course, you're like, oh, that's right. I have a user variable. That's what I was looking for. What the heck is the user variable? I didn't actually put that there. You can actually then do dump. Open parentheses, user. So you can do dump without arguments, dump everything, or you can dump specific things. Just dump the user variable and start drilling down further into that. All right, inheritance. OK, so let's imagine for a second that we have a no.html twig. Cool? And this is obviously only part of it. And here's the header. And this is the unchanged headers as well, more or less unchanged. I might have shortened a few things. This is the header. But notice I put a block header and an end block header. But notice I put a block header and an end block around it. Those are do something tags. If I only made this change, nothing happens to my application yet. But we're setting the stage for chaos. OK? So this is no.html.twig. Now, let's say that we need to modify what the node looks like just for the article node type. So again, the way you do that inside Drupal 8 is exactly Drupal 7 ends up being what article dash dash node.html.twig. So it's the exact same thing as Drupal 7, just .html.twig on the end. So remember, I have this block header and a block around the whole thing. So normally, if I needed to, let's say, change the header. Like I want the rest of the templates exactly the same as the normal one. But the header needs to be different. I would need to either do something clever or weird or basically copy node.html.twig to node dash dash article.html.twig. I realize I just said the name wrong in the wrong order a second ago. I would need to copy the whole thing, right, and just change the one piece. Not anymore. This is the entirety of your template. You say extends, and then you set that block. What this says, it says, actually, I want to use node.html.twig. That's really what should be rendered. But I want to replace anything that's in my parent templates, block header. Like we said, block header and block. I want to replace that with what I have here. So that you can add as many blocks as you want to your parent templates. The more blocks you add, the more extensible it is. So if you need to, like, oh, it's almost perfect. I see you over at this one tiny little thing, then add a block around there, and you have a new extension point. It's that easy. And we could have other blocks. We could have another block, body, block, something, block, something. We could have as many blocks down in this template as we want. And let's say that we don't actually want to completely override the header block. We just want to surround the header block with an extra class, or an extra div with a class. The parent function says, go echo out my parents' contents. So this is going to take div class equals article, and then it's going to use the default content from our parent block. And this is like one of the most exciting things. I didn't even do, you know, Drupal theme, but like when I saw this, it was like, this is a home run right here. Like I would use the heck out of this. Cool. One other thing is the dot notation, which I haven't explicitly said, but I think you guys kind of get it. So in Drupal 7, you kind of had to decide or know whether something was an array or an object. Great, because they have two different syntaxes, even though they've kind of worked the same way. In twig, we don't care. So here we say no.ed and page.header. We don't care if they're an array, and we don't care if they're an object, because the dot notation takes care of that for us. So the dot notation kind of goes through a cycle, says, okay, is this an object that has a public property? If it is, I'll just go get that for you. Oh, it's not. Is it an array that maybe has that key? Oh, it is. Okay, I'll just go grab that. Oh, neither of those. Maybe it's an object that has like a get header function. So when I say like, you know, page dot header, it headers not a property or it's a private property, maybe it'll actually call get header, the get header function, and bring that back to you. So when you're going through a theme, you don't care about any of this, you don't care what kind of data type it is or anything like that. You just care about page dot header and kind of getting right to it. I don't have an example for this, because that's why I just wanted to kind of mention it. One of the benefits of Twig is that being that it's not PHP, it's actually safe to evaluate. So we would never, I'm going to see who holds their head and say I'm going to say this, we would never store PHP in the database and then evaluate it. Right, that would be very, very dangerous if we open that up. But you actually can do that inside of Twig. You can actually say, we can actually have a Twig template stored in the database or some part of Twig templates or maybe it's an email template and you want your client to be able to modify parts of that. You can actually store that safe in the template and then evaluate it later. You can even whitelist what they have access to. You can say, you know what, let's only give them access to these two functions and those four filters. And here are the only two variables that we're going to pass them and their sandbox outside of that. And you can actually safely do that kind of stuff. And I thought I heard this morning in a keynote that somebody was maybe working on that or somebody said something that made me think that somebody might be working on that. So I Googled for it but I couldn't find anything. Last thing I'm going to talk about is twig.js. So we can obviously render Twig on the server side but you can also render Twig via JavaScript which is very interesting. And I have done this before and I just talked to a startup company that is doing this as well last week. And this is what it looks like. This is not actually technically related to the Twig project. This is just some other community member that basically ported Twig to JavaScript. Like I said, I had to actually use this. So it works the same way. Template equals Twig. You basically kind of pass in what the template looks like. And obviously you could store your templates in a different way and deliver them kind of like a via script tag or an external script tag that's brought in or something like that. But the point is you basically make your Twig template available on the client side and then you can just call template.render and pass in your variables. This is very interesting when you have the problem of I have a very responsive front end but I still actually need to render a full page on page load. Because you know we're still kind of, I know it's changing but we're still kind of in the area where if you have an entire page rendered to client side it's not really going to get indexed. I know there's some ways you can kind of go around that. I have nothing that I've ever trusted with any of my sites. So I actually use this on the homepage of Camp University because we want to like have a real page load but that's normal HTML. And then when you click on stuff we actually go and get JSON and use the JSON to re-render our Twig templates to like update things on the front end via the client side. So it's cool that it's on both sides so you can take advantage of that. And oh and this is the project. The key here is it's called Just John. There's another one by another guy named Johanna Schmidt. Schmidt Joe. In my opinion it's not been worked on quite as actively. So you want the Just On one. It's the one I use. It's the one the other company I use this. Cool. And that's it. So thank you guys very very much. And I'm going to open it up to oh yeah. And if you Camp University, if you guys want a free tutorial, copy that down. We'll lead that up for like a day maybe. We do have a Twig basically like an hour long Twig video series where we can even like code Twig right inside the browser. So go grab that and kind of like run through that. You can even click around. We kind of go into some deeper areas then I was able to go through here. And you guys can actually practice it without needing to pull Twig down or try to get Drupal 8 set up or something like that. So questions. Yeah. Are there plans for develop integration? For what integration? For develop integration? I don't know what that is. Devel? It's the development module. Thank you. Yeah. You got to yeah. It's a symphony world. Yeah. But if I get Drupal person about that or do you know? I do not now. Yeah. Yeah. Okay. Cool. Yeah. Yeah. Ryan. Yeah. Oh yeah. Good job man. All right. Do you have a question? Make your way to the mic. That's a DrupalCon pro right there. On the four loops with the loop variable. How does it handle nested four loops? Oh good. Good. There's a remember okay. It's on the docs. It's like loop.previous or something like that. We can actually say give me the loop. It's always the loop variable is always the one you're most you're closest in but there's a way to go to the parent. I think it might be loop.parent. And then you can technically go loop.parent.parent. Like if you go up about three or so you have other problems. You know. Thank you. Yeah. Good question. I actually just wanted to answer the question about devil because I've used. Perfect. To the twig in Drupal 8. Devil is actually working with twig. It has its own function called kint. Well that lets you print out stuff very similar to how you print out stuff in devil and Drupal 7. So awesome. Yeah. Thank you very very much. Go Drupal community. Other questions. Complaints. Birthday wishes. All right cool. Well thank you guys very very much for staying this late. And see you guys later. Thanks for coming.