Mettez le Turbo, mais pas tout le temps

Turbo est un micro framework Javascript qui a pour but d’accélérer la navigation et les soumissions de formulaires d’un site web.

Il peut être utilisé pour qu’une application multi-page (MPA) se comporte comme une application single-page (SPA), évitant les rechargements de page.

Et tout ça sans même écrire la moindre ligne de code Javascript ! 🚀

L’espace client présentait de multiples fonctionnalités, telles que:

• la visualisation et le paiement en ligne des cotisations
• les demandes de remboursement
• le téléchargement de documents PDF (contrat, attestations, carte assuré…).

La compagnie d’assurances souhaitait savoir si son client avait téléchargé ses documents, et quand.

J’étais donc chargé de générer un enregistrement (log) visible dans la partie gestion pour chaque téléchargement depuis l’espace client.

⬇️

L’histoire se voulait simple: le modèle était déjà conçu, la vue aussi, ainsi que les contrôleurs pour les téléchargements. Il ne restait plus qu’à générer l’enregistrement.

Une tâche assez facile au départ (surtout avec Symfony 😜), mais qui a fini par me donner du fil à retordre !

Alors que tout était codé côté back, tests unitaires à l’appui (TDD oblige 😉), je contrôle via l’interface:

• Côté client, je clique sur le bouton “Télécharger”. Le PDF est bien généré, et affiché. ✅
• Côté gestionnaire, je vérifie la fiche client; Et là, surprise ! 😯

Le téléchargement m’a généré 2 lignes !

Je cherche à comprendre en utilisant le débogueur: rien à signaler, un seul enregistrement pendant la requête.

Je tente alors d’ouvrir un nouvel onglet, et j’y entre directement L’URL de téléchargement.

Une seule ligne de log. 🤔

Comme vous vous en doutez, parce que vous êtes trop forts (ou parce que c’est dans le titre 😜) c’est Turbo qui me joue des tours:

Avec Turbo Drive, la fonctionnalité `prefetch` précharge la page au survol du lien, réduisant la latence de chargement des pages de 500 à 800 ms, comme l’explique le site de Turbo.

L’URL est appelée une première fois par le prefetch de _Turbo_ au survol du bouton, puis une seconde fois au click.

Maintenant que je sais d’où vient le problème, je n’ai qu’à désactiver le prefetch de Turbo, et le tour est joué !

<a href="{{ path('assure_download_carte') }}" data-turbo-prefetch="false">
Télécharger
</a>

Je vérifie quand même, sait-on jamais: click, PDF, et voilà… Ou pas. 😢

J’ai encore 2 lignes de logs qui sont générées. 🤔

Allez, je vais vous la faire courte. Après pas mal de tests, j’ai fini par comprendre.

Turbo ne précharge plus le contenu de la page au survol du bouton, mon code a bien été pris en compte.

En revanche, comme le veut sa fonctionnalité de remplacement, il tente de remplacer le contenu du document HTML.

Il fait donc un premier appel à mon contrôleur.

Mais lorsqu’il voit que la réponse n’est pas du HTML, mais plutôt un PDF, il demande l’ouverture de l’URL dans un nouvel onglet, provoquant le deuxième appel ! 🙃

La solution aura été de forcer l’ouverture du document dans un nouvel onglet.

<a href="{{ path('assure_download_carte') }}" data-turbo="false" target="_blank">
Télécharger
</a>

Après ça, le téléchargement semblait bien plus rapide ! Forcément 🙂

Turbo est une technologie formidable pour fluidifier l’expérience utilisateur.

Mais après cette expérience, je conseille de prendre des précautions quant à son utilisation, surtout si vous l’activez globalement sur un projet web.

Veillez à le désactiver si :

• la page ciblée lance un processus, tel qu’un enregistrement en base de données ou un envoi d’email
• la page ciblée demande un **effort conséquent** au serveur ou à votre infrastructure: calculs gourmands, génération de PDFs, appel à d’autres micro-services…

Les performances de votre application pourraient en être significativement dégradées.

Happy coding !