Qu'est-ce que c'est ?
Inertia permet la conception d'application web moderne en SPA utilisant React, Vue ou Svelte en conservant la complexité métier au backend, le routing, la validation de formulaire...
I.Pourquoi ce choix
Une équipe majoritairement back
Chez Web^ID l'équipe est majoritairement constituée de développeurs backend, c'est pourquoi nous voulons garder le maximum de la complexité métier côté Laravel. Inertia nous permet de gérer l'intégralité du routing dans Laravel mais aussi la validation des formulaires.
// Hook de fomulaire qui contient les données, les erreurs de validation back ainsi que la methode pour soumettre le formulaire
const { data, post, errors } = useForm()
function submit() {
post('/login')
}
Ce choix nous permet de nous concentrer très rapidement sur le code métier en ignorant les complexités de mise en place de projets API / front séparé. Nous préférons nous concentrer sur ce qui apporte une vraie plus-value au client : code de qualité, performance, sécurité ne sont que des exemples.
La rapidité de développement
Plusieurs points rendent le choix de Inertia très pertinent pour nos projets monolithes.
- L'authentification des utilisateurs fonctionne exactement comme sur un projet Laravel / Blade, pas de développement supplémentaire à prévoir.
- La gestion des droits reste la responsabilité du back avec les Middlewares.
- Le code front et back est vraiment séparé, ce qui nous impose une rigueur supplémentaire dans la qualité de notre code.
// envoi en PHP
Inertia::share('appName', config('app.name'));
// recuperation en JavaScript
const { appName } = usePage().props
Optimisé pour les tests
Intertia vient avec une méthode assertInertia() qui permet de tester que sur un endpoint les données attendues sont bien présentes et en bon nombre. Le processus de test est par conséquent assez similaire pour les développeurs back que ce qu'ils pourraient être amenés à faire avec un rendu Blade plus classique.
Voici un exemple relativement simple ou l'on teste que sur une route my-route-name nous retrouvons bien une propriété inertia introduction.title et introduction.content, que nous récupérons un tableau de 20 products et que la propriété introduction.url vaut une variable que nous souhaitons tester.
$this->get(route('my-route-name'))
->assertInertia(fn (AssertableInertia $page) => $page
->has('introduction.title')
->has('introduction.content')
->has('products', 20)
->where('introduction.url', $urlToCheck))
Pour en savoir plus, la documentation fournit un exemple de test assez conséquent.
Le confort pour les fronts
Nous avons fait le choix d'avoir des développeurs spécialisés dans leurs domaines. Les fronts ne font pas de back et inversement.
Mais les uns comme les autres ne sont pas prêt à faire de compromis sur la qualité de leur travail et la beauté de leur code.
Le frontend d'une application Inertia est une application React classique, les données envoyées aux vues sont réceptionnées en propriété dans les composants réactifs.
II.Pour aller plus loin
Pour l'instant, nous avons surtout utilisé Inertia pour des projets de back-office ou d'applications métier complexes. Nous n'avons pas eu la nécessité de se poser des questions SEO / SSR. Mais Inertia propose out of the box une solution SSR pour React et Vue.
Nous avons également créé une extension Chrome qui rend la visualisation des props Inertia.js rapide dans le Chrome devtools.
.gif)