Nuevo en Symfony 2.7: el componente Asset

En las versiones de Symfony anteriores a la 2.7, la gestión de los "assets web" (imágenes, CSS, JS, etc.) era responsabilidad del componente Templating. El diseño de esa parte del framework tenía algunos errores (por ejemplo requería el scope request porque dependía de la instancia del Request) y limitaciones (por ejemplo en la gestión de las URLs seguras).

Para resolver todos estos problemas de una vez Symfony 2.7 incluye un nuevo componente llamado Asset. Ahora la gestión de esos assets web está totalmente desacoplada del componente Templating, lo que permite por ejemplo usarlo fuera de Symfony (por ejemplo en el microframework Silex).

Las funciones del componente Asset son dos: 1) generar las URL de los assets (imágenes, CSS, JS, etc.); 2) determinar la versión que se incluye dentro de esas URLs. Gracias a este componente tus plantillas son mucho más concisas y tu aplicación es más flexible, ya que puedes cambiar la localización y versión de los assets simplemente cambiando un par de opciones en un archivo de configuración.

Cambios en la configuración

El primer cambio que introduce el nuevo componente es que las antiguas opciones assets_* de la sección templating ahora se definen en la sección assets y no incluyen el prefijo asset en su nombre:

# Symfony 2.6
# app/config/config.yml
framework:
    templating:
        assets_version: 'v5'
        assets_version_format: '%%s?version=%%s'
        assets_base_urls:
            http: ['http://cdn.example.com']
            ssl:  ['https://secure.example.com']
        packages:
            # ...
 
# Symfony 2.7
# app/config/config.yml
framework:
    assets:
        version: 'v5'
        version_format: '%%s?version=%%s'
        base_path: ~
        base_urls: ['http://cdn.example.com', 'https://secure.example.com']
        packages:
            # ...

Por motivos de retrocompatibilidad, las antiguas opciones siguen funcionando, por lo que no tienes que cambiarlas si no quieres. Eso sí, las opciones antiguas desaparecerán en Symfony 3.0, así que es conveniente actualizarlas.

El único cambio importante en las opciones de configuración es que la opción base_urls ya no distingue entre URLs normales (http) y URLs seguras (ssl).

Cambios en las funciones de las plantillas

En Symfony 2.7, la conocida función asset() de Twig ha eliminado los argumentos opcionales absolute y version:

{# Symfony 2.6 #}
{{ asset('logo.png', absolute = true) }}
 
{# Symfony 2.7 #}
{{ absolute_url(asset('logo.png')) }}
 
{# Symfony 2.6 #}
{{ asset('logo.png', version = 'v5') }}
 
{# Symfony 2.7 (no hay que hacer nada, la versión se añade automáticamente #}
{{ asset('logo.png') }}
 
{# usa la función asset_version() para obtener la versión de un asset #}
{{ asset_version('logo.png') }}

Ejemplos de uso

La mejor manera de aprender las nuevas funcionalidades de este componente es leer la documentación del componente Asset. Así descubrirás cómo hacer cosas como estas:

Definir atajos para los assets de los bundles

# app/config/config.yml
framework:
    assets:
        packages:
            app:
                base_path: /bundles/app/
            img:
                base_path: /bundles/app/images/
{{ asset('images/me.png', 'app') }}
{# /bundles/app/images/me.png #}
 
{{ asset('me.png', 'img') }}
{# /bundles/app/images/me.png #}

Versionado avanzado de assets

# app/config/config.yml
framework:
    assets:
        version: 'v5'
        version_format: '%%s?version=%%s'
        packages:
            avatar:
                base_path: /img/avatars
            doc:
                base_path: /docs/pdf
                version_format: '%2$s/%1$s'
{{ asset(user.uuid ~ '.png', 'avatar') }}
{# /img/avatars/1b0ae6a5-1c39-4b49-bcc1-2a787c8ec139.png?version=v5 #}
 
{{ asset('contracts/signup.pdf', 'doc') }}
{# /v5/docs/pdf/contracts/signup.pdf #}

CDNs que dependen del contexto de ejecución

# app/config/config.yml
framework:
    assets:
        base_urls:
            - 'http://static1.example.com/images/'
            - 'https://static2.example.com/images/'
{{ asset('logo.png') }}
{# en una página no segura: http://static1.example.com/images/logo.png #}
{# en una página segura:    https://static2.example.com/images/logo.png #}

Este nuevo componente ha sido desarrollado por Fabien Potencier y puedes ver los detalles en el pull request #13234.

Fuente: New in Symfony 2.7: the new Asset component

Comentarios

  1. Pequeña typo - dependecía => dependía

    Marc Morera el 22 de abril de 2015, 12:53:08

  2. Marc, muchas gracias por avisar. Ya está corregido.

    Javier Eguiluz el 23 de abril de 2015, 12:18:46

Este artículo ya no permite añadir más comentarios.
¿Por qué? Los artículos cierran sus comentarios automáticamente unos meses después de su publicación para asegurar que estos sigan siendo relevantes.

Publicada el

22 de abril de 2015

Proyectos Symfony destacados

La plataforma de eCommerce 100% Symfony que rivaliza con Magento y PrestaShop. Ver más

Síguenos en @symfony_es para acceder a las últimas noticias.