Caleb Porzio, le créateur de Livewire, a une promesse claire : "Construire des applications web modernes est difficile. Des outils comme Vue et React sont extrêmement puissants, mais la complexité qu'ils ajoutent au workflow d'un développeur full-stack est dingue. Oui, c'est vrai... Être à la pointe dans un framework JS est un défi et même si on en maîtrise un plus que les autres, on en apprend toujours... puis il y a toujours les nouvelles versions qui rebattent les cartes ! Ou lala ! React 19 va me faire quitter Vue 3 !???
Bon... dans cet écosystème bien implanté avec les cadors comme Vue, React et Angular, a pointé le bout de son nez Livewire. Un peu comme OpenAI qui a tapé à la porte de la bourse et qui s'est incrusté au buffet avec Apple, Nvidia, Google et compagnie.
Avantages pour un CTO
Pour un CTO, Livewire représente une opportunité unique de permettre à une équipe réduite de se lancer dans des projets très complexes. Grâce à sa simplicité et à sa puissance, Livewire permet de réduire considérablement le temps de développement et d'améliorer l'efficacité de l'équipe. Les développeurs, en particulier le lead dev, peuvent se concentrer sur la logique métier et les fonctionnalités clés sans se soucier des complexités front-end. Cela permet non seulement de réduire les coûts de développement, mais aussi d'accélérer la mise sur le marché des produits.
On avait pour mission de créer un espace privé pour des participants à un salon. Ils pouvaient modifier leurs données, s'inscrire à des conférences, manipuler un agenda et surtout consulter les autres participants avec un rapprochement et une mise en relation. Bien entendu, un chat était prévu.
Le recrutement de l'équipe n'était pas finalisé et il était tentant de partir sur Next ou Nuxt, mais avec une mise en production en moins d'un mois, j'ai donc opté pour Livewire. L'avantage a été pour l'équipe, qui avait de très bonnes compétences en PHP et un peu en React, de pouvoir rapidement construire l'interface réactive. L'équipe Front a beaucoup moins souffert du délai raccourci et l'avantage d'une web app avec une durée de vie réduite, c'était comme faire du low code.
Mais c'est quoi Livewire ?
Livewire est une bibliothèque Laravel comparable à Symfony UX Turbo qui permet de construire des interfaces utilisateur dynamiques sans avoir à écrire de JavaScript personnalisé. Caleb Porzio est également le créateur d'Alpine.js, ce qui rend l'intégration entre Livewire et Alpine extrêmement intuitive, surtout pour l'utilisation de composants. De plus en plus de sites présentant des composants ou des bouts de code JavaScript utilisent Alpine.js en front-end, témoignant de son adoption croissante.
Livewire est un concept qui permet aux développeurs back-end de créer des interactions front-end très complexes et une réactivité extrêmement complexe sans écrire une seule ligne de code JavaScript la plupart du temps ! C'est la magie de Livewire, et c'est énorme !
Mes mise en Pratique avec Livewire 3
Livewire 3 est sorti depuis plus d'un an, et il est temps de partager des expériences concrètes sur ce que cette bibliothèque apporte dans des contextes réels.
Navigation Fluide avec wire:navigate
La directive wire:navigate permet à mon back-office admin de charger des fiches d'utilisateurs sans rechargement, même si le code HTML utilise un simple <a href=""> vers une route. Cela rend la navigation entre les différentes sections de l'application incroyablement fluide et rapide. Bluffant !
Validation des Formulaires Simplifiée
La validation des formulaires est grandement simplifiée avec l'attribut #[Rule], qui m'évite d'avoir des validations éparpillées partout dans le code. Cela rend le code plus propre et plus facile à maintenir.
Drag and Drop et Tri des Éléments
Les solutions de drag and drop, sortable, etc., sont très simples à mettre en place avec Livewire. J'utilise cette technologie à outrance pour trier des tableaux, des listes, et des collections de tags dans l'admin des utilisateurs. Cela rend l'interface utilisateur plus intuitive. Lorsque un CSM me dit "on pourrait pas rajouter un truc pour ordonner ici ?" en général, le temps qu'il le dise c'est fait.
Combinaison avec Alpine.js
La combinaison avec Alpine.js permet, selon le cas, d'utiliser Alpine pour les manipulations front-end ou Livewire pour les interactions back-end ou les manipulations de la base de données.
Pagination Éclair
La pagination avec Livewire est un pur plaisir. Sur un ERP immobilier, des tables de dizaines de milliers de demandeurs se chargent en une microseconde. Cela rend l'application extrêmement réactive et performante. Même si j'ai plusieurs tableaux sur la même page.
Communication entre Composants avec #React
Avec #React, ce sont les composants Livewire qui communiquent entre eux ! J'ai pu créer des chats multi-utilisateurs dans des modules de mise en relation en une demi-journée pour des salons. (et POP un petit +1 dans la notife en live de ton header car tu as un message non lu)
Petite astuce !
si vous avez un soucis avec l'utilisation de livewire, vérifier votre config nginx. Il ne faut pas que livewire soit "caché" dans votre .conf
# CSS and Javascript
location ~* \.(?:css|js)$ {
location ~* /livewire/livewire.js {
expires off;
try_files $uri $uri/ /index.php?$query_string;
}
location ~* /livewire/livewire.min.js {
expires off;
try_files $uri $uri/ /index.php?$query_string;
}
expires max;
access_log off;
add_header Cache-Control "public";
}