0
Twig
&
Drupal 8
Monday, August 26, 13
Arto Iijalainen
• Druid Oy (GOLD SPONSOR o/)
• From Finland
• Drupal backend developer
• Drupal.org: Sir-Arturio
• Twitter...
Joonas Pajunen
• Fraktio Oy
• Symfony2 Developer
• Twitter: joonsp
Monday, August 26, 13
Twig
Monday, August 26, 13
Overview
• Twig in general
• Why Twig is in Drupal 8?
• Twig’s solutions to Drupal’s problems
• Current state of the proje...
Templating engine
• Used in Symfony2 and other projects
• Twig is not a Symfony component
• Originates from the Python wor...
<body>
<ul id="navigation">
{% for item in navigation %}
<li><a href="{{ item.href }}">{{ item.caption }}</a></li>
{% endf...
<body>
<ul id="navigation">
{% for item in navigation %}
<li><a href="{{ item.href }}">{{ item.caption }}</a></li>
{% endf...
<body>
<ul id="navigation">
{% for item in navigation %}
<li><a href="{{ item.href }}">{{ item.caption }}</a></li>
{% endf...
<body>
<ul id="navigation">
{% for item in navigation %}
<li><a href="{{ item.href }}">{{ item.caption }}</a></li>
{% endf...
Language features
• control structures
• expressions & tests
• variables
• logic
• math
Monday, August 26, 13
<ul>
{% for user in users %}
{% if loop.index is divisibleby(2) %}
<li class=”even”>
{% else%}
<li class=”odd”>
{% endif %...
Variable access
• array key $foo[‘bar’]
• object property $foo->bar
• getBar or isBar function $foo->getBar(), $foo->isBar...
Composability
• block
• extends
• include
• use
Monday, August 26, 13
{# base.html.twig #}
<head>
{% block head %}
{% endblock %}
</head>
<body>
<div id="content">
{% block content %}{% endblo...
Filters, functions
{{ post.published_at|date("m/d/Y") }}
{{ [“alice”,“bob”]|first|upper }} -> ALICE
{{ random(['apple', 'or...
Extensibility
• custom functions, tags, filters
• can override and customize syntax
Monday, August 26, 13
class MoneyExtension extends Twig_Extension
{
    public function getFunctions() {
        return array(
            'cent...
$twig = new Twig_Environment($loader);
$twig->addExtension(new MoneyExtension());
{{ cents_to_euros(250) }} €
becomes:
2.5...
Speed
• Twig template -> optimized PHP -> rendered HTML
• Caching at different levels
• C-extension available
Monday, Augus...
Documentation
• Extensive documentation available!
• http://twig.sensiolabs.org/documentation
Monday, August 26, 13
Good IDE highlight support
• phpstorm
• netbeans
• eclipse
• sublime text
• notepad++
• vim
• textmate
• etc …
Monday, Aug...
Why
D8
+ ?
Monday, August 26, 13
New theme layer!
D8
Monday, August 26, 13
Why do we need a new theme layer?
What’s wrong with D7’s theme layer?
or
Monday, August 26, 13
http://www.smile-day.net/wp-content/uploads/2012/03/Winking-Smiley-Face1.jpg
Monday, August 26, 13
Flaws in D7’s theme layer
• PHPtemplate is insecure
• Template language is Drupal-only (PHPtemplate + drupalisms)
• Lots o...
PHPtemplate is insecure
<?php
db_query("DROP TABLE {node}");
unlink('sites/default/files/myfilename.pdf');
?>
Monday, August...
Monday, August 26, 13
PHPtemplate is insecure
<?php
db_query("DROP TABLE {node}");
unlink('sites/default/files/myfilename.pdf');
?>
Not possible i...
Twig - Security
• autoescape by default
• sandbox
Monday, August 26, 13
Template language is Drupal-only
Twig is proudly found elsewhere!
No need to reinvent the wheel.
Monday, August 26, 13
Lots of different ways to address variables
• array key
• object property
• getBar or isBar function
{{ foo.bar }}
• $foo[‘...
Theme system is overly complex
http://www.slideshare.net/nyccamp/a-new-theme-layer-for-drupal-8
Monday, August 26, 13
Theme system is overly complex
http://www.slideshare.net/nyccamp/a-new-theme-layer-for-drupal-8
Monday, August 26, 13
Two ways of creating markup
theme_admin_view();
admin-view.tpl.php
Only Twig templates left!
admin-view.html.twig
Monday, ...
Too many and too cluttered templates
Templates will be cleaned and consolidated
in the refactoring process.
Monday, August...
Flaws in D7’s theme layer
• PHPtemplate is insecure
• Template language is Drupal-only (PHPtemplate + drupalisms)
• Lots o...
Current development status
• *DONE* Twig is now an official template engine in D8 core
• *DONE* Templates are being converte...
Conclusions …
Monday, August 26, 13
Thanks!
Questions?
Monday, August 26, 13
Upcoming SlideShare
Loading in...5
×

Twig & D8 - DrupalCamp Baltics 2013 - Tallinn

3,045

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,045
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Twig & D8 - DrupalCamp Baltics 2013 - Tallinn"

  1. 1. Twig & Drupal 8 Monday, August 26, 13
  2. 2. Arto Iijalainen • Druid Oy (GOLD SPONSOR o/) • From Finland • Drupal backend developer • Drupal.org: Sir-Arturio • Twitter: @arto_iijalainen, @druidfi Monday, August 26, 13
  3. 3. Joonas Pajunen • Fraktio Oy • Symfony2 Developer • Twitter: joonsp Monday, August 26, 13
  4. 4. Twig Monday, August 26, 13
  5. 5. Overview • Twig in general • Why Twig is in Drupal 8? • Twig’s solutions to Drupal’s problems • Current state of the project & conclusion Monday, August 26, 13
  6. 6. 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 Monday, August 26, 13
  7. 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 Monday, August 26, 13
  8. 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 Monday, August 26, 13
  9. 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 Monday, August 26, 13
  10. 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 Monday, August 26, 13
  11. 11. Language features • control structures • expressions & tests • variables • logic • math Monday, August 26, 13
  12. 12. <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> Monday, August 26, 13
  13. 13. Variable access • array key $foo[‘bar’] • object property $foo->bar • getBar or isBar function $foo->getBar(), $foo->isBar() {{ foo.bar }} Monday, August 26, 13
  14. 14. Composability • block • extends • include • use Monday, August 26, 13
  15. 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 %} Monday, August 26, 13
  16. 16. Filters, functions {{ post.published_at|date("m/d/Y") }} {{ [“alice”,“bob”]|first|upper }} -> ALICE {{ random(['apple', 'orange', 'citrus']) }} Monday, August 26, 13
  17. 17. Extensibility • custom functions, tags, filters • can override and customize syntax Monday, August 26, 13
  18. 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 Monday, August 26, 13
  19. 19. $twig = new Twig_Environment($loader); $twig->addExtension(new MoneyExtension()); {{ cents_to_euros(250) }} € becomes: 2.5 € Example: creating a custom function (usage) Monday, August 26, 13
  20. 20. Speed • Twig template -> optimized PHP -> rendered HTML • Caching at different levels • C-extension available Monday, August 26, 13
  21. 21. Documentation • Extensive documentation available! • http://twig.sensiolabs.org/documentation Monday, August 26, 13
  22. 22. Good IDE highlight support • phpstorm • netbeans • eclipse • sublime text • notepad++ • vim • textmate • etc … Monday, August 26, 13
  23. 23. Why D8 + ? Monday, August 26, 13
  24. 24. New theme layer! D8 Monday, August 26, 13
  25. 25. Why do we need a new theme layer? What’s wrong with D7’s theme layer? or Monday, August 26, 13
  26. 26. http://www.smile-day.net/wp-content/uploads/2012/03/Winking-Smiley-Face1.jpg Monday, August 26, 13
  27. 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 Monday, August 26, 13
  28. 28. PHPtemplate is insecure <?php db_query("DROP TABLE {node}"); unlink('sites/default/files/myfilename.pdf'); ?> Monday, August 26, 13
  29. 29. Monday, August 26, 13
  30. 30. PHPtemplate is insecure <?php db_query("DROP TABLE {node}"); unlink('sites/default/files/myfilename.pdf'); ?> Not possible in Twig! o/ Monday, August 26, 13
  31. 31. Twig - Security • autoescape by default • sandbox Monday, August 26, 13
  32. 32. Template language is Drupal-only Twig is proudly found elsewhere! No need to reinvent the wheel. Monday, August 26, 13
  33. 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 Monday, August 26, 13
  34. 34. Theme system is overly complex http://www.slideshare.net/nyccamp/a-new-theme-layer-for-drupal-8 Monday, August 26, 13
  35. 35. Theme system is overly complex http://www.slideshare.net/nyccamp/a-new-theme-layer-for-drupal-8 Monday, August 26, 13
  36. 36. Two ways of creating markup theme_admin_view(); admin-view.tpl.php Only Twig templates left! admin-view.html.twig Monday, August 26, 13
  37. 37. Too many and too cluttered templates Templates will be cleaned and consolidated in the refactoring process. Monday, August 26, 13
  38. 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 Monday, August 26, 13
  39. 39. Current development status • *DONE* Twig is now an official 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! Monday, August 26, 13
  40. 40. Conclusions … Monday, August 26, 13
  41. 41. Thanks! Questions? Monday, August 26, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×