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 e i belli dentro
PANORAMICA SUI NUOVI STANDARD DI
FRONTEND-DEVELOPMENT IN DRUPAL 8
Nicolò Meucci, frontend developer ...
Dicosaparleremo
LE NOVITÀ DI DRUPAL 8
1PRESENTAZIONE
IL NUOVO THEME ENGINE: TWIG
IL THEMING SU DRUPAL 8
CONCLUSIONI
IL THE...
LenovitàdiDrupal8
IL CUORE DI DRUPAL 8
2INTRODUZIONE
HTML5
(Nuovi tag)
ACCESSIBILITÀ
(WAI-ARIA Roles)
RESPONSIVE
(Responsi...
Che cos’èun
themeengine
3IL THEME ENGINE SU
DRUPAL 7
Data Template
Theme engine
Result Page
PHPTemplate
3.1
IL THEME ENGINE SU
DRUPAL 7
IL THEME ENGINE DI DRUPAL 7
Utilizza file di template individuali, con
estensio...
All’interno dei template era possibile
qualsiasi cosa, persino effettuare
operazioni sul database.
PHPTemplate
3.1
IL THEM...
String? Object? Array?
PHPTemplate
3.1
IL THEME ENGINE SU
DRUPAL 7
GLI SVANTAGGI
<?php print $node->nid; ?> //object
Acces...
PHPTemplate
3.1
IL THEME ENGINE SU
DRUPAL 7
GLI SVANTAGGI
Complessità
File di template, tante funzioni theme() e
un theme ...
Ilcambiamento:Twig
3.2
IL NUOVO
THEME ENGINE:
TWIG
IL THEME ENGINE DI DRUPAL 8
E’ un linguaggio di templating basato su
PH...
Twig
3.3
IL NUOVO
THEME ENGINE:
TWIG
VANTAGGI
All’interno dei template possiamo
utilizzare soltanto determinati tag.
Quind...
Twig
3.3
IL NUOVO
THEME ENGINE:
TWIG
VANTAGGI
Niente PHP nei nostri template.
<?php … ?>
Separazione tra logica e
presenta...
Twig
3.3
IL NUOVO
THEME ENGINE:
TWIG
VANTAGGI
Twig ci mostra messaggi di aiuto sugli
errori. E’ possibile abilitare la fun...
Twig
3.3
IL NUOVO
THEME ENGINE:
TWIG
VANTAGGI
Semplice da imparare, leggibile e
comprensibile.
Sintassi semplice e compren...
Ilrisultato
3.4
IL NUOVO
THEME ENGINE:
TWIG
THEME FUNCTIONS TEMPLATES
HTML5 CSS3
IL TEMA È IN CONTROLLO
di
(markup) (style...
Lebasiela sintassi
3.5
IL NUOVO
THEME ENGINE:
TWIG
COMMENTARE su riga singola o multipla
{# … #}
{{ … }}
STAMPARE una vari...
Lebasiela sintassi
3.5
IL NUOVO
THEME ENGINE:
TWIG
FILTRI modificano variabili nei template Twig
{{ title|upper }}
I filtri...
Lebasiela sintassi
3.5
IL NUOVO
THEME ENGINE:
TWIG
STRUTTURE DI CONTROLLO per controllare il
flusso dei template (es. if, ...
Lebasiela sintassi
3.5
IL NUOVO
THEME ENGINE:
TWIG
CREARE VARIABILI e assegnargli valori.
{%
set classes = [
‘myclass’,
‘a...
Lebasiela sintassi
3.5
IL NUOVO
THEME ENGINE:
TWIG
EREDITARIETÀ DEI TEMPLATE permette di
creare template base, contenenti ...
Ladirectory/themes
4IL THEMING SU
DRUPAL 8
UN ALTRO CAMBIAMENTO
I temi custom e contrib ora risiedono
nella cartella /them...
Lastruttura deitemi
4.1
IL THEMING SU
DRUPAL 8
PIÙ STRUTTURA, PIÙ METODO
1. *.info.yml
2. *.libraries.yml
3. *.breakpoints...
Ilfile.info.yml
4.2
IL THEMING SU
DRUPAL 8
dday.info.yml
Informazioni base
Librerie
Regioni
Base themes
4.3
IL THEMING SU
DRUPAL 8
<div class=“node node—article …”>
{{ foo }}
</div>
CLASSY
STABLE
Per iniziare con m...
Lelibrerie
4.4
IL THEMING SU
DRUPAL 8
I VANTAGGI DELLE LIBRERIE
• Dipendenze
• Categorizzazione
• CSS e JS associati in un...
Lelibrerie
4.4
IL THEMING SU
DRUPAL 8
{{ attach_library('theme/library') }}
INSERIRE LIBRERIE DA TEMPLATE
INSERIRE LIBRERI...
dday.info.yml
Nel *.info.yml richiamiamo le librerie definite
nel file *.libraries.yml
dday.libraries.yml
Definiamo le nostre...
Ildebug
4.5
IL THEMING SU
DRUPAL 8
FINALMENTE CHIAREZZA E VELOCITÀ
• Abilitare il debug sites/default/
services.yml
Sta st...
Twigin Drupal
4.6
IL THEMING SU
DRUPAL 8
ACCESSO ALLE VARIABILI
Per stampare una variabile
{{ content }}
Con un punto (.) ...
Twigin Drupal
4.7
IL THEMING SU
DRUPAL 8
CLASSI, PREPROCESS, ATTRIBUTES
Le funzioni preprocess non saranno più
utilizzate ...
Twigin Drupal
4.7
IL THEMING SU
DRUPAL 8
CLASSI, PREPROCESS, ATTRIBUTES
Twigin Drupal
4.7
IL THEMING SU
DRUPAL 8
CLASSI, PREPROCESS, ATTRIBUTES
L’oggetto attributes ha il compito di
contenere se...
Twigin Drupal
4.7
IL THEMING SU
DRUPAL 8
CLASSI, PREPROCESS, ATTRIBUTES
I metodi degli attributi sono
concatenabili:
{# cl...
Twigin Drupal
4.8
IL THEMING SU
DRUPAL 8
FILTRI
Il filtro without permette di escludere dal
rendering i field che non voglia...
Twigin Drupal
4.8
IL THEMING SU
DRUPAL 8
FILTRI
Il filtro clean_class prepara una stringa
all’uso come classe HTML valida.
...
Twigin Drupal
4.9
IL THEMING SU
DRUPAL 8
EREDITARIETÀ
Non è necessario duplicare
completamente un template per poter
andar...
field.html.twig
{% block contents %}
{% endblock %}
Definisce la parte che può essere
sovrascritta.
field—node—field-link--...
Considerazionifinali
5CONCLUSIONI
LEGGIBILITÀ E
COMPRENSIONE
CODICE E TEMI
STRUTTURATI
SEPARAZIONE TRA
LOGICA E PRESENTAZI...
Linkerisorse
6INFORMAZIONI E
CREDITI
MAGGIORI INFORMAZIONI
• http://d8.sqndr.com/
• https://youtu.be/1m6WR7e7qwU
• https:/...
"Twig e i belli dentro": panoramica sui nuovi standard di frontend-development in D8
"Twig e i belli dentro": panoramica sui nuovi standard di frontend-development in D8
Upcoming SlideShare
Loading in …5
×

"Twig e i belli dentro": panoramica sui nuovi standard di frontend-development in D8

248 views

Published on

Talk tenuto da Nicolò Meucci, bmeme Frontend Developer, alla DrupalDay 2015 Conference del 4 dicembre 2015.

  • Be the first to comment

  • Be the first to like this

"Twig e i belli dentro": panoramica sui nuovi standard di frontend-development in D8

  1. 1. Twig e i belli dentro PANORAMICA SUI NUOVI STANDARD DI FRONTEND-DEVELOPMENT IN DRUPAL 8 Nicolò Meucci, frontend developer @bmeme
  2. 2. Dicosaparleremo LE NOVITÀ DI DRUPAL 8 1PRESENTAZIONE IL NUOVO THEME ENGINE: TWIG IL THEMING SU DRUPAL 8 CONCLUSIONI IL THEME ENGINE SU DRUPAL 7
  3. 3. LenovitàdiDrupal8 IL CUORE DI DRUPAL 8 2INTRODUZIONE HTML5 (Nuovi tag) ACCESSIBILITÀ (WAI-ARIA Roles) RESPONSIVE (Responsive e mobile-ready) THEME ENGINE (Twig)
  4. 4. Che cos’èun themeengine 3IL THEME ENGINE SU DRUPAL 7 Data Template Theme engine Result Page
  5. 5. 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().
  6. 6. 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
  7. 7. 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.
  8. 8. 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
  9. 9. 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.
  10. 10. 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
  11. 11. Twig 3.3 IL NUOVO THEME ENGINE: TWIG VANTAGGI Niente PHP nei nostri template. <?php … ?> Separazione tra logica e presentazione
  12. 12. 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
  13. 13. 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 %}
  14. 14. Ilrisultato 3.4 IL NUOVO THEME ENGINE: TWIG THEME FUNCTIONS TEMPLATES HTML5 CSS3 IL TEMA È IN CONTROLLO di (markup) (style) &
  15. 15. 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
  16. 16. 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.
  17. 17. 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 %}
  18. 18. Lebasiela sintassi 3.5 IL NUOVO THEME ENGINE: TWIG CREARE VARIABILI e assegnargli valori. {% set classes = [ ‘myclass’, ‘anotherclass’ ] %}
  19. 19. 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" %}
  20. 20. 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
  21. 21. Lastruttura deitemi 4.1 IL THEMING SU DRUPAL 8 PIÙ STRUTTURA, PIÙ METODO 1. *.info.yml 2. *.libraries.yml 3. *.breakpoints.yml 4. *.theme
  22. 22. Ilfile.info.yml 4.2 IL THEMING SU DRUPAL 8 dday.info.yml Informazioni base Librerie Regioni
  23. 23. 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.
  24. 24. 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
  25. 25. 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()
  26. 26. 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.
  27. 27. 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
  28. 28. 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 }}
  29. 29. 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.
  30. 30. Twigin Drupal 4.7 IL THEMING SU DRUPAL 8 CLASSI, PREPROCESS, ATTRIBUTES
  31. 31. 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)
  32. 32. 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à:
  33. 33. 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>
  34. 34. 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 ] %}
  35. 35. 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.
  36. 36. 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.
  37. 37. Considerazionifinali 5CONCLUSIONI LEGGIBILITÀ E COMPRENSIONE CODICE E TEMI STRUTTURATI SEPARAZIONE TRA LOGICA E PRESENTAZIONE STRUMENTI COMUNI E CODICE STANDARD Metodologia di lavoro
  38. 38. 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

×