SlideShare a Scribd company logo

Twig

•
•
S
Sir-Arturio

This document discusses Twig and its role as the template engine in Drupal 8. It provides an overview of Twig, explaining that it is used in Symfony and other projects. It outlines some flaws in Drupal 7's theme layer, such as insecure PHP templates and a Drupal-specific template language. It then explains how Twig addresses these issues and improves the theme layer. Development status updates are provided, noting that Twig is now the official template engine in Drupal 8 core and templates are being converted, while help is still needed with ongoing work.

Related slideshows

Javascript for the c# developer
Javascript for the c# developerJavascript for the c# developer
Javascript for the c# developer
 
Building mobile applications with DrupalGap
Building mobile applications with DrupalGapBuilding mobile applications with DrupalGap
Building mobile applications with DrupalGap
 
WordPress Theme Development: Part 2
WordPress Theme Development: Part 2WordPress Theme Development: Part 2
WordPress Theme Development: Part 2
 
1 of 41
Download to read offline
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 …
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 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'); ?>
Twig
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->getBar() $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!

More Related Content

Twig

  • 2. Joonas Pajunen • Fraktio Oy • Symfony2 Developer • Twitter: joonsp
  • 3. Arto Iijalainen • Druid Oy • Drupal backend developer • Drupal.org: Sir-Arturio • Twitter: arto_iijalainen
  • 5. Overview • Twig in general • Why Twig is in Drupal 8? • Twig’s solutions to Drupal’s problems • Current state of the project & conclusion
  • 6. 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
  • 7. <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
  • 8. <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
  • 9. <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
  • 10. <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
  • 11. Language features • control structures • tests • variables • logic • math
  • 12. <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>
  • 13. Variable access • array key • object property • getBar or isBar function {{ foo.bar }}
  • 15. {# 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 %}
  • 16. Filters, functions {{ post.published_at|date("m/d/Y") }} {{ [“seppo”,“kimmo”]|first|upper }} -> SEPPO {{ random(['apple', 'orange', 'citrus']) }}
  • 17. Extensibility • custom functions, tags, filters • can override and customize syntax
  • 18. 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
  • 19. $twig = new Twig_Environment($loader); $twig->addExtension(new MoneyExtension()); {{ money(250) }} € becomes: 2.5 € Example: creating a custom function (usage)
  • 20. Speed • parsed -> optimized php -> cached • C-extension available
  • 21. Documentation • Extensive documentation available! • http://twig.sensiolabs.org/documentation
  • 22. Good IDE highlight support • phpstorm • netbeans • eclipse • sublime text • notepad++ • vim • textmate • etc …
  • 25. Why do we need a new theme layer? What’s wrong with D7’s theme layer? or
  • 27. 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
  • 28. PHPtemplate is insecure <?php db_query("DROP TABLE {node}"); unlink('sites/default/files/myfilename.pdf'); ?>
  • 30. PHPtemplate is insecure <?php db_query("DROP TABLE {node}"); unlink('sites/default/files/myfilename.pdf'); ?> Not possible in Twig! o/
  • 31. Twig - Security • autoescape by default • sandbox
  • 32. Template language is Drupal-only Twig is proudly found elsewhere! No need to reinvent the wheel.
  • 33. Lots of different ways to address variables • array key • object property • getBar or isBar function {{ foo.bar }} • $foo[‘bar’] • $foo->bar • $foo->getBar() $foo->isBar() PHPtemplate Twig
  • 34. Theme system is overly complex http://www.slideshare.net/nyccamp/a-new-theme-layer-for-drupal-8
  • 35. Theme system is overly complex http://www.slideshare.net/nyccamp/a-new-theme-layer-for-drupal-8
  • 36. Two ways of creating markup theme_admin_view(); admin-view.tpl.php Only Twig templates left! admin-view.html.twig
  • 37. Too many and too cluttered templates Templates will be cleaned and consolidated in the refactoring process.
  • 38. 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
  • 39. 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!