Your SlideShare is downloading. ×
0
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

1,697

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,697
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×