Twig & Drupal 8: An overview of using Twig as the new templating engine in Drupal 8

Twig
&
Drupal 8
Monday, August 26, 13

Arto Iijalainen
• Druid Oy (GOLD SPONSOR o/)
• From Finland
• Drupal backend developer
• Drupal.org: Sir-Arturio
• Twitter: @arto_iijalainen, @druidﬁ

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

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 Symfony2 and other projects
• Twig is not a Symfony component
• Originates from the Python world (Django and Jinja Tempaltes)
• Originally by Armin Ronacher, today 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
• expressions & tests
• variables
• logic
• math

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

Variable access
• array key $foo[‘bar’]
• object property $foo->bar
• getBar or isBar function $foo->getBar(), $foo->isBar()
{{ foo.bar }}

Composability
• block
• extends
• include
• use

{# 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") }}
{{ [“alice”,“bob”]|ﬁrst|upper }} -> ALICE
{{ 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());
{{ cents_to_euros(250) }} €
becomes:
2.5 €
Example: creating a custom function (usage)

Speed
• Twig template -> optimized PHP -> rendered HTML
• Caching at diﬀerent levels
• 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
D8
+ ?

New theme layer!
D8

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
• *DONE* 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!

Conclusions …

Thanks!
Questions?

Twig & Drupal 8: An overview of using Twig as the new templating engine in Drupal 8

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Twig & Drupal 8: An overview of using Twig as the new templating engine in Drupal 8

Semelhante a Twig & Drupal 8: An overview of using Twig as the new templating engine in Drupal 8 (20)

Último

Último (20)

Twig & Drupal 8: An overview of using Twig as the new templating engine in Drupal 8