Twig
Upcoming SlideShare
Loading in...5
×
 

Twig

on

  • 1,010 views

Twig presentation for DrupalCamp Finland 2013

Twig presentation for DrupalCamp Finland 2013

Statistics

Views

Total Views
1,010
Views on SlideShare
1,010
Embed Views
0

Actions

Likes
1
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Twig Twig Presentation Transcript

  • 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 …
  • WhyD8+ ?
  • 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<?phpdb_query("DROP TABLE {node}");unlink(sites/default/files/myfilename.pdf);?>
  • PHPtemplate is insecure<?phpdb_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-onlyTwig 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 complexhttp://www.slideshare.net/nyccamp/a-new-theme-layer-for-drupal-8
  • Theme system is overly complexhttp://www.slideshare.net/nyccamp/a-new-theme-layer-for-drupal-8
  • Two ways of creating markuptheme_admin_view();admin-view.tpl.phpOnly Twig templates left!admin-view.html.twig
  • Too many and too cluttered templatesTemplates will be cleaned and consolidatedin 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 fixTheme 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!