twig
DESCRIPTION
Twig presentation for DrupalCamp Finland 2013TRANSCRIPT
Twig &
Drupal 8
Joonas Pajunen
• Fraktio Oy
• Symfony2 Developer
• Twitter: joonsp
Arto Iijalainen
• Druid Oy
• Drupal backend developer
• Drupal.org: Sir-Arturio
• Twitter: arto_iijalainen
Twig
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> <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>
• print {{ }}
Syntax
<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>
• print {{ }}
• execute statements {% %}
Syntax
<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>
• 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”]|first|upper }} -> SEPPO
{{ random(['apple', 'orange', 'citrus']) }}
Extensibility
• custom functions, tags, filters
• 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 …
WhyD8
+ ?
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 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
PHPtemplate is insecure<?php db_query("DROP TABLE {node}"); unlink('sites/default/files/myfilename.pdf'); ?>
PHPtemplate is insecure<?php db_query("DROP TABLE {node}"); unlink('sites/default/files/myfilename.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 different ways to address variables
• array key
• object property
• getBar or isBar function
{{ foo.bar }}
• $foo[‘bar’]
• $foo->bar
• $foo->!etBar()$foo->isBar()
PHPtemplate Twig
Theme system is overly complex
http://www.slideshare.net/nyccamp/a-new-theme-layer-for-drupal-8
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 official 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!
Conclusions …
Thanks!