Date post: | 13-Apr-2017 |
Category: |
Presentations & Public Speaking |
Upload: | bmeme |
View: | 202 times |
Download: | 0 times |
Twig e i belli dentroPANORAMICA SUI NUOVI STANDARD DI FRONTEND-DEVELOPMENT IN DRUPAL 8
Nicolò Meucci, frontend developer @bmeme
Di cosa parleremo
LE NOVITÀ DI DRUPAL 81PRESENTAZIONE
IL NUOVO THEME ENGINE: TWIG
IL THEMING SU DRUPAL 8
CONCLUSIONI
IL THEME ENGINE SU DRUPAL 7
Le novità di Drupal 8
IL CUORE DI DRUPAL 82INTRODUZIONE
HTML5(Nuovi tag)
ACCESSIBILITÀ(WAI-ARIA Roles)
RESPONSIVE(Responsive e mobile-ready)
THEME ENGINE(Twig)
PHPTemplate
3.1IL 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().
All’interno dei template era possibile qualsiasi cosa, persino effettuare operazioni sul database.
PHPTemplate
3.1IL THEME ENGINE SU DRUPAL 7
GLI SVANTAGGI
<?php db_query(“DROP TABLE {node}”); ?>
Sicurezza
String? Object? Array?
PHPTemplate
3.1IL 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.
PHPTemplate
3.1IL 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
Il cambiamento: Twig
3.2IL 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.
Twig
3.3IL 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
Twig
3.3IL NUOVO THEME ENGINE: TWIG
VANTAGGI
Niente PHP nei nostri template.
<?php … ?>
Separazione tra logica e presentazione
Twig
3.3IL 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
Twig
3.3IL 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 %}
Il risultato
3.4IL NUOVO THEME ENGINE: TWIG
THEME FUNCTIONS TEMPLATES
HTML5 CSS3
IL TEMA È IN CONTROLLOdi
(markup) (style)&
Le basi e la sintassi
3.5IL NUOVO THEME ENGINE: TWIG
COMMENTARE su riga singola o multipla
{# … #}
{{ … }}
STAMPARE una variabile o risultato
{% … %}
CONTROLLARE la logica del template
Le basi e la sintassi
3.5IL 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.
Le basi e la sintassi
3.5IL 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 %}
Le basi e la sintassi
3.5IL NUOVO THEME ENGINE: TWIG
CREARE VARIABILI e assegnargli valori.
{% set classes = [ ‘myclass’, ‘anotherclass’ ]
%}
Le basi e la sintassi
3.5IL 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" %}
La directory /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
La struttura dei temi
4.1IL THEMING SU DRUPAL 8
PIÙ STRUTTURA, PIÙ METODO
1. *.info.yml 2. *.libraries.yml 3. *.breakpoints.yml 4. *.theme
Base themes
4.3IL 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.
Le librerie
4.4IL THEMING SU DRUPAL 8
I VANTAGGI DELLE LIBRERIE
• Dipendenze • Categorizzazione • CSS e JS associati in unità logiche • Caricamento delle librerie dove
necessarie
Le librerie
4.4IL 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()
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.
Il debug
4.5IL 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
Twig in Drupal
4.6IL 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 }}
Twig in Drupal
4.7IL 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.
Twig in Drupal
4.7IL 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)
Twig in Drupal
4.7IL 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à:
Twig in Drupal
4.8IL 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>
Twig in Drupal
4.8IL 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
]
%}
Twig in Drupal
4.9IL 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.
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.
Considerazioni finali
5CONCLUSIONI
LEGGIBILITÀ E COMPRENSIONE
CODICE E TEMI STRUTTURATI
SEPARAZIONE TRA LOGICA E PRESENTAZIONE
STRUMENTI COMUNI E CODICE STANDARD
Metodologia di lavoro
Link e risorse
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