Puntiamo la nostra lente di ingrandimento sul nuovo Template Engine di D8: Twig. Relatore: Nicolò Meucci

2. Twig e i belli dentro
PANORAMICA SUI NUOVI STANDARD DI
FRONTEND-DEVELOPMENT IN DRUPAL 8
Nicolò Meucci, frontend developer @bmeme

3. Dicosaparleremo
LE NOVITÀ DI DRUPAL 8
1PRESENTAZIONE
IL NUOVO THEME ENGINE: TWIG
IL THEMING SU DRUPAL 8
CONCLUSIONI
IL THEME ENGINE SU DRUPAL 7

4. LenovitàdiDrupal8
IL CUORE DI DRUPAL 8
2INTRODUZIONE
HTML5
(Nuovi tag)
ACCESSIBILITÀ
(WAI-ARIA Roles)
RESPONSIVE
(Responsive e mobile-ready)
THEME ENGINE
(Twig)

5. Che cos’èun
themeengine
3IL THEME ENGINE SU
DRUPAL 7
Data Template
Theme engine
Result Page

6. PHPTemplate
3.1
IL THEME ENGINE SU
DRUPAL 7
IL THEME ENGINE DI DRUPAL 7
Utilizza file di template individuali, con
estensione .tpl.php, per presentare le
funzioni theme_ di Drupal, come ad
esempio theme_pager().

7. All’interno dei template era possibile
qualsiasi cosa, persino effettuare
operazioni sul database.
PHPTemplate
3.1
IL THEME ENGINE SU
DRUPAL 7
GLI SVANTAGGI
<?php db_query(“DROP TABLE {node}”); ?>
Sicurezza

8. String? Object? Array?
PHPTemplate
3.1
IL THEME ENGINE SU
DRUPAL 7
GLI SVANTAGGI
<?php print $node->nid; ?> //object
Accesso alle variabili
<?php print $attributes; ?> //string
<?php print render($content); ?> //array
Troppi modi per accedere una variabile.

9. PHPTemplate
3.1
IL THEME ENGINE SU
DRUPAL 7
GLI SVANTAGGI
Complessità
File di template, tante funzioni theme() e
un theme layer molto complicato.
Uno schema semplificato del
theme layer, realizzato da John
Albin

10. Ilcambiamento:Twig
3.2
IL NUOVO
THEME ENGINE:
TWIG
IL THEME ENGINE DI DRUPAL 8
E’ un linguaggio di templating basato su
PHP, è parte del framework Symfony 2.
Tutte le funzioni theme_* e i file
PHPTemplate sono stati rimossi e
sostituiti con template Twig *.html.twig.

11. Twig
3.3
IL NUOVO
THEME ENGINE:
TWIG
VANTAGGI
All’interno dei template possiamo
utilizzare soltanto determinati tag.
Quindi, niente operazioni con il DB.
<?php db_query(“DROP TABLE {node}”); ?>
Sicurezza

12. Twig
3.3
IL NUOVO
THEME ENGINE:
TWIG
VANTAGGI
Niente PHP nei nostri template.
<?php … ?>
Separazione tra logica e
presentazione

13. Twig
3.3
IL NUOVO
THEME ENGINE:
TWIG
VANTAGGI
Twig ci mostra messaggi di aiuto sugli
errori. E’ possibile abilitare la funzione di
debug che velocizza e facilita il lavoro su
Drupal.
Debug più semplice e veloce

14. Twig
3.3
IL NUOVO
THEME ENGINE:
TWIG
VANTAGGI
Semplice da imparare, leggibile e
comprensibile.
Sintassi semplice e comprensibile
{% if var is divisible by(3) %}
<div class=“my-div”></div>
{% endif %}

15. Ilrisultato
3.4
IL NUOVO
THEME ENGINE:
TWIG
THEME FUNCTIONS TEMPLATES
HTML5 CSS3
IL TEMA È IN CONTROLLO
di
(markup) (style)
&

16. Lebasiela sintassi
3.5
IL NUOVO
THEME ENGINE:
TWIG
COMMENTARE su riga singola o multipla
{# … #}
{{ … }}
STAMPARE una variabile o risultato
{% … %}
CONTROLLARE la logica del template

17. Lebasiela sintassi
3.5
IL NUOVO
THEME ENGINE:
TWIG
FILTRI modificano variabili nei template Twig
{{ title|upper }}
I filtri sono separati dalla variabile da un
pipe | e possono avere argomenti nelle
parentesi.

18. Lebasiela sintassi
3.5
IL NUOVO
THEME ENGINE:
TWIG
STRUTTURE DI CONTROLLO per controllare il
flusso dei template (es. if, for, …)
{% if user|length > 0 %}
{% for user in users %}
{{ user.username|e }}
{% endfor %}
{% endif %}

19. Lebasiela sintassi
3.5
IL NUOVO
THEME ENGINE:
TWIG
CREARE VARIABILI e assegnargli valori.
{%
set classes = [
‘myclass’,
‘anotherclass’
]
%}

20. Lebasiela sintassi
3.5
IL NUOVO
THEME ENGINE:
TWIG
EREDITARIETÀ DEI TEMPLATE permette di
creare template base, contenenti gli elementi in
comune e definire block che i template figli
possono sovrascrivere.
Probabilmente la potenzialità maggiore di Twig.
{% extends "base.html" %}

21. Ladirectory/themes
4IL THEMING SU
DRUPAL 8
UN ALTRO CAMBIAMENTO
I temi custom e contrib ora risiedono
nella cartella /themes.
E’ una buona pratica separare i temi in
due cartelle:
• themes/contrib
• themes/custom

22. Lastruttura deitemi
4.1
IL THEMING SU
DRUPAL 8
PIÙ STRUTTURA, PIÙ METODO
1. *.info.yml
2. *.libraries.yml
3. *.breakpoints.yml
4. *.theme

23. Ilfile.info.yml
4.2
IL THEMING SU
DRUPAL 8
dday.info.yml
Informazioni base
Librerie
Regioni

24. Base themes
4.3
IL THEMING SU
DRUPAL 8
<div class=“node node—article …”>
{{ foo }}
</div>
CLASSY
STABLE
Per iniziare con markup e classi sensibili.
<div>{{ foo }}</div>
Per iniziare con markup più snello e
meno classi.

25. Lelibrerie
4.4
IL THEMING SU
DRUPAL 8
I VANTAGGI DELLE LIBRERIE
• Dipendenze
• Categorizzazione
• CSS e JS associati in unità logiche
• Caricamento delle librerie dove
necessarie

26. Lelibrerie
4.4
IL THEMING SU
DRUPAL 8
{{ attach_library('theme/library') }}
INSERIRE LIBRERIE DA TEMPLATE
INSERIRE LIBRERIE SU PAGINE SPECIFICHE
<?php
function theme_preprocess_maintenance_page(&$variables) {
$variables['#attached']['library'][] = 'theme/library';
}
?>
E’ possibile farlo implementando la
funzione THEME_preprocess_HOOK()

27. dday.info.yml
Nel *.info.yml richiamiamo le librerie definite
nel file *.libraries.yml
dday.libraries.yml
Definiamo le nostre librerie e
relativi percorsi ai file.

28. Ildebug
4.5
IL THEMING SU
DRUPAL 8
FINALMENTE CHIAREZZA E VELOCITÀ
• Abilitare il debug sites/default/
services.yml
Sta stampando il
markup
Possono andare in
override in maniera
specifica

29. Twigin Drupal
4.6
IL THEMING SU
DRUPAL 8
ACCESSO ALLE VARIABILI
Per stampare una variabile
{{ content }}
Con un punto (.) possiamo accedere
agli attributi di una variabile
{{ page.sidebar_first }}
{{ content.field_image }}

30. Twigin Drupal
4.7
IL THEMING SU
DRUPAL 8
CLASSI, PREPROCESS, ATTRIBUTES
Le funzioni preprocess non saranno più
utilizzate per aggiungere classi; questo
lavoro viene effettuato all’interno dei file
template Twig.
Questo ci permette di avere un grande
controllo sulle classi, senza l’uso di
funzioni preprocess o logica complessa.

31. Twigin Drupal
4.7
IL THEMING SU
DRUPAL 8
CLASSI, PREPROCESS, ATTRIBUTES

32. Twigin Drupal
4.7
IL THEMING SU
DRUPAL 8
CLASSI, PREPROCESS, ATTRIBUTES
L’oggetto attributes ha il compito di
contenere set di attributi ed espone
metodi per interagire con queste
informazioni:
attributes.addClass()
attributes.removeClass()
attributes.setAttribute($attribute, $value)
attributes.removeAttribute($attribute, $value)
attributes.hasClass($class)

33. Twigin Drupal
4.7
IL THEMING SU
DRUPAL 8
CLASSI, PREPROCESS, ATTRIBUTES
I metodi degli attributi sono
concatenabili:
{# classes = [ 'red', 'green', 'blue' ] #}
<div{{ attributes.addClass(classes).removeClass('green') }}></div>
<div class="red blue"></div>
Produrrà:

34. Twigin Drupal
4.8
IL THEMING SU
DRUPAL 8
FILTRI
Il filtro without permette di escludere dal
rendering i field che non vogliamo
mostrare, o mostrare successivamente.
<div {{ content_attributes }}>
{{ content|without(‘field_image’,’field_link’) }}
</div>

35. Twigin Drupal
4.8
IL THEMING SU
DRUPAL 8
FILTRI
Il filtro clean_class prepara una stringa
all’uso come classe HTML valida.
{%
set classes = [
'field--name-' ~ field_name|clean_class,
'field--type-' ~ field_type|clean_class
]
%}

36. Twigin Drupal
4.9
IL THEMING SU
DRUPAL 8
EREDITARIETÀ
Non è necessario duplicare
completamente un template per poter
andare in override.
Possiamo definire dei block (non quelli di
Drupal!) che ci permettono di controllare
il markup in determinate situazioni,
estendendo il template di base.

37. field.html.twig
{% block contents %}
{% endblock %}
Definisce la parte che può essere
sovrascritta.
field—node—field-link--article.html.twig
{% block contents %}
{% endblock %}
Andiamo in override sulla parte
interessata.
{% extends ‘path/to/file’ %}
Estendiamo il file di base.

38. Considerazionifinali
5CONCLUSIONI
LEGGIBILITÀ E
COMPRENSIONE
CODICE E TEMI
STRUTTURATI
SEPARAZIONE TRA
LOGICA E PRESENTAZIONE
STRUMENTI COMUNI E
CODICE STANDARD
Metodologia di lavoro

39. Linkerisorse
6INFORMAZIONI E
CREDITI
MAGGIORI INFORMAZIONI
• http://d8.sqndr.com/
• https://youtu.be/1m6WR7e7qwU
• https://www.drupal.org/theme-guide/8
• http://twig.sensiolabs.org/
CREDITI
• Icone: http://iconmonstr.com/
• http://john.albin.net/drupal/arrays-of-
doom