Drupal 8 will ship with a fancy new template engine (Twig) and a simpler theme layer. In this webinar, our speaker shows you some goodies from Twig and shares how you can get started with it. He also talks about the major problems that people were facing in working with Drupal 7 and what the community has done to make it better. This webinar shows - in both practical examples and on a broader scale - why Drupal 8 will make peace between backenders and frontenders. If you missed the webinar, you can watch the full recording here:

1. Drupal 8
Frontend (for
backenders)
01.04.2015 Lauri Eskola / @laurii1
@srijan #SrijanWW

2. Lauri Eskola
I live in Finland
Front and Back End Developer
Mostly working on Core issues
related to Theme system on the
Back End side
Working for Druid
I do actually like cold (and
sauna)
@srijan #SrijanWW

3. @lauriii
@srijan #SrijanWW

4. @laurii1
@srijan #SrijanWW

5. Topics
1. Theme system
2. Twig
3. Autoescape
4. Demo
@srijan #SrijanWW

6. Changes related to theme
layer
@srijan #SrijanWW

7. Drupal 7 theme layer - WTF?
@srijan #SrijanWW

8. Template process layer ...is gone!
hook_page_alter ...is gone!
@srijan #SrijanWW

9. @srijan #SrijanWW

10. Theme functions
...are being converted to Twig templates..
@srijan #SrijanWW

11. Goodbye theme(), hello render arrays
Drupal 7
<?php
$variables['list']=theme('item_list',array(
'items'=>$items,
));
Drupal 8
<?php
$variables['list']=array(
'#theme'=>'item_list',
'#items'=>$items,
);
@srijan #SrijanWW

12. @srijan #SrijanWW

13. Drupal 8 theme layer - FTW!
@srijan #SrijanWW

14. Theme suggestion hooks
@srijan #SrijanWW

15. Theme suggestion hooks
Drupal 7
<?php
/**
*Implementshook_preprocess_HOOK()fornodetemplates.
*/
functionMYTHEME_preprocess_node(&$variables){
$variables['theme_hook_suggestions'][]='node__'.'first_suggestion';
$variables['theme_hook_suggestions'][]='node__'.'more_specific_suggestion'
}
Drupal 8
<?php
/**
*Implementshook_theme_suggestions_HOOK_alter()fornodetemplates.
*/
functionMYTHEME_theme_suggestions_node_alter(array&$suggestions,array$variables
$suggestions[]='node__'.'first_suggestion';
$suggestions[]='node__'.'more_specific_suggestion';
}
@srijan #SrijanWW

16. Preprocess hooks & missing process
functions
@srijan #SrijanWW

17. Attributes
<?php
/**
*Implementshook_preprocess_node().
*/
functionhook_preprocess_node(&$variables){
//Addnewclass.
$attributes->addClass('my-own-class');
//Removeelementsdefaultclass.
$attributes->removeClass('default-class');
//Setelementsidtokitten.
$attributes->setAttribute('id','kitten');
}
@srijan #SrijanWW

18. Attributes
Twig
<div{{attributes}}>
Not like this:
<div{{attributes}}><div✖{{attributes}}>
@srijan #SrijanWW

19. Attributes
{%
setclasses[
'a-lot-of',
'classes-needed',
'for-this-element'
]
%}
<div{{attributes.removeClass('my-own-class').addClass('better-class',classes
@srijan #SrijanWW

20. Twig
Crash course for backenders
@srijan #SrijanWW

21. Twig magic
{{ sandwich.cheese }}
Same in PHP
//Arraykey.
$sandwich['cheese'];
//Objectproperty.
$sandwich->cheese;
//Alsoworksformagicget(providedyouimplementmagicisset).
$sandwich->__isset('cheese');&&$sandwich->__get('cheese');
//Objectmethod.
$sandwich->cheese();
//Objectgetmethodconvention.
$sandwich->getCheese();
//Objectismethodconvention.
$sandwich->isCheese();
//Methoddoesn'texist/dynamicmethod.
$sandwich->__call('cheese');
@srijan #SrijanWW

22. Print what you want, when you want
Drupal 7
<?php
//Wehidethecommentsandlinksnowsothatwecanrenderthemlater.
hide($content['comments']);
hide($content['links']);
printrender($content);
Drupal 8
{#Wegiveyouwhatyouaskfor.#}
{{content|without('comments','links')}}
...
{#Anythingcanbeprintedlateron#}
{{content.comments}}
@srijan #SrijanWW

23. Twig filters
Meant to manipulate content. Simply takes the first parameter from a
variable or inline string and returns it in different format.
Example
{%setname='Lauri'%}
{#Printvaribaleusinglenghtfilter.#}
{{name|length}}
Returns
5
@srijan #SrijanWW

24. Twig functions
More viable functions with multiple parameters meant to create simple
front-end logic
{{dump()}}
@srijan #SrijanWW

25. This magic is built in Twig
How ever I'm going to show you how to add these by your self!
@srijan #SrijanWW

26. Adding Twig filters
<?php
/**
*AclassprovidingmyownTwigextension.
*/
classTrimStringextendsTwigExtension{
/**
*{@inheritdoc}
*/
publicfunctiongetFilters(){
returnarray(
newTwig_SimpleFilter('trim_string',array($this,'trimString')),
);
}
publicfunctiontrimString($string,$length=10){
returnstrpos($string,0,$length);
}
@srijan #SrijanWW

27. Adding Twig filters
{%setvariable='mytext'%}
{{variable|trim_string(2)}}
my
@srijan #SrijanWW

28. Adding Twig functions
<?php
/**
*AclassprovidingmyownTwigextension.
*/
classMyTwigExtensionextendsTwigExtension{
/**
*{@inheritdoc}
*/
publicfunctiongetFunctions(){
returnarray(
newTwig_SimpleFunction('url',array($this,'getUrl'),array('is_safe_callback'
);
}
}
@srijan #SrijanWW

29. Example:
https://github.com/lauriii/trim-string
@srijan #SrijanWW

30. "I don't want to learn anything
new!"
"I don't like Twig!"
@srijan #SrijanWW

31. Solution!
#engine:phptemplate
themename.info.yml
@srijan #SrijanWW

32. Autoescape
@srijan #SrijanWW

33. @srijan #SrijanWW

34. Context-Aware Auto-Escaping
Basic idea: everytime variable goes to template run appropriate escaping
function!
@srijan #SrijanWW

35. Different Escape functions
<?php
DrupalComponentUtilitySafeMarkup::set();
DrupalComponentUtilitySafeMarkup::escape();
DrupalComponentUtilitySafeMarkup::checkAdminXss();
DrupalComponentUtilitySafeMarkup::isSafe();
@srijan #SrijanWW

36. How it works?
<?php
publicstaticfunctionescape($string){
returnstatic::isSafe($string)?$string:String::checkPlain($string);
}
@srijan #SrijanWW

37. Sandwiches demo!
https://github.com/DrupalTwig/sandwich
@srijan #SrijanWW

38. Want to help?
Isn't this stuff awesome?
We can still make it better! Join your local
sprints!
@srijan #SrijanWW

39. Take this conversation online by tweeting using the hashtag #SrijanWW
Thank you!
Lauri Eskola / @laurii1
@srijan #SrijanWW