English version: https://medium.com/@ger86/symfony-and-mjml-sending-emails-like-a-professional-a1b096a1abb1

Creo que una de las tareas más tediosas a las que nos tenemos que enfrentar cuando desarrollamos páginas webs es la creación de plantillas de emails. Sí, parece algo trivial, pero si ya os habéis tenido que enfrentar a ello sabréis que implementar emails que luzcan bien en todos los clientes de correo es, como poco, un dolor de cabeza.

De hecho es la mejor forma de realizar un viaje en el tiempo si queréis comprobar de primera mano cómo se programaban las webs hace 10 años.

Sin embargo, recientemente me he topado con un lenguaje que simplifica muchísimo esta tarea y que se integra a la perfección con Symfony y Twig por lo que decidido preparar este artículo para hablaros de él. Bienvenidos al maravilloso mundo de MJML.

¿Qué es MJML?

MJML es un framework que tal y como anuncia en su propia página web nos permite generar plantillas de email responsive de manera muy sencilla. Para ello nos provee de un formato basado en XML cuyas etiquetas nos permiten crear los componentes básicos de un email.

Una vez hecho esto, podemos recurrir a su libraría Javascript para convertir esas plantillas en HTML que estará listo para enviar y que lucirá perfecto en cualquier cliente de correo. Sí, incluso Outlook. 🎉🎉🎉

Estructura básica de un email con MJML

La estructura básica de un email escrito sobre MJML es bastante sencilla. Por ejemplo, si queremos tener un email con el siguiente aspecto:

Podemos escribir el siguiente código:

Más sencillo imposible. Aunque podéis profundizar más sobre cada una de las etiquetas usadas en ese trozo de código en la documentación de MJML las comentaremos brevemente:

• La etiqueta mjml la etiqueta inicial de cualquier plantilla que vayamos a escribir empleando este framework. En su interior puede contener tanto la etiqueta mj-head como la etiqueta mj-body (pero sólo esas dos).
• La etiqueta mj-head , que no he usado en el ejemplo anterior, nos permite albergar tanto los estilos de la plantilla como las etiquetas meta que queramos incorporar.
• La etiqueta mj-body contiene la “magia” de este framework y es donde diseñaremos nuestra plantilla.
• La etiqueta mj-section actúa como si fuera una fila dentro de nuestro email, lo cual nos va a permitir estructurar nuestro email. Eso sí, tiene la limitación de que no podemos anidar sections dentro de sections.
• La etiqueta mj-column nos permite crear columnas dentro de las secciones que definamos, por lo que podremos poner texto a dos columnas o implementar diseños algo más complicados como el típico de imagen a la izquierda y texto a la derecha.
• La etiqueta mj-image nos permite incrustar imágenes responsive en nuestros emails.
• Finalmente mj-text nos permite incorporar texto formateado a las plantillas.

Cada una de estas etiquetas tienen sus propios atributos (y alguna que otra limitación) descritos en la documentación por lo que os aconsejo que la echéis un vistazo si queréis profundizar en este lenguaje.

Además, existen algunas “sorpresas” como la posibilidad de incluir acordeones mediante la etiqueta mj-accordion:

O carruseles empleando la etiqueta mj-carousel :

Integración de MJML con Symfony y Twig

Una vez que nos hemos familiarizado con MJML lo siguiente será integrarlo con Symfony y el sistema de plantillas Twig de cara a que podamos trabajar con variables dentro de nuestros emails.

Es cierto que existen un par de bundles que nos permiten realizar este proceso de forma automática como por ejemplo:

Pero creo que en este caso compensa realizar la integración manual ya que es bastante sencilla y nos ahorraremos depender de librerías de terceros.

Lo primero que haremos será instalar en nuestro proyecto la librería mjml de Javascript mediante npm o yarn :

yarn add mjml

Esta librería nos permitirá compilar nuestras plantillas escritas mediante MJML para obtener el HTML final. En nuestro caso, necesitaremos obtener archivos .html.twig para emplearlos posteriormente en nuestros controladores o servicios cuando enviemos los emails.

Por ejemplo, supongamos que queremos enviar el típico email de bienvenida una vez que el usuario se registra en la página web. Lo primero que haremos será crear el archivo welcome.mjml.html.twig dentro de templates/emails/mjml :

Como podéis ver, en la línea 9 estoy empleando lenguaje twig para imprimir el nombre del usuario, algo que podemos hacer sin problemas (alguno hay, pero hablaremos de él más adelante).

A continuación ejecutaremos el siguiente comando de consola desde la raíz de nuestro proyecto:

mjml templates/emails/mjml/*.mjml.html.twig -o templates/emails

Este comando básicamente invoca a la librería mjml de Javascript con dos argumentos:

• El primero indica los archivos a procesar
• El segundo el directorio donde colocar los archivos HTML generados.

Tras ejecutarlo, obtendremos el archivo welcome.html.twig en la carpeta templates/emails . Este archivo ya tendrá toda la estructura de tablas necesaria para que el email se vea bien en todos los clientes de correo y en distintas resoluciones, pero, lo más importante, habrá preservado la línea Bienvenido {{ user.name }} . Esto nos permitirá emplearla para enviar el email de bienvenida desde nuestro controlador o servicio como si de una plantilla “normal” se tratara.

Truco. Si os aburre ejecutar ese comando constantemente podéis escribir el siguiente atajo en vuestro archivo package.json :

"scripts": {"build:email": "mjml templates/emails/mjml/*.mjml.html.twig -o templates/emails"},

de modo que para compilar las plantillas bastará con ejecutar:

yarn build:email

desde línea de comandos.

Escapar etiquetas dentro de MJML

Hasta aquí todo genial. El único problema al que os podéis enfrentar es si queréis tener una plantilla que incluya etiquetas Twig de control de flujo como {% if %} o {% for %} , por ejemplo:

En este caso, al ejecutar el comando para compilar la plantilla MJML obtendremos un error por lo que si queremos introducir esa clase de lógica tendremos que escapar esas instrucciones mediante la etiqueta mj-raw :

Con esto conseguiremos obtener nuestra plantilla .html.twig sin ningún problema y enviaremos unos emails perfectos y, sobre todo, sin habernos estrujado la cabeza más de lo necesario. ¡Gracias MJML!

Agradecimientos y conclusiones

En primer lugar no me gustaría terminar el artículo sin agradecer a Cristian Gámez haberme descubierto esta librería. ¡Siempre se aprende algo de ti!

Por lo demás espero que este artículo os haya servido y que a partir de ahora cuando os toque programar un email transaccional no os suponga un gran esfuerzo conseguir un buen resultado, pues como habéis visto, los pasos para conseguirlo son muy muy sencillos.

¿Quieres recibir más artículos como este?

Si te ha gustado este artículo te animo a que te suscribas a la newsletter que envío cada domingo con publicaciones similares a esta y más contenido recomendado: 👇👇👇