A high level overview of Twig and its functions that was presented at the OC Drupal meetup in February 2014 at KWALL. As Twig is now part of Drupal 8 core, it is still being developed so slides are mostly on Twig itself. Discussion was over what Twig provides to themers. http://www.meetup.com/oc-php http://www.meetup.com/ocdrupal/

1. TWIG
Drupal 8, It’s in Core
OCPHP / OC Drupal
@ocphp

2. ME
•
PHP Application Developer
Who happens to do Drupal
Who also likes to dabble in frontend
•
Experience with Twig is in Silex, a micro-framework
built on Symfony
•
Been organizer of OCPHP for nearly 8 years and OC
Drupal around ~4 years

3. THE PRESENTATION
A little less about Drupal and more just about Twig
Picture and Demo free

4. WHAT IS TWIG
•
A PHP Template Engine to separate Presentation
Layer from the Controller/Model (PHP)
•
Developed by same people behind Symfony; yes,
that’s in Drupal 8 Core too

5. COMMON COMPLAINTS

6. BUT PHP WAS JUST FINE,
WHY TWIG ?
•
Mixed PHP with HTML can be just plain sloppy and hard to read
•
PHP still has to scan html documents looking for all those <?php
tags amongst the HTML
•
Designers have too much power and can open security bugs in
the presentation layer with PHP
•
Defining a function or filtering for theming was sloppy — no real
standard way

7. I DON’T WANT MORE BLOAT
•
PHP is definitely faster but Twig is safer
As a developer, you control the PHP executed in a template. No possible
coding hacks like this in Templates …
•
<?php $user = db_query(“SELECT n.nid FROM users WHERE uid = “.
$_GET[‘uid’].“)”; ?>
•
Obviously a bit more execution time and memory but Twig has been around for
a while, tested, and aims to be fast ! Generated PHP will run through OPCode.
•
Twig caches the generate PHP code so only changes are re-generated

8. Besides … In Drupal, Twig is the least of your
worries when it comes to bloat.
Rendered Arrays

9. SO WHAT ARE THE BENEFITS

10. BENEFITS
•
An extendable template engine
•
Secure (can enable variable output escaping globally)
•
It’s Unit Tested
•
Great documentation and online resources
•
Not coupled to Symfony so it has its own roadmap and
community

11. EVEN MORE BENEFITS
•
Easy to understand clean syntax
•
Extend it and create your own filters or functions to give
designers to use
•
Once you know it, can use it in other PHP frameworks outside of
Drupal
•
Syntax support in several IDEs (PHPStorm)
http://blog.jetbrains.com/phpstorm/2013/06/twig-support-inphpstorm/

12. NOT ANOTHER SYNTAX
LEARN !

13. …STOP WHINING, IT’S PRETTY
EASY…

14. PRINT OUTPUT
<?php print $user[‘name’]; ?>
!
!
{{ user.name }}

15. COMMENTS
depending on developers mood
<?php // …. ?>
<?php /* …. ?>
!
{# Comment #}

16. FILTERS
<?php t(‘Welcome, ’ . $user[‘name’]); ?>
!
{{ ‘Welcome, @name’|t({ ‘@name’: user.name }) }}

17. COMBINING FILTERS
<?php strtoupper(t(‘Welcome, ’ . $user[‘name’]);) ?>
!
{{ ‘Welcome, @name’|t({ ‘@name’: user.name }|upper) }}

18. IF
<?php if (isset($user[‘name’])) { echo $user[‘name’] } else { echo
‘Who are you?’ }; ?>
!
{% if user.name is defined %}
{{ user.name }}
{% else %}
Who are you?
{% endif %}
!
Not testing, but following might work too
{% user.name|default(‘Who are you’) %}

19. LOOPS
<?php foreach ( $users as $key => $user ) { print
$user[‘name’]; } ?>
!
{% for key, user in users %}
{{ user.name }}
{% endfor %}

20. CONTROL WHITESPACE
use - in output or function tags
!
{{- user.name -}}
!
{%- if user.name is defined -%}{%- endif -%}
!

21. CALCULATIONS
<?php print $user[‘total’] + 1; ?>
!
{{ users.total + 1 }}
!
!

22. CONCAT / SET STRINGS
<?php print strtolower(‘’Greeting ‘ . $user[‘first’]); ?>
!
{% set greeting = 'Hello ' %}
{% set name = user.first %}
!
{{ greeting ~ name|lower }} {# Hello bob #}
!
{{ (greeting ~ name)|lower }} {# hello bob #}

23. EXPRESSIONS
{% if 1 not in [1, 2, 3] %}
!
{% if 'cd' in 'abcde' %}
!
{% if 'Bob' starts with 'B' %}
!
{% if phone matches '{^[d.]+$}' %}
!
http://twig.sensiolabs.org/doc/templates.html#twig-expressions

24. LOGIC WITH EXPRESSIONS
PHP: && || <>
!
and
or
not
!
{% if user.name is not defined or user.name == ‘Bob’ %}
!
http://twig.sensiolabs.org/doc/templates.html#twig-expressions

25. EXTENDING
Don’t duplicate the whole twig file just to change a single piece of
output. Extend it.
!
{% extends ‘layout.html.twig’ %}
!
or if layout = “layout.html.twig” was set as Twig Global/var
!
{% extends layout %}

26. CONDITIONAL EXTENDS
(mobile variable is set in code and passed to template)
!
{% extends mobile ? “mobile.html.twig" : “layout.html.twig” %}
!
!
!

27. BLOCKS
Define content in blocks to allow for extending of templates !
!
{% block sidebar %}
…content…
{% endblock %}
!
!

28. OVERRIDING BLOCKS
The benefit of extending and defining blocks in a template.
!
Any child template can override just that block content from
the parent template without having to change any other html !
!

29. OVERRIDING BLOCKS
{% extends '/core/modules/system/tests/modules/twig_theme_test/
modules/twig_namespace_a/templates/test.html.twig' %}
!
{% block content %}
I just overrode the content block in the parent template.
{% endblock %}
!
!

30. INCLUDE OTHER TEMPLATES
{% extends ‘layout.html.twig’ %}
!
{% include ‘sidebar-left.html.twig’ %}
!
{% block content %}
I just overrode the content block in the parent template.
{% endblock %}
!
!
!

31. WHAT ABOUT DEBUGGING?

32. DEBUG IN DRUPAL 8
In settings.php, uncomment ….
!
# $settings['twig_debug'] = TRUE;
# $settings['twig_auto_reload'] = TRUE;
# $settings['twig_cache'] = FALSE;

33. DEBUG IN DRUPAL 8
!
{{ dump(user) }}
!
!
!
Since Twig process the template into a generate PHP file, don’t
believe you can step through with XDebug and IDE like PHPStorm.
(??)

34. TWIG LOOKS GREAT !
BUT NOW WHAT ?
!
It’s a huge undertaking to replace the theme layer and currently
still progressing but several templates have been converted:
views, base templates, etc.
!
Twig Initiative ToDo List
!
https://groups.drupal.org/node/278968

35. D7 TO D8 TEMPLATES
Extensive work required but checkout Twigify
!
Twigify is a module for converting Drupal 7 PHP Template
themes to Drupal 8 Twig themes. It was presented/demoed at
Drupalcon Portland (BOF) and at numerous US camp sessions,
and also in the Twig Lab at Drupalcon Prague.
!
https://drupal.org/node/2099611
!

36. THANKS !

37. Questions?
william.estrada@ocphp.org
!
linkedin.com/in/webbywe

38. RESOURCES
•
On IRC, #drupal-twig
•
(Do something about Drupal theming) http://jacine.net/post/19652705220/theme-system
•
(YouTube DrupalCon Portland) http://www.youtube.com/watch?v=tPJ6LRJN0nw&feature=youtu.be
•
(Twig) http://twig.sensiolabs.org/
•
(Twiggy - sample template by Jen Lampton) https://github.com/jenlampton/twiggy/tree/master/templates
•
(Twig in Drupal 8 slides) http://www.slideshare.net/Wizzlern/twig-in-drupal8
•
(Twig support in PHPStorm) http://blog.jetbrains.com/phpstorm/2013/06/twig-support-in-phpstorm/
•
(Twig coding standards) http://twig.sensiolabs.org/doc/coding_standards.html
•
(Debugging in Twig) https://drupal.org/node/1906780
•
(Current ToDo List) https://groups.drupal.org/node/278968
•
(Drupal 8 and power of Twig) http://rootwork.org/blog/2013/05/drupal-8-power-twig-drupalcon-portland-featured-session
•
(Twig Performance) http://www.appneta.com/blog/twig-performance/