Terrain 8 — Symfony UX
🔍 Renfort : Partie 8.
1. Contrôleur Stimulus ⭐⭐
🕹️ Mission : un contrôleur toggle qui affiche/masque un élément au clic.
✅ Solution
// assets/controllers/toggle_controller.js
import { Controller } from '@hotwired/stimulus';
export default class extends Controller {
static targets = ['content'];
toggle() { this.contentTarget.hidden = !this.contentTarget.hidden; }
}2. Brancher le contrôleur ⭐⭐
🕹️ Mission : le HTML qui attache toggle et déclenche toggle() au clic.
✅ Solution
<div data-controller="toggle">
<button data-action="click->toggle#toggle">Détails</button>
<div data-toggle-target="content" hidden>...</div>
</div>3. Nettoyage disconnect ⭐⭐⭐
🕹️ Mission : pourquoi nettoyer dans disconnect() ce que crée connect() (avec Turbo) ?
✅ Solution
Turbo remplace les pages sans rechargement → les contrôleurs se connectent/déconnectent souvent ; sans cleanup, timers/écouteurs s’accumulent (fuite). C’est l’équivalent du cleanup de useEffect.
4. Turbo Drive ⭐
🕹️ Mission : rendre la navigation SPA-like sans écrire de JS. Comment ?
✅ Solution
Installer symfony/ux-turbo : Turbo Drive est actif d’emblée (intercepte liens/formulaires, remplace le <body>).
5. Turbo Frame ⭐⭐⭐
🕹️ Mission : ouvrir un formulaire d’édition dans une carte sans recharger. Quel mécanisme ?
✅ Solution
Un Turbo Frame : encapsuler la carte dans un <turbo-frame id="..."> ; le lien « Modifier » ne met à jour que ce cadre.
6. Turbo Stream ⭐⭐⭐⭐
🕹️ Mission : après création, ajouter la ligne en tête de liste et mettre à jour un compteur. Quelles actions ?
✅ Solution
Deux <turbo-stream> : action="prepend" target="bookings_list" et action="update" target="bookings_count" (avec un fallback redirection si pas de Turbo).
7. LiveComponent : recherche ⭐⭐⭐⭐
🕹️ Mission : un champ de recherche qui filtre une liste au fil de la frappe, sans JS.
✅ Solution
#[AsLiveComponent]
final class BookingSearch {
use DefaultActionTrait;
#[LiveProp(writable: true)] public string $query = '';
public function getResults(): array { return $this->bookings->searchByEmail($this->query); }
}Template : un <input data-model="query"> + boucle sur this.results.
8. #[Broadcast] ⭐⭐⭐⭐⭐
🕹️ Mission : diffuser en temps réel les changements d’une entité à tous les clients, sans JS. Comment, et quel composant ?
✅ Solution
#[Broadcast] sur l’entité → diffuse un Turbo Stream via Mercure à chaque création/màj/suppression. Tous les navigateurs se mettent à jour en direct.
9. UX ou SPA ? ⭐⭐⭐
🕹️ Mission : pour (a) un tableau de bord admin, (b) une page publique de réservation soignée — UX ou Next.js ?
✅ Solution
(a) Symfony UX (interne, CRUD, rapide) ; (b) Next.js (public, SEO, UX riche, sur l’API).
10. Graphique sans JS ⭐⭐
🕹️ Mission : ajouter un graphique à un dashboard admin sans écrire de JS.
✅ Solution
composer require symfony/ux-chartjs : configurer le graphique en PHP, le contrôleur Stimulus fourni l’affiche.
Terrain suivant : Formulaires & validation.