JavaScript et dégradation gracieuse
Rôle de JavaScript dans Giggr : réactivité Livewire, état Alpine, messagerie temps réel (Echo et Reverb), animations GSAP, et comportement sans JavaScript.
Les briques JavaScript de Giggr
L'interface de Giggr est rendue côté serveur (Blade), puis enrichie par JavaScript. Quatre briques se partagent ce rôle. Le tableau indique, pour chacune, sa fonction dans l'application et ce qui reste accessible sans JavaScript.
| Brique | Rôle dans Giggr | Sans JavaScript |
|---|---|---|
| Livewire 4 | Composants dynamiques rendus côté serveur : filtres d'exploration, formulaires, navigation wire:navigate, états de chargement. |
Le contenu Blade reste consultable et les liens fonctionnent en navigation classique. Les mises à jour dynamiques (filtres, formulaires) nécessitent JavaScript. |
| Alpine.js | État d'interface côté client (embarqué par Livewire) : panneaux ouverts ou fermés, modes édition, carrousel d'accueil. | Les éléments restent affichés dans leur état initial ; les bascules purement visuelles ne répondent plus. |
| Laravel Echo + Reverb | Messagerie en temps réel : diffusion de l'événement MessageSent sur un canal privé de conversation, réception par WebSocket. |
Nécessite JavaScript et une connexion WebSocket ; sans cela, les nouveaux messages n'arrivent pas en direct. |
| GSAP | Animations au scroll : empilement épinglé des blocs (feature-stack), carrousel. |
Le contenu reste lisible sans l'animation ; l'effet est aussi désactivé si prefers-reduced-motion est demandé. |
Réactivité côté serveur (Livewire)
à compléterGiggr s'appuie sur Livewire 4 pour rendre l'interface réactive sans écrire d'API cliente. Quatre usages principaux :
- wire:navigate : navigation de type application (sans rechargement complet) sur les liens du site. Sans JavaScript, ces liens redeviennent une navigation classique.
-
wire:model.live : filtres
en direct, notamment le tiroir de filtres de la page Explorer
(
explore/filter-drawer) et le sélecteur de localité. - wire:submit : formulaires (paramètres, profil, annonce, composition d'un message) traités côté serveur sans rechargement.
- wire:loading : retours visuels pendant les requêtes (désactivation de bouton, indicateur de chargement).
Temps réel : la messagerie
à compléter
La messagerie fonctionne en temps réel. À l'envoi, l'action serveur
SendMessage diffuse un événement
MessageSent sur un canal privé de
conversation (ConversationChannel).
Côté client, Laravel Echo, connecté au serveur Reverb par WebSocket,
reçoit l'événement et met à jour le fil de discussion
(thread-messages) sans rechargement.
Dégradation gracieuse et mouvement
à vérifierLe contenu de Giggr est rendu côté serveur en Blade : pages, profils et annonces restent donc consultables sans JavaScript, et la navigation par liens fonctionne. JavaScript ajoute la réactivité par-dessus. Ce qui en dépend reste à confirmer écran par écran : filtres en direct, soumission des formulaires Livewire, messagerie temps réel, retours de chargement.
Côté mouvement, l'animation d'empilement (GSAP) lit la préférence système avant de s'activer : si l'utilisateur demande un mouvement réduit, ou si la fenêtre est trop courte, elle ne se déclenche pas et le contenu s'affiche normalement.
function canStack() {
return !window.matchMedia('(prefers-reduced-motion: reduce)').matches
&& window.innerHeight >= config.minViewportHeight;
}