Ventajas de usar TWIG en Symfony
Vamos a ver un ejemplo en Symfony de la vista que viene por defecto al crear un proyecto, cuáles son las ventajas de este motor de plantillas y cómo nos facilita la tarea la hora de renderizar información para ver las ventajas de usar TWIG en Symfony.
Ejemplo de uso de TWIG
El motor de plantillas TWIG forma parte del framework Symfony por defecto, aunque el mismo se puede utilizar de forma independiente a Symfony.
Aquí tenemos el controlador por defecto, la acción index por defecto que nos ofrece Symfony a la hora de crear el proyecto.
class DefaultController extends Controller
{
/**
* Route(“/”, name=”homepage”)
*/
public function indexAction(Request $request)
{
// replace this example code with wathever you need
return $this->render(view: ‘default/index.html.twig’, [
‘base_dir’ => realpath(path: $this->getParameter(name: ‘kernel.root_dir’).’/..’)
]);
}
}
Aquí se renderiza una vista de TWIG y se le pasa un parámetro, aunque podríamos pasar todos los parámetros que quisiésemos.
Si nos vamos al archivo index.html.twig vemos lo siguiente:
{% extends ‘::base.html.twig’ %}
{% block body %}
<div id=”wrapper”>
<div id=”container”>
<div id=”welcome”>
<h1><span>Welcomed to </span> Symfony {{ constant(‘Symfony\\Component\\HttpKernel\\Kernel::VERSION') }}</h1>
</div>
<div id=”status”>
<p>
<svg id="icon-status" width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#759E1A"/></svg>
Your application is now ready. You can start working on it at:
<code>{{ base_dir }}/</code>
</p>
</div>
<div id=”next”>
<h2>What’s next?</h2>
<p>
En este archivo lo primero que se hace es extender de otra plantilla TWIG, lo que ya de por sí resulta una ventaja.
Si tuviéramos un HTML en plano o HTML embebido con PHP que imprimirse datos, por ejemplo, no tendríamos esta potencia de poder extender de otra plantilla TWIG, que fuera por ejemplo una plantilla maestra, y poder ampliar la información. Esta herencia resulta una buena ventaja.
Si vamos al archivo base.html.twig, vemos lo siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8” />
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %} {% endblock %}
<link rel=”icon” type=”image/x-icon” href=”{{ asset(‘favicon.ico’) }}” />
</head>
<body>
{% block body %} {% endblock %}
{% block javascript %} {% endblock %}
</body>
</html>
Aquí lo único que tenemos es la estructura de la aplicación, con su head, su body y demás.
En la base vemos que se definen una serie de bloques, llamados block, que están vacíos o contienen algo de texto. En la base se definen estos bloques, y posteriormente en la plantilla que va a extender ésta, es donde se amplía esa información del bloque o se rellena literalmente.
Por ejemplo, en la plantilla index.html.twig, tenemos un block body, que contiene un contenido definido. Todo ese contenido va a ir dentro del bloque body de la base, es decir, cuando se renderice el index, lo que va a hacer es colocar el cuerpo indicado, y cuando llegue al block body va a insertar toda la información que se le está indicando.
Hará lo mismo con el bloque de los estilos y demás bloques.
Otro ejemplo de uso de TWIG
Además de lo anterior se pueden hacer muchas más cosas con TWIG. Vamos a ver otro ejemplo diferente:
{% extends ‘::base.html.twig’ %}
{% block body %}
{% set variable = ‘twig var’ %}
{% set array = [{“clavel”: “valor1”}] %}
{{ texto }}
{% if array|length > 1 %}
{{ array[0].clavel }}
{% endif %}
{% endblock %}
En esta plantilla hemos creado una variable, un array, se puede imprimir información, se pueden hacer estructuras condicionales, podemos acceder a una propiedad de elemento de un array, podemos pasar el filtro de longitud para saber la longitud del array, sus estructuras condicionales y estructuras iterativas, etc.
Todo esto hace que sea una plantilla mucho más enriquecida, mucho más programable y un HTML o una vista mucho más programable.
TWIG nos ofrece bastantes posibilidades a la hora de programar nuestros contenidos estáticos, los assets, los estilos, las imágenes, etc..., y también nos ofrece muchas herramientas para incluirlos. Todo esto hace que si tenemos que decidir entre un motor de plantillas u otro, TWIG sea de los más recomendables.
Completa tu formación en Symfony aprendiendo a crear una API paso a paso con este completo curso online que podrás realizar en nuestra plataforma.
Recuerda que puedes comenzar este curso con tu suscripción de OpenWebinars. Si todavía no estás suscrito, aprovecha para hacerlo ahora.
