Your SlideShare is downloading. ×
  • Like
Twig
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

Twig presentation for DrupalCamp Finland 2013

Twig presentation for DrupalCamp Finland 2013

Published 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
743
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!