Twig for Drupal 8 and PHP | Presented at OC Drupal
-
Upload
webbywe -
Category
Technology
-
view
1.634 -
download
4
description
Transcript of Twig for Drupal 8 and PHP | Presented at OC Drupal
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 !
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/