Twig & D8 - DrupalCamp Baltics 2013 - Tallinn

  • 2,901 views
Uploaded on

 

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,901
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Twig & Drupal 8 Monday, August 26, 13
  • 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. Joonas Pajunen • Fraktio Oy • Symfony2 Developer • Twitter: joonsp Monday, August 26, 13
  • 4. Twig Monday, August 26, 13
  • 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. 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. <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. <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. <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. <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. Language features • control structures • expressions & tests • variables • logic • math Monday, August 26, 13
  • 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. 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. Composability • block • extends • include • use Monday, August 26, 13
  • 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. Filters, functions {{ post.published_at|date("m/d/Y") }} {{ [“alice”,“bob”]|first|upper }} -> ALICE {{ random(['apple', 'orange', 'citrus']) }} Monday, August 26, 13
  • 17. Extensibility • custom functions, tags, filters • can override and customize syntax Monday, August 26, 13
  • 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. $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. Speed • Twig template -> optimized PHP -> rendered HTML • Caching at different levels • C-extension available Monday, August 26, 13
  • 21. Documentation • Extensive documentation available! • http://twig.sensiolabs.org/documentation Monday, August 26, 13
  • 22. Good IDE highlight support • phpstorm • netbeans • eclipse • sublime text • notepad++ • vim • textmate • etc … Monday, August 26, 13
  • 23. Why D8 + ? Monday, August 26, 13
  • 24. New theme layer! D8 Monday, August 26, 13
  • 25. Why do we need a new theme layer? What’s wrong with D7’s theme layer? or Monday, August 26, 13
  • 26. http://www.smile-day.net/wp-content/uploads/2012/03/Winking-Smiley-Face1.jpg Monday, August 26, 13
  • 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. PHPtemplate is insecure <?php db_query("DROP TABLE {node}"); unlink('sites/default/files/myfilename.pdf'); ?> Monday, August 26, 13
  • 29. Monday, August 26, 13
  • 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. Twig - Security • autoescape by default • sandbox Monday, August 26, 13
  • 32. Template language is Drupal-only Twig is proudly found elsewhere! No need to reinvent the wheel. Monday, August 26, 13
  • 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. Theme system is overly complex http://www.slideshare.net/nyccamp/a-new-theme-layer-for-drupal-8 Monday, August 26, 13
  • 35. Theme system is overly complex http://www.slideshare.net/nyccamp/a-new-theme-layer-for-drupal-8 Monday, August 26, 13
  • 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. Too many and too cluttered templates Templates will be cleaned and consolidated in the refactoring process. Monday, August 26, 13
  • 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. 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. Conclusions … Monday, August 26, 13
  • 41. Thanks! Questions? Monday, August 26, 13