Uploaded on

Twig presentation for DrupalCamp Finland 2013

Twig presentation for DrupalCamp Finland 2013

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
No Downloads

Views

Total Views
711
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
9
Comments
0
Likes
1

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
  • 2. Joonas Pajunen• Fraktio Oy• Symfony2 Developer• Twitter: joonsp
  • 3. Arto Iijalainen• Druid Oy• Drupal backend developer• Drupal.org: Sir-Arturio• Twitter: arto_iijalainen
  • 4. Twig
  • 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 }}
  • 14. Composability• extends• include• use• block
  • 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 …
  • 23. WhyD8+ ?
  • 24. New theme layer!D8
  • 25. Why do we need a new theme layer?What’s wrong with D7’s theme layer?or
  • 26. http://www.smile-day.net/wp-content/uploads/2012/03/Winking-Smiley-Face1.jpg
  • 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<?phpdb_query("DROP TABLE {node}");unlink(sites/default/files/myfilename.pdf);?>
  • 29. PHPtemplate is insecure<?phpdb_query("DROP TABLE {node}");unlink(sites/default/files/myfilename.pdf);?>Not possible in Twig! o/
  • 30. Twig - Security• autoescape by default• sandbox
  • 31. Template language is Drupal-onlyTwig is proudly found elsewhere!No need to reinvent the wheel.
  • 32. 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
  • 33. Theme system is overly complexhttp://www.slideshare.net/nyccamp/a-new-theme-layer-for-drupal-8
  • 34. Theme system is overly complexhttp://www.slideshare.net/nyccamp/a-new-theme-layer-for-drupal-8
  • 35. Two ways of creating markuptheme_admin_view();admin-view.tpl.phpOnly Twig templates left!admin-view.html.twig
  • 36. Too many and too cluttered templatesTemplates will be cleaned and consolidatedin the refactoring process.
  • 37. 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 fixTheme layer will fix
  • 38. 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!
  • 39. Conclusions …
  • 40. Thanks!