DrupalCon Portland 2013

Twig, el nuevo motor de plantillas de Drupal 8

Jen Lampton, Fabian Franz, John Albin Wilkins  · 


Extracto de la transcripción automática del vídeo realizada por YouTube.

alright so in the interest of leaving as much time as possible for questions and discussion at the end we're going to get started welcome everybody my name is Ivan booth and I'm the drupalcon front-end track chair I'm a freelance developer at root

work org and I'm happy to introduce three of the folks behind twig in Drupal twig a part of symphony is being adopted in Drupal 8 as long as some tweaks prints go well on Friday so I'm sure they'll talk more about that i'll leave it to these

three to explain why twig is so great but i'll say that when these folks presented at bad camp there were literally gasps of joy from Drupal femurs not something that happens very often so to quickly introduce these three jen Lampton is leading the charge

to overhaul theming in Drupal 8 she's been a contributor to the Drupal community since 2006 and maintains modules like total control admin dashboard she's also the lead coordinator of Bay Area drupalcamp despite her lack of an eyepatch bad camp it's

pirate themed she does however like horses which makes sense because twig is basically a pony that everyone gets to have Fabien Franz was born on the same day as the new operating system and has pretty much been contributing to free and open source communities

ever since he's been a contributor to the Drupal community since 2009 and end is a technical lead at Rowan fabien has been get helping jen get twig in core which makes sense because twig is going to make drupal theme errs dance and john Albin Wilkins has

browsed the entire world wide web literally ok so it was 1993 and consisted of two websites but still how many other people can make that claim apparently he found the web pretty ugly because since then he's been making websites more usable accessible

and beautiful he works at palantir and has made foundational contributions to CSS sass and compass mobile and responsive web design he also maintains a little base thing called Zen which happens to be the most install drupal theme ever in his spare time he

enjoys playing with lemurs at his home in Taiwan which makes sense because when theme is look at twig they're going to go ah so with that please welcome Jen Fabian and John we had some intro slides we're going to skip right to the point so Drupal 8

is going to have a new theme engine we evaluated a bunch of them very early in the process and decided on twig twig is a PHP templating engine that is already very well documented so Drupal itself has a little bit of a problem with creating great documentation

so we're really happy to be adopting a framework that I already has documentation of its own twig is also extendable which means that we've written extensions for twig that works specifically for Drupal but also anyone in the contribs space can come

along and further extend twig to meet whatever needs they have to so we're not relying on getting it exactly right the first time through which is good twig is also secure a security team has been complaining about one hundred percent of all Drupal themes

with a little rounding error being insecure and that's just because it's really hard to do it right with twig we can put some protections into place little prevent all of the security holes that we're dealing with right now yeah there's still

some vote going on so that's also a possibility to sprint on your on the security team and want to make it better weaksauce it really fast so compared to some similar templating engines like smarty it leaves all the other ones in the dust so we're

really happy to be using something that's not going to be slowing us down too much it also has really great IDE integration um it turns out so it was a fast um for those that have been profiling trick there's one number that stand it out 0.3% so it

also integrates really great with IDEs so any one who wants fancy syntax highlighting is going to get it which is really great can't get that right now with PHP template um and it also looks recognizable so even if you've never heard of twig before

if you use used any of these other languages you'll be able to parse the files and scan them read them in ways that make sense so he was also written by the creator of symphony which are also adopting for Drupal 8 so those two systems play really nicely

together I want to do it looks like no one okay well you can go then all right thank you in order to print a variable you use this syntax with two curly braces on either side and just type the name of the variable in order to drill into a variable so if your

variable happens to be a more complicated data structure you get from the top level to the second level by putting in a dot and that's exactly the same whether it's an object an array or anything else that we can come to event in vent in the near future

if you want to get something inside you just type a dot but by the way there's tons of chairs over on this side and it's hard to see from the door but chairs if you want to add a comment into a twig template it's a curly brace and a pound sign

and if you want to run command so if statements for loops you use a curly brace and a percent symbol and we'll show you some actual code a little later too um wrong way uh so uh we had rolled together a bunch of patches that converted all of the PHP template

template files in Drupal 7 or interpolate into twig files we got it ready at about eleven-thirty p.m. two nights ago and since then I started trying to actually use it to create a theme I created one last night some of you might have been watching on Twitter

some of them went really really well so would not that well when I got to the end I decided that it wasn't really worth me going through the process of creating a theme in front of you but i do want to walk you through the same thing we created just so

you can see what the code looks like but i'm going to start off by painting the picture of the site that i was trying to build so this usually however good one question before who if you have used trick before and who of you wants to use it Oh more importantly

how many people here like PHP template yeah that's what I thought Thanks okay so here's the premise we're going to build a website its homepage is very straightforward just a bunch of text on it we're going to have a second kind of page that

has one of the fields pulled out of the content and shoved into a little side area and then we want to treat the mark-up specially so that if there's more than one value in the field we want to wrap it in a section tag so we've got some special control

we want to do over our HTML so three very simple things for trying to achieve here in this theme so I did happen to put on yes code please so if you could happen to put all of this code on github if you want to pull it down and rifle it threw yourself at your

own pace to more than welcome to do that the get project is called twig ified although the theme has been renamed to Twiggy um okay okay um you will learn a song now we have actually a trick jingle and it's 175 7550 can review it patch be a Drupal 8 hero

so all together 1757 550 come review a patch be a Drupal 8 hero and now you okay so we have here this theme that I created now that I've got my monitor resized um where the homepage just as a giant header on it we've got some content in a straight

column and all that really is is just a new template file for the home page in a new temple new style sheet so just really quickly I want to show you the page template and it should look pretty similar to PHP template right now if you could see it all and

that's because the first step of making all of these conversions is just getting it working and the easiest way to get stuff working is not to actually change very much so right now we just took the PHP template and we're converting it to twig once

we get that done there will be a lot of room for improvements I know Martin is eagerly waiting to get his hands on the mark up so we can change that there's a whole bunch of people teams of people were getting ready to change the CSS right now all we're

looking at is the syntax of this template file so just as in PHP template top of the file starts with a bunch of documentation points out all of the available variables this might not be exactly the same the end you know when we're done with all this but

for the most part it'll tell you everything that's here for you to use and then when you get to the actual markup it's going to look a little bit more like markup we basically have HTML tags and when a variable needs to be printed it's just

printed in little curly braces when you need to run some logic on it it reads a little bit more like English than PHP did if site name or site slogan you don't need to worry about dollar signs or you know if is sets or is array and not empty or any of

that stuff that you had to do in in Drupal 7 land you can just say if site name and print it so pretty straightforward and we've got a lot of white space in here makes it easy to read a lot of things that should look really similar and there's a couple

of differences variables like we said if you want to render something that's a second level or deeper you separate you drill into them with a dot it should be four for most of the stuff you see printed in any template file in Drupal 8 we've got a section

at the documentation at the top it tells you what all of those things are there's also a little method that lets you print out all the available variables so we're going to clean up and give you a really pretty view into later so the next thing I want

to show you is a node template and we have Morton so Martin will make sure it will be usable where you complain so long until that's good we have been heard finally so the node template and what we want to do here is pull out a individual field and display

it in a sidebar I'm not sure how good the color is on these matters I can see up here it's just got a little gray background and on the side we pulled out an image and we just moved it somewhere else on the page so if we look at the node template you'll

notice I put in a new little dip here called info bar I've pulled out the individual field content dot field underscore image and thrown it in that little sidebar um and let's say we had I guess I could talk about this now oh one thing you'll notice

here is a little bit weird it's got a section of code in here that says block and what that's doing is identifying a place on the page where you can say hey twig something in this area is going to be different and then what we can do drupal 7 land

when you would create a copy of this node template to use for a different node type you would have to copy the whole thing all over and well in twig land what we can do is create a specific version of it that says here's the article template it's exactly

the same as that no template except for this difference so in here I've just got a little piece of content that says hey this is just the difference of the two templates so you no longer have duplicate code all over your site so if I wanted to go and look

at what an article looks like that is actually in my blog section you'll notice that the caption now has some additional text there that says hey this is the diff of the original node template and now it's article override yeah the fact that this you

know this node dash dash article twig file is literally three lines long or I mean the significant part of it anyway is like okay four lines but this is this is a huge win for me there's so many times I see themes that have like seven or eight no dash

dash something dot TPL files and they all look almost identical and I can't tell what the heck's going on and when I open up a file this is going to make it really really obvious and just just so much better for everybody to workflow ok so I'm

so the only thing about that is we want to ask the Drupal community here and do you find the term block for that confusing who finds it confusing who would prefer code block instead who does not find it confusing and finds us pretty straightforward so okay

are you all people who've used to twig before a couple if you use twig before and you called it block and you open a Drupal file it was called code block would you be able to figure out was doing no so we might need to document that we might be able to

[ ... ]

Nota: se han omitido las otras 6.228 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.