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

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)

Che cos’è un theme engine

3IL THEME ENGINE SU DRUPAL 7

Data Template

Theme engine

Result Page

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


GLI SVANTAGGI

<?php db_query(“DROP TABLE {node}”); ?>

Sicurezza

String? Object? Array?

PHPTemplate


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


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


VANTAGGI

All’interno dei template possiamo utilizzare soltanto determinati tag. Quindi, niente operazioni con il DB.

<?php db_query(“DROP TABLE {node}”); ?>

Sicurezza

Twig


VANTAGGI

Niente PHP nei nostri template.

<?php … ?>

Separazione tra logica e presentazione

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


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


THEME FUNCTIONS TEMPLATES

HTML5 CSS3

IL TEMA È IN CONTROLLOdi

(markup) (style)&

Le basi e la sintassi


COMMENTARE su riga singola o multipla

{# … #}

{{ … }}

STAMPARE una variabile o risultato

{% … %}

CONTROLLARE la logica del template



FILTRI modificano variabili nei template Twig

{{ title|upper }}

I filtri sono separati dalla variabile da un pipe | e possono avere argomenti nelle parentesi.



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 %}



CREARE VARIABILI e assegnargli valori.

{% set classes = [ ‘myclass’, ‘anotherclass’ ]

%}



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

Il file .info.yml


dday.info.yml

Informazioni base

Librerie

Regioni

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


I VANTAGGI DELLE LIBRERIE

• Dipendenze • Categorizzazione • CSS e JS associati in unità logiche • Caricamento delle librerie dove

necessarie

Le librerie


{{ 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


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


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


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



Twig in Drupal



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



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


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


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


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

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

Presentations & Public Speaking

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