TWIGDrupal 8, It’s in Core

OCPHP / OC Drupal @ocphp

ME• PHP Application Developer

Who happens to do Drupal Who also likes to dabble in frontend

• Experience with Twig is in Silex, a micro-framework built on Symfony

• Been organizer of OCPHP for nearly 8 years and OC Drupal around ~4 years

THE PRESENTATION

A little less about Drupal and more just about Twig

Picture and Demo free

WHAT IS TWIG

• A PHP Template Engine to separate Presentation Layer from the Controller/Model (PHP)

• Developed by same people behind Symfony; yes, that’s in Drupal 8 Core too

COMMON COMPLAINTS

BUT PHP WAS JUST FINE, WHY TWIG ?

• Mixed PHP with HTML can be just plain sloppy and hard to read

• PHP still has to scan html documents looking for all those <?php tags amongst the HTML

• Designers have too much power and can open security bugs in the presentation layer with PHP

• Defining a function or filtering for theming was sloppy — no real standard way

I DON’T WANT MORE BLOAT

• PHP is definitely faster but Twig is safer

• As a developer, you control the PHP executed in a template. No possible coding hacks like this in Templates … <?php $user = db_query(“SELECT n.nid FROM users WHERE uid = “.$_GET[‘uid’].“)”; ?>

• Obviously a bit more execution time and memory but Twig has been around for a while, tested, and aims to be fast ! Generated PHP will run through OPCode.

• Twig caches the generate PHP code so only changes are re-generated

Besides … In Drupal, Twig is the least of your worries when it comes to bloat.

Rendered Arrays

SO WHAT ARE THE BENEFITS

BENEFITS• An extendable template engine

• Secure (can enable variable output escaping globally)

• It’s Unit Tested

• Great documentation and online resources

• Not coupled to Symfony so it has its own roadmap and community

EVEN MORE BENEFITS• Easy to understand clean syntax

• Extend it and create your own filters or functions to give designers to use

• Once you know it, can use it in other PHP frameworks outside of Drupal

• Syntax support in several IDEs (PHPStorm) http://blog.jetbrains.com/phpstorm/2013/06/twig-support-in-phpstorm/

NOT ANOTHER SYNTAX LEARN !

…STOP WHINING, IT’S PRETTY EASY…

PRINT OUTPUT

<?php print $user[‘name’]; ?> !!

{{ user.name }}

COMMENTS

depending on developers mood <?php // …. ?> <?php /* …. ?>

!{# Comment #}

FILTERS

<?php t(‘Welcome, ’ . $user[‘name’]); ?> !

{{ ‘Welcome, @name’|t({ ‘@name’: user.name }) }}

COMBINING FILTERS

<?php strtoupper(t(‘Welcome, ’ . $user[‘name’]);) ?> !

{{ ‘Welcome, @name’|t({ ‘@name’: user.name }|upper) }}

IF<?php if (isset($user[‘name’])) { echo $user[‘name’] } else { echo ‘Who are you?’ }; ?> !{% if user.name is defined %} {{ user.name }} {% else %} Who are you? {% endif %} !Not testing, but following might work too {% user.name|default(‘Who are you’) %}

LOOPS<?php foreach ( $users as $key => $user ) { print

$user[‘name’]; } ?> !

{% for key, user in users %} {{ user.name }} {% endfor %}

CONTROL WHITESPACEuse - in output or function tags

!{{- user.name -}}

!{%- if user.name is defined -%}{%- endif -%}

!

CALCULATIONS<?php print $user[‘total’] + 1; ?>

!{{ users.total + 1 }}

!!

CONCAT / SET STRINGS<?php print strtolower(‘’Greeting ‘ . $user[‘first’]); ?>

!{% set greeting = 'Hello ' %} {% set name = user.first %}

!{{ greeting ~ name|lower }} {# Hello bob #}

!{{ (greeting ~ name)|lower }} {# hello bob #}

EXPRESSIONS{% if 1 not in [1, 2, 3] %}

!{% if 'cd' in 'abcde' %}

!{% if 'Bob' starts with 'B' %}

!{% if phone matches '{^[\d\.]+$}' %}

!http://twig.sensiolabs.org/doc/templates.html#twig-expressions

LOGIC WITH EXPRESSIONSPHP: && || <>

!and or not !

{% if user.name is not defined or user.name == ‘Bob’ %} !

http://twig.sensiolabs.org/doc/templates.html#twig-expressions

EXTENDINGDon’t duplicate the whole twig file just to change a single piece of

output. Extend it. !

{% extends ‘layout.html.twig’ %} !

or if layout = “layout.html.twig” was set as Twig Global/var !

{% extends layout %}

CONDITIONAL EXTENDS(mobile variable is set in code and passed to template)

!{% extends mobile ? “mobile.html.twig" : “layout.html.twig” %}

!!!

BLOCKSDefine content in blocks to allow for extending of templates !

!{% block sidebar %}

…content… {% endblock %}

!!

OVERRIDING BLOCKSThe benefit of extending and defining blocks in a template.

!Any child template can override just that block content from

the parent template without having to change any other html ! !

OVERRIDING BLOCKS{% extends '/core/modules/system/tests/modules/twig_theme_test/modules/twig_namespace_a/templates/test.html.twig' %} !{% block content %} I just overrode the content block in the parent template. {% endblock %}

!!

INCLUDE OTHER TEMPLATES{% extends ‘layout.html.twig’ %} !{% include ‘sidebar-left.html.twig’ %} !{% block content %} I just overrode the content block in the parent template. {% endblock %} !

!!

WHAT ABOUT DEBUGGING?

DEBUG IN DRUPAL 8In settings.php, uncomment …. !# $settings['twig_debug'] = TRUE; # $settings['twig_auto_reload'] = TRUE; # $settings['twig_cache'] = FALSE;

DEBUG IN DRUPAL 8!

{{ dump(user) }} !!!Since Twig process the template into a generate PHP file, don’t believe you can step through with XDebug and IDE like PHPStorm. (??)

TWIG LOOKS GREAT ! BUT NOW WHAT ?

!It’s a huge undertaking to replace the theme layer and currently

still progressing but several templates have been converted: views, base templates, etc.

!

Twig Initiative ToDo List !

https://groups.drupal.org/node/278968

D7 TO D8 TEMPLATES

Extensive work required but checkout Twigify !

Twigify is a module for converting Drupal 7 PHP Template themes to Drupal 8 Twig themes. It was presented/demoed at Drupalcon Portland (BOF) and at numerous US camp sessions, and also in the Twig Lab at Drupalcon Prague.

!https://drupal.org/node/2099611

!

THANKS !

william.estrada@ocphp.org !

linkedin.com/in/webbywe

Questions?

RESOURCES• On IRC, #drupal-twig

• (Do something about Drupal theming) http://jacine.net/post/19652705220/theme-system

• (YouTube DrupalCon Portland) http://www.youtube.com/watch?v=tPJ6LRJN0nw&feature=youtu.be

• (Twig) http://twig.sensiolabs.org/

• (Twiggy - sample template by Jen Lampton) https://github.com/jenlampton/twiggy/tree/master/templates

• (Twig in Drupal 8 slides) http://www.slideshare.net/Wizzlern/twig-in-drupal8

• (Twig support in PHPStorm) http://blog.jetbrains.com/phpstorm/2013/06/twig-support-in-phpstorm/

• (Twig coding standards) http://twig.sensiolabs.org/doc/coding_standards.html

• (Debugging in Twig) https://drupal.org/node/1906780

• (Current ToDo List) https://groups.drupal.org/node/278968

• (Drupal 8 and power of Twig) http://rootwork.org/blog/2013/05/drupal-8-power-twig-drupalcon-portland-featured-session

• (Twig Performance) http://www.appneta.com/blog/twig-performance/