iGraal a développé un bundle pour répondre à la question suivante : comment pouvoir utiliser les extensions et filtres twig dans un fichier javascript, qui sera lui-même passé dans la moulinette d’assetic ?
Expression du besoin
iGraal a une application mobile compatible Android et iOS. iGraal souhaite utiliser le cache varnish pour son site, mais certains traitements traînent dans les request listeners, dont le test de compatibilité mobile. Hors, il faudrait éviter de faire un appel à toute la couche Symfony juste pour détecter qu’un utilisateur est mobile ou non. Une solution qui fonctionne très bien est de passer ce test en javascript.
Le rôle de ce javascript est donc 1) la détection du device utilisé par la personne (iOS / Android), 2) la décision de l’affichage (via cookies), 3) la redirection vers une URL donnée et 4) la possibilité d’inclure ce JS dans notre JS global déjà compilé par assetic.
Le filtre assetic Twig
Nous voulions donc utiliser :
- Assetic pour inclure ce JS dans notre JS global
- Utiliser la fonction twig path pour trouver vers quelle URL rediriger notre internaute
Un bundle a donc été créé : https://github.com/igraal/twig-assetic-filter-bundle
Au début, c’était pas vraiment un bundle, juste un bout de code, mais autant partager !
Ce bundle permet d’utiliser un filtre « twig » pour inclure des JS ou des CSS.
Exemple d’utilisation
Fichier HTML
- <DOCTYPE html>
- <html>
- <head>
- <% javascripts
- '@AcmeWhateverBundle/Resources/js/main.js'
- '@AcmeWhateverBundle/Resources/js/feature.twig.js'
- filter="twig" %>
- <script type="text/javascript" src="{{ asset_url }}" async defer />
- <% endjavascripts %>
- </head>
- ...
- </html>
Fichier JS
- if (isMobile()) window.location.replace('{{ path('www_mobile') }}');
Principales utilisations
Utilisation du filtre :
- Utiliser les routing dans du javascript (comme le montre l’exemple)
- Utiliser des traductions dans du javascript, surtout utile lors de validation de form en JS, dans tous les cas il y a l’ajax 😉
- Utiliser vos propres extensions pour du JS, par exemple pour faciliter le codage ou autre. On pourrait très bien imaginer une fonction js_debug qui fait un console.debug en javascript en dev, rien en prod.