Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Ventajas de usar TWIG en Symfony

Nacho Blanco
  • Escrito por Nacho Blanco el 21 de Noviembre de 2018
  • 2 min de lectura | Frameworks
Ventajas de usar TWIG en Symfony
El reproductor de video será cargado en breves instantes.

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.

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Cómo instalar Symfony 3

Cómo instalar Symfony 3

Frameworks

13 de Septiembre de 2017

Aprende a cómo instalar Symfony 3, uno de los frameworks más usados de PHP. Instala Symofny 3 y empieza crear tu nueva aplicación.

¿Por qué usar Symfony 3?

¿Por qué usar Symfony 3?

Desarrollo Web

24 de Octubre de 2017

Te damos las razones de por qué usar Symfony 3 para desarrollar tu Web en PHP y te enseñamos grandes empresas que lo usan.

Curso de Symfony 3

Curso de Symfony 3

curso

Con este curso aprenderás:

  • Instalación y configuración de Symfony3
  • Opciones y herramientas más usadas
  • TWIG: El motor de vistas de Symfony

Duración: 5 horas y 37 minutos

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars