Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
TWIG
Drupal 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...
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 sa...
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 ...
I DON’T WANT MORE BLOAT
•

PHP is definitely faster but Twig is safer	

As a developer, you control the PHP executed in a t...
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 Test...
EVEN MORE BENEFITS
•

Easy to understand clean syntax	


•

Extend it and create your own filters or functions to give
desi...
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 }|u...
IF
<?php if (isset($user[‘name’])) { echo $user[‘name’] } else { echo
‘Who are you?’ }; ?>	

!

{% if user.name is defined ...
LOOPS
<?php foreach ( $users as $key => $user ) { print
$user[‘name’]; } ?>	

!

{% for key, user in users %}	

	

 {{ use...
CONTROL WHITESPACE
use - 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 ...
EXPRESSIONS
{% if 1 not in [1, 2, 3] %}	

!

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

!

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

!

{% if phone...
LOGIC WITH EXPRESSIONS
PHP: && || <>	

!

and	

or 	

not	

!

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

!
...
EXTENDING
Don’t duplicate the whole twig file just to change a single piece of
output. Extend it.	

!

{% extends ‘layout.h...
CONDITIONAL EXTENDS
(mobile variable is set in code and passed to template)	

!

{% extends mobile ? “mobile.html.twig" : ...
BLOCKS
Define content in blocks to allow for extending of templates !	

!

{% block sidebar %}	

…content…	

{% endblock %}...
OVERRIDING BLOCKS
The benefit of extending and defining blocks in a template.	

!

Any child template can override just that...
OVERRIDING BLOCKS
{% extends '/core/modules/system/tests/modules/twig_theme_test/
modules/twig_namespace_a/templates/test....
INCLUDE OTHER TEMPLATES
{% extends ‘layout.html.twig’ %}	

!

{% include ‘sidebar-left.html.twig’ %}	

!

{% block content...
WHAT ABOUT DEBUGGING?
DEBUG IN DRUPAL 8
In settings.php, uncomment ….	

!

# $settings['twig_debug'] = TRUE;	

# $settings['twig_auto_reload'] =...
DEBUG IN DRUPAL 8
!

{{ dump(user) }}	

!
!
!

Since Twig process the template into a generate PHP file, don’t
believe you ...
TWIG LOOKS GREAT !	

BUT NOW WHAT ?
!

It’s a huge undertaking to replace the theme layer and currently
still progressing ...
D7 TO D8 TEMPLATES
Extensive work required but checkout Twigify	

!

Twigify is a module for converting Drupal 7 PHP Templ...
THANKS !
Questions?
william.estrada@ocphp.org	

!

linkedin.com/in/webbywe
RESOURCES
•

On IRC, #drupal-twig	


•

(Do something about Drupal theming) http://jacine.net/post/19652705220/theme-syste...
Upcoming SlideShare
Loading in …5
×

Twig for Drupal 8 and PHP | Presented at OC Drupal

2,796 views

Published on

A high level overview of Twig and its functions that was presented at the OC Drupal meetup in February 2014 at KWALL.

As Twig is now part of Drupal 8 core, it is still being developed so slides are mostly on Twig itself. Discussion was over what Twig provides to themers.

http://www.meetup.com/oc-php
http://www.meetup.com/ocdrupal/

Published in: Technology

Twig for Drupal 8 and PHP | Presented at OC Drupal

  1. 1. TWIG Drupal 8, It’s in Core OCPHP / OC Drupal @ocphp
  2. 2. 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
  3. 3. THE PRESENTATION A little less about Drupal and more just about Twig Picture and Demo free
  4. 4. 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
  5. 5. COMMON COMPLAINTS
  6. 6. 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
  7. 7. 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
  8. 8. Besides … In Drupal, Twig is the least of your worries when it comes to bloat. Rendered Arrays
  9. 9. SO WHAT ARE THE BENEFITS
  10. 10. 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
  11. 11. 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-inphpstorm/
  12. 12. NOT ANOTHER SYNTAX LEARN !
  13. 13. …STOP WHINING, IT’S PRETTY EASY…
  14. 14. PRINT OUTPUT <?php print $user[‘name’]; ?> ! ! {{ user.name }}
  15. 15. COMMENTS depending on developers mood <?php // …. ?> <?php /* …. ?> ! {# Comment #}
  16. 16. FILTERS <?php t(‘Welcome, ’ . $user[‘name’]); ?> ! {{ ‘Welcome, @name’|t({ ‘@name’: user.name }) }}
  17. 17. COMBINING FILTERS <?php strtoupper(t(‘Welcome, ’ . $user[‘name’]);) ?> ! {{ ‘Welcome, @name’|t({ ‘@name’: user.name }|upper) }}
  18. 18. 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’) %}
  19. 19. LOOPS <?php foreach ( $users as $key => $user ) { print $user[‘name’]; } ?> ! {% for key, user in users %} {{ user.name }} {% endfor %}
  20. 20. CONTROL WHITESPACE use - in output or function tags ! {{- user.name -}} ! {%- if user.name is defined -%}{%- endif -%} !
  21. 21. CALCULATIONS <?php print $user[‘total’] + 1; ?> ! {{ users.total + 1 }} ! !
  22. 22. 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 #}
  23. 23. 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
  24. 24. LOGIC WITH EXPRESSIONS PHP: && || <> ! and or not ! {% if user.name is not defined or user.name == ‘Bob’ %} ! http://twig.sensiolabs.org/doc/templates.html#twig-expressions
  25. 25. EXTENDING Don’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 %}
  26. 26. CONDITIONAL EXTENDS (mobile variable is set in code and passed to template) ! {% extends mobile ? “mobile.html.twig" : “layout.html.twig” %} ! ! !
  27. 27. BLOCKS Define content in blocks to allow for extending of templates ! ! {% block sidebar %} …content… {% endblock %} ! !
  28. 28. OVERRIDING BLOCKS The 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 ! !
  29. 29. 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 %} ! !
  30. 30. 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 %} ! ! !
  31. 31. WHAT ABOUT DEBUGGING?
  32. 32. DEBUG IN DRUPAL 8 In settings.php, uncomment …. ! # $settings['twig_debug'] = TRUE; # $settings['twig_auto_reload'] = TRUE; # $settings['twig_cache'] = FALSE;
  33. 33. 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. (??)
  34. 34. 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
  35. 35. 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 !
  36. 36. THANKS !
  37. 37. Questions? william.estrada@ocphp.org ! linkedin.com/in/webbywe
  38. 38. 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/

×