Twig

Joonas Pajunen
• Fraktio Oy
• Symfony2 Developer
• Twitter: joonsp

Arto Iijalainen
• Druid Oy
• Drupal backend developer
• Drupal.org: Sir-Arturio
• Twitter: arto_iijalainen

Overview
• Twig in general
• Why Twig is in Drupal 8?
• Twig’s solutions to Drupal’s problems
• Current state of the project & conclusion

Templating engine
• Used in Symfony and other projects
• Twig is not a Symfony component
• Inspired by Django, originally by Armin Ronacher, via and maintained by Fabien Potencier

<body>
<ul id="navigation">
{% for item in navigation %}
<li><a href="{{ item.href }}">{{ item.caption }}</a></li>
{% endfor %}
</ul>
<h1>My Webpage</h1>
{{ a_variable }}
{# <p> unimplemented feature </p> #}
</body>
Syntax

<body>
{% endfor %}
</ul>
<h1>My Webpage</h1>
{{ a_variable }}
</body>
• print {{ }}
Syntax

<body>
{% endfor %}
</ul>
<h1>My Webpage</h1>
{{ a_variable }}
</body>
• print {{ }}
• execute statements {% %}
Syntax

<body>
{% endfor %}
</ul>
<h1>My Webpage</h1>
{{ a_variable }}
</body>
• print {{ }}
• execute statements {% %}
• comment {# #}
Syntax

Language features
• control structures
• tests
• variables
• logic
• math

<ul>
{% for user in users %}
{% if loop.index is divisibleby(2) and loop.length < 2 %}
<li class=”even”>
{% else%}
<li class=”odd”>
{% endif %}
{{ user.username }}
</li>
{% else %}
<li>no users</li>
{% endfor %}
</ul>

Variable access
• array key
• object property
• getBar or isBar function
{{ foo.bar }}

Composability
• extends
• include
• use
• block

{# base.html.twig #}
<head>
{% block head %}
{% endblock %}
</head>
<body>
<div id="content">
{% block content %}{% endblock %}
</div>
</div>
{# page.html.twig #}
{% extends "base.html.twig" %}
{% block content %}
<h1>Index</h1>
<p class="important">
Welcome to my awesome homepage.
</p>
{% include "footer.html.twig" %}
{% endblock %}

Filters, functions
{{ post.published_at|date("m/d/Y") }}
{{ [“seppo”,“kimmo”]|ﬁrst|upper }} -> SEPPO
{{ random(['apple', 'orange', 'citrus']) }}

Extensibility
• custom functions, tags, ﬁlters
• can override and customize syntax

class MoneyExtension extends Twig_Extension
{
    public function getFunctions() {
        return array(
            'cents_to_euros' => new Twig_Function_Method($this, 'centsToEuros')
        );
    }
    public function centsToEuros($cents) {
             return round($cents/100, 2);
    }
    public function getName() {
        return 'money';
    }
}
Example: creating a custom function

$twig = new Twig_Environment($loader);
$twig->addExtension(new MoneyExtension());
{{ money(250) }} €
becomes:
2.5 €
Example: creating a custom function (usage)

Speed
• parsed -> optimized php -> cached
• C-extension available

Documentation
• Extensive documentation available!
• http://twig.sensiolabs.org/documentation

Good IDE highlight support
• phpstorm
• netbeans
• eclipse
• sublime text
• notepad++
• vim
• textmate
• etc …

Why do we need a new theme layer?
What’s wrong with D7’s theme layer?
or

http://www.smile-day.net/wp-content/uploads/2012/03/Winking-Smiley-Face1.jpg

Flaws in D7’s theme layer
• PHPtemplate is insecure
• Template language is Drupal-only (PHPtemplate + drupalisms)
• Lots of diﬀerent ways to address variables
• Theme system is overly complex
• Two ways of creating markup: templates and theme functions
• Too many and too cluttered templates

PHPtemplate is insecure
<?php
db_query("DROP TABLE {node}");
unlink('sites/default/ﬁles/myﬁlename.pdf');
?>

PHPtemplate is insecure
<?php
db_query("DROP TABLE {node}");
unlink('sites/default/ﬁles/myﬁlename.pdf');
?>
Not possible in Twig! o/

Twig - Security
• autoescape by default
• sandbox

Template language is Drupal-only
Twig is proudly found elsewhere!
No need to reinvent the wheel.

Lots of diﬀerent ways to address variables
• array key
• object property
• getBar or isBar function
{{ foo.bar }}
• $foo[‘bar’]
• $foo->bar
• $foo->getBar()
$foo->isBar()
PHPtemplate Twig

Theme system is overly complex
http://www.slideshare.net/nyccamp/a-new-theme-layer-for-drupal-8

Two ways of creating markup
theme_admin_view();
admin-view.tpl.php
Only Twig templates left!
admin-view.html.twig

Too many and too cluttered templates
Templates will be cleaned and consolidated
in the refactoring process.

Flaws in D7’s theme layer
• PHPtemplate is insecure
• Template language is Drupal-only (PHPtemplate + drupalisms)
• Lots of different ways to address variables
• Theme system is overly complex
• Two ways of creating markup: templates and theme functions
• Too many and too cluttered templates
}
}
Twig will fix
Theme layer will fix

Current development status
• *DONE* Twig is now an oﬃcial template engine in D8 core
• *IN PROGRESS* Templates are being converted on Twig
• *WAITING* Twig as a main template engine
• *IN PROGRESS* Markup refactoring
• … Creating Dream Markup
• … Rely on Twig auto-escape
• … Finish template suggenstions
• HELP NEEDED!

Twig

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to Twig

Similar to Twig (20)

Recently uploaded

Recently uploaded (20)

Twig