Slides de la Charla "¡TWIG desde 0!" Dada en la Drupal Camp 2016 por Jorgillo y Miguel_kode.

1. ¡TWIG DESDE 0!
APRENDAMOS QUÉ ES Y CÓMO UTILIZARLO

2. LOS QUE OS VAN A DAR LA CHAPA
JORGE DÍAZ AMIGO
DESARROLLADOR FRONTEND ASPGEMS
Twitter: @YnarBurmecia

3. LOS QUE OS VAN A DAR LA CHAPA
MIGUEL ÁNGEL CARO GARCÍA
DESARROLLADOR FRONT-END Y OCASIONALMENTE BACK-END (le doy a todo lo
que pueda XD)
DESARROLLADOR EN ASPgems
Twitter: @miguelAngCaro

4. ÍNDICE
1. TWIG ¿Qué es?
2. ¿Cómo funciona TWIG?
3. Nomenclatura básica (variables, comentarios, etc..)
4. “Herramientas de TWIG” (Filtros, funciones, etc...)
5. Depuración en TWIG.
6. Sistema de herencia de plantillas.
7. Twig Tweak.
8. Parte práctica.

5. ¿Empezamos?

6. ¿Qué es TWIG?
- Es un motor y lenguaje de plantillas usado por Drupal 8.
- Sistema encapsulado de trabajo.
- Flexible y rápido.
- Herencia de plantillas y extensiones -> (¡¡Por fin tenemos la casa limpia!!)
- Adios PHP

7. ¿Qué es TWIG?
- Amigable, tanto para el diseñador como para el desarrollador.
- Separa y queda bien definida la separación entre lógica funcional y capa de
presentación.
- Seguro → Tiene un modo recinto de seguridad.

8. ANTES DE NADA … VISTAZO ATRÁS

9. Drupal 7
HTML generado en módulos
Preprocess y process
PHP en plantillas
Ocasionalmente puede complicarse cambiar cosas muy concretas
Theming disperso

10. ¿Cómo funciona TWIG?
Se resume en 4 pasos:
- Cargar la plantilla: Si la plantilla está cargada, se va al último paso
“Evaluación de la plantilla”, sino:
- Analizador léxico: reduce la plantilla (código fuente) a pequeñas piezas(secuencia de
símbolos) para poder compilarlas fácilmente.
- Analizador sintáctico: convierte esa secuencia de símbolos en “el árbol de sintáxis abstracta”.

11. ¿Cómo funciona TWIG?
- El compilador → coge ese árbol de nodos y lo transforma a código PHP.
- Evaluación de plantilla → llama al método display() de la plantilla compilada
adjuntando el contexto.

12. Nomenclatura TWIG
Sintaxis básica:
{{ informacion }} → Mostramos información.
{# comentarios #} → Comentarios en la plantilla.
{% Código %} → Ejecutar lógica.

13. Nomenclatura TWIG
- Crear variables:
{%set nombre = ‘Pepito’ %}
Mi nombre el {{ nombre }}

14. Nomenclatura TWIG
Variables simples:
{{ variable_simple }}

15. Nomenclatura TWIG
Variables complejas:
{{ variable.title }}

16. Nomenclatura TWIG
Busca:
$variable[‘title’] → Array con clave asociativa.
$variable -> title → Objeto y atributo.
$variable-> title() → Método
$variable -> getTitle() → Get
$variable -> isTitle() → Is

17. Nomenclatura TWIG
Sentencias:
IF:
{% if variable == false %}
<p>Hello</p>
{% endif %}
------------------------------------------------------------------------------------------
{% if variable > 10 and variable < 27 %}
<p>Hello</p>
{% endif %}

18. Nomenclatura TWIG
FOR:
{% for variable in variables %}
<li>{{ variable|upper }}</li>
{% endfor %}

19. Macros
Nos permiten crear elementos genéricos y reutilizarlos después.
Declaración en cualquier plantilla:
{% macro input(name, value, type, size) %}
<input type="{{ type|default('text') }}" name="{{ name }}" value="{{ value|e }}" size="{{ size|default(20) }}" />
{% endmacro %}
Importación:
{% import "forms.html" as forms %}

20. Macros
Invocación:
El número de atributos puede variar, valor default en los que no se introduzcan
<p>{{ forms.input('username') }}</p>
<p>{{ forms.input('password', null, 'password') }}</p>
Uso en el mismo documento donde están definidos “_self”
{% import _self as forms %}
<p>{{ forms.input('username') }}</p>

21. Herramientas TWIG
FILTROS:
{{‘Users’|upper}}
abs batch capitalize convert_encoding date date_modify default escape first
format join json_encode keys last length lower merge nl2br number_format raw
replace reverse round slice sort split
http://twig.sensiolabs.org/doc/filters/index.html

22. Herramientas TWIG
Traducción:
{{‘Users’|t}} → Cadena para traducir

23. Herramientas TWIG
Funciones:
attribute block constant cycle date dump include max min
parent random range
http://twig.sensiolabs.org/doc/functions/index.html

24. Depuración de TWIG
- Inspección de plantillas. Nos permite “depurar” las plantillas.
- ¿Cómo? → en services.yml habilitando:
$settings[‘twig_debug’] = TRUE;

25. Depuración de TWIG
Obtenemos esta información:

26. Depuración de TWIG
Otro modo de depuración (utilizando la función dump):

27. Depuración de TWIG
Utilización de Kint.
Con drupal console.
- drupal module:install devel
- drupal module:install kint
En template:
- {{ kint(page.content) }}

28. Twig auto reload
Detección automática de cambios en las plantillas
Desactivado por defecto, se activa al activar la depuración
Mola!
Configurable en el services.yml
Habilitar sólo en desarrollo

29. Twig caché
Activada automáticamente en entornos de desarrollo.
Las plantilla se cachean al crearse para mayor velocidad
NO afecta ni al debug ni al reload -> no hace falta limpiarla al añadir cosas nuevas
Configurable en el services.yml
Desactivar en producción

30. Herencia de plantillas
- Permite crear una plantilla a base (definiendo bloques genéricos), a
continuación definir plantillas hijas que modifiquen esos bloques.

31. Herencia de plantillas
- base.html.twig

32. Herencia de plantillas
- blog.html.twig

33. Herencia de plantillas
Resultado Final

34. Herencia de plantillas
Consejos:
- Si utilizas la etiqueta {% extend %}, debe ser la primera de la plantilla.
- Si copias y pegas varias veces el contenido, mejor meterlo en una plantilla a
parte y añadirla donde queramos con un “include”.

35. Herencia de plantillas
- Obtener contenido de la plantilla padre {{parent()}}

36. Twig Tweak
Es un módulo de drupal que permite insertar en las plantillas de forma sencilla:
- Bloques.
- Entidades.
- Vistas.
- Tokens.
- Configuración.
- etc...

37. Twig Tweak
- Vistas:
- {{ drupal_view('view_name', 'page_1') }}
- Bloques:
- {{ drupal_block('bartik_powered') }}
- Entidades:
- {{ drupal_entity('node', 1, 'teaser') }}
- Tokens:
- {{ drupal_token('site:name') }}
- Configuración:
- {{ drupal_config('system.site', 'name') }}

38. Parte práctica
Configuración TWIG:
https://www.drupal.org/node/1903374

39. Parte práctica
1. Configuración de depuración.
2. Depuración con kint.
3. Cómo inicializar variables.
4. Utilización de filtros (capitalize, upper, number format filter).

40. FIN
Gracias por vuestra atención