¿Alguna vez has querido escribir Javascript moderno y CSS sin la necesidad de utilizar un bundle como Webpack? Pues ahora, con el nuevo componente presentado con la versión de Symfony 6.3, es posible. Vamos a hablar de AssetMapper y qué supone este nuevo componente en el desarrollo de nuestros proyectos Symfony.
Hasta el momento, todo lo relacionado al uso avanzado de CSS y Javascript se gestionaba con Webpack gracias al bundle WebpackEncore haciendo uso de Node.js. Esta herramienta nos permitía tener un Webpack preconfigurado con funciones de compilación para CSS y JS, integración de Typescript, React, Vue, etc. Ahora, con la llegada del nuevo componente AssetMapper, vamos a poder hacer parte de ese trabajo directamente con PHP sin la complejidad de Webpack y Node.js.
El componente AssetMapper te permite escribir Javascript moderno y CSS sin la complejidad de utilizar un bundler...
¿Qué es y qué hace AssetMapper?
El componente AssetMapper nos permitirá hacer uso de nuestro Javascript y CSS sin necesidad de compilación, mapeando los directorios de assets y haciéndolos accesibles desde un directorio público con sus nombres de archivos "versionados".
AssetMapper se compone principalmente de dos características:
- Mapeado y versionado de assets: Todos los archivos contenidos en el directorio /assets se ponen a disposición del público y son versionados.
- Importmaps: Característica nativa de los navegadores que hace facilita el uso de la declaración import de Javascript sin la necesidad de un sistema de compilación. La soportan todos los navegadores y es un estandar de la W3C.
Diferencias con WebpackEncore
Se diferencia del componente WebpackEncore en que, por el momento, no podemos hacer uso de esta función para utilizar tecnologías como Typescript, React o Vue que necesitan de transpilación y compilación para su completo y/o correcto funcionamiento. En la siguiente tabla vemos la diferencias principales:
| Encore | AssetMapper | |
|---|---|---|
| ¿Disponible para producción? | si | si |
| ¿Versión estable? | si | experimental |
| Requisitos | Node.js | PHP |
| ¿Requiere compilación? | si | no |
| ¿Funciona en todos los navegadores? | si | si |
| ¿Soporta Stimulus/UX? | si | si |
| ¿Soporta Sass/Tailwind? | si | si |
| ¿Soporta React, Vue o Svelte? | si | si1 |
| ¿Soporta TypeScript? | si | no |
Nota1: React (JSX) puede compilarse directamente a Javascript nativo pero se recomienda utilizar Encore en el caso de no utilizarlo de manera puntual, mientras que en el caso de Vue, también puede compilarse directamente a Javascript nativo y funcionará con el componente AssetMapper, pero en el caso de querer utilizar los "single-file componentes" se necesitará Encore.
Profundizando en AssetMapper
Si quieres aprender más sobre este nuevo componente y empezar a utilizarlo en tus proyectos puedes hacer uso de los siguientes enlaces:
- Documentación sobre el uso de herramientas front-end en Symfony.
- Documentación oficial de Webpack Encore.
- Documentación oficial de AssetMapper.
- Curso de AssetMapper en Symfonycast.
Conclusión
Este nuevo componente, junto con otras tecnologías disruptivas como las implementaciones de Hotwire para Symfony, Mercure o el nuevo HTMX, suponen un paso más en lo que parece una etapa de "backenización" en el escenario del desarrollo web actual donde el ecosistema Javascript parece reinar.
