Laravel Jetstream et InertiaJS : un retour d'expérience

Je viens de terminer un projet créé avec Laravel Jetstream et InertiaJS. J'en profite pour faire un article sur les technologies, leurs avantages et inconvénients!

C'est quoi Laravel Jetstream ?

C'est un starter kit officiel pour Laravel. Il intègre la connexion, l'inscription, la récupération de mot de passe, la validation d'emails...

Laravel Jetstream s'occupe également de l'authentification 2FA, la révocation de sessions, la création de clefs d'API et optionnellement la gestion d'équipes.

Tout cela, Laravel Jetstream l'enrobe dans une interface magnifique réalisée avec Tailwind CSS et plein de composants prêts à l'emploi. 2 possibilités : une implémentation avec Livewire et une avec InertiaJS.

Présentation d'InertiaJS

InertiaJS permet de créer des SPA en réduisant la complexité qui les accompagnent et en utilisant le plus possible les capacités des frameworks back-end. Ça marche avec Vue, React ou Svelte pour le front-end et Laravel ou Rails pour le back-end.

L'idée est simple : pas de routeur côté client et pas d'API pour communiquer. On crée des contrôleurs et on passe des données à nos vues, comme avec Blade. Sauf que là, c'est VueJS qui récupère directement les données comme des props, sans rien avoir de plus à coder.

Quand vous cliquez sur un lien ou envoyez un formulaire, Inertia récupère les données à passer au nouveau composant VueJS et fait le changement dans la page. L'expérience utilisateur est la même qu'avec une SPA traditionnelle et celle du développeur est grandement facilité.

Avantages et inconvénients

Les avantages de Laravel Jetstream sont :

fini de développer les routes et les vues communes à tous les projets avec des utilisateurs
un stack technique à jour et clef en main

des composants déjà développés et notamment un système d'affichage de modals

Les inconvénients de Laravel Jetstream sont :

comme tous les packages, il faut suivre les mises à jours de Jetstream. Ce point est facilité par la présence d'un fichier UPGRADE.md dans le repo
Jetstream ne supporte pas Vue 2

Les avantages d'InertiaJS sont :

gain de temps et réduction des boilerplates
utilisation d'un framework front-end existant donc réutilisation de connaissances
conservation d'une grande partie du code si vous migrez vers une application mobile avec Cordova ou Capacitor

Les inconvénients d'inertiaJS sont :

l'autocompletion des routes n'existe pas encore comme elles passent côté client avec Ziggy
les routes d'autres packages comme Laravel Cashier ne sont pas prévues pour InertiaJS. Il faut revoir les intégrations pour utiliser Inertia.location()

Il y a également des difficultés qui se posent quand on combine les deux. Par exemple, il n'y a pas de façon de faire officielle pour gérer les traductions d'une application Laravel faite avec InertiaJS. De même, il vous faudra adapter vos pages d'erreurs pour InertiaJS.