Livewire Alternative

flywall
Javascript
PHP Laravel

Bonjour à tous,

J'utilise, sur un projet professionnel, la librairie Livewire avec Laravel.

Livewire est utilisé dans certains cas d'usage :
L'upload de fichier, la soumission de formulaire, le lancement de tâche longue pour lesquels j'attends un retour du serveur lorsque la tâche est terminée.

La probélamtique

Je trouve que Livewire n'est pas du tout performant et je me pose la question d'un changement de méthodologie quant aux différentes "composants" créés avec Livewire.

Premier example :

  • Ma page d'upload affiche :

    1. Premier composant Livewire : Le champ d'upload du fichier avec un bouton de soumission (Un fichier uploadé nécéssite un certains nombre d'actions backend pour être traité, ce qui prend un certains temps, effectué par un Job...).
    2. Second composant Livewire : La liste des fichiers téléchargés (Cette liste est mise à jour lorsque le fichier a été traité en backend).

    Second exemple :

    • Une page, avec un formulaire comprenant plusieurs actions (Génération de fichier, envoie de mail) affiche :
      1. Les permières partie sont statiques (affichage d'informations)
      2. Affiche une liste d'élément pour lesquels le backend va générer des fichiers (Lirewire, pour éviter de recharger la page, la génération prend un certain temps effectué par un Job)
      3. Affiche la liste des fichiers générés (Livewire, cette liste est mise à jour lorsque les fichiers sont générés)

Quels proposititons auriez-vous pour remplacer Livewire ?
Soit dit en passant, sans considéré Livewire mais des formulaire, est-il préférable de :

  • Créer un formulaire par action,

  • Créer un formulaire multi-actions ?

    Merci par avance à tous.
    Flywall.

6 réponses

popotte
Réponse acceptée

Hello :)

Alors oui Livewire est asser limité, il a été fait par un dev un peu trop entousiaste :p

Pour les alternatives, alors je dirais d'utiliser Turbo ppour l'effet onepage: https://turbo.hotwired.dev

Tu peux aussi utiliser StimulusJS pour ton js: https://stimulus.hotwired.dev

Livewire est justement inspiré de Ruby on Rails qui fonctionne avec Turbo

Alors je n'ai jamais testé cette librairie, mais ça copie l'implémentation Rails/Turbo pour Laravel, tu peux tester ça: https://turbo-laravel.com

SInon pour le formulaire: Comme tu veux, le mieux c'est d'avoir un formulaire par action mais tu peux très bien faire un formuulaire qui fait à la fois le store et l'edit, mais ton formulaire aura toujours une seule action, utilises l'action post, et ensuite tu gères le délire coté controller

popotte
Réponse acceptée

Pour Vuejs, tu peux le faire dans Laravel, pas besoin d'API :)

htmx jammais testé, AlpineJS j'ai uniquement testé pour de l'intéraction légère pour compléter Livewire, à voir, perso je trouve StimulusJS plus complet

Turbo tu peux déjà juste l'installer et l'initialiser ça te fera un effet OnePageApp :p

flywall
Auteur

Salut Popotte,

Merci pour ce retour, effectivement j'ai aperçu Tubo for Laravel, je n'ai pas encore pris le temps de tester.

Je me reserve aussi d'autres options :

  1. Utiliser un framework front comme VueJs, ça sous entends de développer une api derrière,
  2. Utiliser htmx ou AlpineJs, qui pour le coup, serait largement suffisant (avec du SSE pour les évènements provenant du back).

Je reste quand même pas très fan des framework front, alors je suis à l'écoute de vos avis et expérience.

Quoiqu'il en soit, je vais quand même étudier Turbo for Laravel.

Belle journée à tous.

flywall
Auteur

Salut popotte,

Merci pour les suggestions, j'ai finalement totalement opté pour Turbo for Laravel (https://turbo-laravel.com/) associé à des custom elements provenants des Web components (https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements).

Ce qui me donne :

  • L'avantage de Turbo pour la navigation.
  • La possibilité d'inclure quelques interactions dynamiques avec les custom elements.
  • La mise à jour, par reponse Turbo Steam associé à Laravel Echo depuis des Jobs Laravel.

Le défaut :

  • Pour ma part, reste le faut que la séparation front/back n'est pas la meilleure (notamment sur le fait de renvoyer des Turbo Stream depuis le back, mais c'est pas très grave).
popotte

Avec plaisir ;)

Alors tu n'auras jamais unue séparation totale entre le front et le back, quand tu utilises le back dans n'importe quel langage, tu dois toujours l'attacher à un front

Pour Turbo en gros il fait un virtualdom et passes tes requetes en API vers le controller, quand tu utilises une lib pour faire de l'API front vers le back, il y a toujours un modèle de reponse imposée par la librairie, dans presque tous les cas c'est du json, pour turbo c'est du stream :p

webplusm

Bonjour,
Qu'entends tu par "Je trouve que Livewire n'est pas du tout performant" ?

Ayant créer une séries de composants avec Livewire + AlpineJs , je ne comprend pas ...