Integración de Jade en #Symfony
Symfony es un gran framework PHP que permite una amplia personalización y muchísimas herramientas para el desarrollo de cualquier web, según los requisitos del proyecto.
En este artículo vamos a integrar un nuevo sistema de templates en Symfony llamado Jade. Para el que no conozca nada acerca de este sistema de templates que no se alarme, vamos a dar una pequeña introducción sobre qué es y cómo se usa.
¿Que es Jade y cómo se usa?
Jade es un sistema de templates implementado en javascript creado para trabajar sobre todo en plataformas node.js. Este sistema de template actúa como un pre-procesador HTML.
Si entramos a su página web podemos encontrar un claro ejemplo de su uso:
Los elementos HTML se definen al estilo python, mediante indentaciones y los atributos van entre paréntesis como si se tratasen de parámetros de una función.
Cómo se ve en el ejemplo, se permiten sentencias de control y bucles para realizar comprobaciones sobre las variables incluidas en la template.
Como hemos comentado este sistema de template nació para node.js pero cada vez se está extendiendo a más entornos y lenguajes.
¿Cómo se integra en Symfony?
En nuestro ejemplo nos basaremos en la librería https://github.com/kylekatarnls/jade-symfony.
Lo primero que necesitamos es crear un proyecto nuevo en symfony mediante el generador (si no lo tienes instalado puedes acudir aquí para instalarlo y configurarlo) mediante el comando:
symfony new testJade
Una vez hecho esto necesitamos instalar los bundles necesarios para el correcto funcionamiento de Symfony mediante composer (si no lo tienes instalado puedes instalarlo siguiendo las instrucciones que se describen aquí):
Nos vamos al directorio raíz del proyecto:
cd testJade/
e instalamos los bundles usando composer:
composer install
En este punto ya tendremos la base para el proyecto Symfony básico con el que comenzar.
Instalamos el bundle que hemos nombrado al principio y que nos brinda la posibilidad de usar este sistema de template:
composer require pug-php/pug-symfony
Ya tenemos instalado el bundle en nuestro proyecto y podemos empezar con la configuración para añadir la funcionalidad de Jade.
Necesitamos editar los siguientes ficheros:
-
app/config/services.yml
En él nos encontramos con dos apartados (parameters y services).
En el apartado services debemos añadir lo siguiente:
-
app/config/config.yml
En él nos encontramos con todas las configuraciones de Symfony. Debemos buscar entre todas ellas templating y e incluir jade y php en el array que contiene:
¿Cómo se utiliza en symfony?
Una vez hecho esto ya tendremos el entorno preparado para hacer uso de este sistema de templates.
Para utilizar las nuevas templates en jade deberemos crear templates con nombres del tipo nombre_template.html.pug y renderizarlas desde el controller de igual manera que los twig.
Vamos a explicarlo con un ejemplo con la estructura básica que viene en Symfony por defecto:
-
Vamos a crear un template en jade. Para ello nos vamos a app/Resources/views y creamos el fichero prueba.html.pug. En él incluimos el siguiente código:
-
Después vamos al controller ubicado en src/AppBundle/Controller/DefaultController.php y modificamos el método indexAction:
Una vez hecho esto deberíamos ver el resultado en el navegador al acceder a nuestra proyecto recién creado:
¿Dónde puedo encontrar más información?
Aquí hemos presentado un ejemplo muy básico de uso de jade, pero este sistema de templates incluye un ámplio número de funcionalidades que pueden ser consultados en la documentación oficial aquí.
