Twig & D8 - DrupalCamp Baltics 2013 - Tallinn

Twig &

Drupal 8

Monday, August 26, 13

Arto Iijalainen

• Druid Oy (GOLD SPONSOR \o/)

• From Finland

• Drupal backend developer

• Drupal.org: Sir-Arturio

• Twitter: @arto_iijalainen, @druidfi


Joonas Pajunen

• Fraktio Oy

• Symfony2 Developer

• Twitter: joonsp


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


<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





• print {{ }}

Syntax





• print {{ }}

• execute statements {% %}

Syntax





• print {{ }}

• execute statements {% %}

• comment {# #}

Syntax


Language features

• control structures

• expressions & tests

• variables

• logic

• math


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


Variable access

• array key $foo[‘bar’]

• object property $foo->bar

• getBar or isBar function $foo->getBar(), $foo->isBar()

{{ foo.bar }}


Composability

• block

• extends

• include

• use


{# 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") }}

{{ [“alice”, “bob”]|first|upper }} -> ALICE

{{ 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());

{{ cents_to_euros(250) }} €

becomes:

2.5 €

Example: creating a custom function (usage)


Speed

• Twig template -> optimized PHP -> rendered HTML

• Caching at different levels

• C-extension available


Documentation

• Extensive documentation available!

• http://twig.sensiolabs.org/documentation


http://twig.sensiolabs.org/documentation

http://twig.sensiolabs.org/documentation

Good IDE highlight support

• phpstorm

• netbeans

• eclipse

• sublime text

• notepad++

• vim

• textmate

• etc …


WhyD8

+ ?Monday, August 26, 13

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<?php db_query("DROP TABLE {node}"); unlink('sites/default/files/myfilename.pdf'); ?>


PHPtemplate is insecure<?php db_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-only

Twig 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 complex

http://www.slideshare.net/nyccamp/a-new-theme-layer-for-drupal-8




Two ways of creating markup

theme_admin_view();admin-view.tpl.php

Only Twig templates left!admin-view.html.twig


Too many and too cluttered templates

Templates will be cleaned and consolidated in 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 fix

Theme layer will fix


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!


Conclusions …


Thanks!Questions?


Twig & D8 - DrupalCamp Baltics 2013 - Tallinn

Technology

Transcript of Twig & D8 - DrupalCamp Baltics 2013 - Tallinn