Les kits de démarrage de Laravel 12 expliqués : React, Vue et Livewire

Lorsque vous démarrez un nouveau projet Laravel, vous n'avez pas besoin de tout construire à partir de zéro. Laravel fournit des des kits de démarrage. Ils prennent en charge les éléments de base, tels que les routes, les contrôleurs, l'authentification et le code d'échafaudage frontal.

Avec Laravel 12Ces kits de démarrage ont été modernisés pour prendre en charge deux des choix frontaux d'applications JavaScript à page unique les plus populaires d'aujourd'hui : React et Vuetout en offrant la possibilité d'utiliser l'approche la plus simple avec les modèles modèles Bladeainsi que Livewire . Chacun de ces kits de démarrage adopte une approche légèrement différente de la construction de votre application :

• React si vous préférez construire avec une approche plus basée sur les composants

• Vue si vous préférez quelque chose de plus proche du JavaScript traditionnel (pas de JSX, par exemple)

• Livewire si vous préférez garder les choses principalement en PHP et Blade sans JavaScript lourd

Dans cet article, nous allons voir ce que chaque kit offre, en quoi ils diffèrent, et lequel est le plus approprié pour votre prochain projet Laravel 12.

Kit de démarrage React

Si vous créez une application web hautement interactive, comme Trello, Slackou GitHub, et que vous aimez travailler avec des composants d'interface utilisateur réutilisables, le kit de démarrage React est tout indiqué. Dans React, ces éléments sont appelés composantsLes composants sont des blocs de construction autonomes qui peuvent gérer leur propre état, recevoir des données des composants parents et être réutilisés dans votre application.

Le kit de démarrage utilise Inertia.js pour connecter React aux routes et contrôleurs Laravel. En termes simples, vous bénéficiez des avantages d'une collaboration entre le backend et le frontend. Laravel gère toute la logique du backend, y compris le routage, l'authentification et les opérations de base de données. Pendant ce temps, React gère le frontend interactif, permettant à vos pages de se mettre à jour automatiquement sans avoir à recharger la page entière. Vous n'avez pas besoin de créer une API personnalisée, ce qui simplifie et accélère les choses. De plus, le kit est livré avec TypeScript pour la sécurité des types, TailwindCSS pour une mise en forme rapide, et shadcn/ui pour les composants d'interface utilisateur préconstruits. Vous disposez ainsi d'une base solide et flexible pour construire des interfaces utilisateur réactives.

Modèles et variantes

Une fois que vous avez installé le kit de démarrage React, la plupart de votre code frontal se trouve dans le répertoire resources/js. Par défaut, votre application utilise une barre latérale, mais vous pouvez facilement passer à une disposition d'en-tête en modifiant l'importation en haut du fichier resources/js/layouts/app-layout.tsx.

La disposition de la barre latérale elle-même a trois variantes : par défaut, "insérée" et "flottante". Vous pouvez choisir celle qui convient le mieux à votre application en mettant à jour la propriété variant prop dans resources/js/components/app-sidebar.tsx.

<Sidebar collapsible="icon" variant="sidebar">

<Sidebar collapsible="icon" variant="inset">

Les variantes de mise en page d'authentification, telles que la connexion, l'enregistrement et la réinitialisation du mot de passe, sont assorties de trois options de mise en page : simple, carte et fractionnée.

Vous pouvez facilement passer de l'un à l'autre en mettant à jour l'importation en haut de la page resources/js/layouts/auth-layout.tsx.

import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';

import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout';

Kit de démarrage Vue

Si vous voulez un frontend flexible et facile à utiliser, le kit de démarrage de kit de démarrage Vue est un choix solide. Encore une fois, il utilise Inertia.js pour connecter Vue aux routes et contrôleurs Laravel, afin que vous puissiez construire des pages interactives qui ressemblent à une application à page unique sans avoir besoin d'une API personnalisée. Cela signifie que vous bénéficiez des fonctionnalités réactives du front-end de Vue tandis que Laravel gère toute la logique du back-end.

Le kit est livré avec l'API Vue 3 Composition API, TypeScript pour un code plus sûr, TailwindCSS pour une mise en forme rapide, et l'API shadcn/ui pour les composants réutilisables de l'interface utilisateur. Ensemble, ils vous offrent une configuration propre qui rend la construction d'interfaces réactives simple et flexible.

Modèles et variantes

La majeure partie du code frontal de Vue se trouve dans resources/jsorganisé de manière à faciliter la recherche et la personnalisation des composants, des pages, des dispositions et des crochets. Par défaut, l'application utilise une barre latérale, mais vous pouvez passer à une disposition d'en-tête en changeant l'importation en haut de resources/js/layouts/AppLayout.vue:

import AppLayout from '@/layouts/app/AppSidebarLayout.vue'

import AppLayout from '@/layouts/app/AppHeaderLayout.vue'

La disposition de la barre latérale se décline en trois variantes : par défaut, insérée et flottante. Vous pouvez choisir celle qui vous convient le mieux en mettant à jour la propriété variant prop dans resources/js/components/AppSidebar.vue:

<

<Sidebar collapsible="icon" variant="sidebar">

<Sidebar collapsible="icon" variant="inset">

Les pages d'authentification - comme la connexion, l'enregistrement et la réinitialisation du mot de passe - disposent également de trois options de mise en page : simple, carte et fractionnée. Pour passer de l'une à l'autre, il suffit de mettre à jour l'importation en haut de la page resources/js/layouts/AuthLayout.vue:

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue'

Comme React, les composants sont réutilisables, de sorte qu'il n'est pas nécessaire de réécrire les pages pour modifier la mise en page ou les éléments de l'interface utilisateur.

Kit de démarrage Livewire

Si vous préférez un Modèle-Vue-Contrôleur en utilisant le moteur de templates Blade de Laravel, le kit de démarrage kit de démarrage Livewire est un bon choix. Livewire contient un peu de magie dans vos templates, en ce sens qu'il rendra votre JavaScript selon les règles de l'art de Laravel. Composants Laravel Livewire (essentiellement un contrôleur avec un état et un ensemble intégré de méthodes API pour indiquer au DOM quand il doit être mis à jour). Cela permet de simplifier votre code tout en permettant à vos pages de répondre à l'entrée de l'utilisateur en temps réel. Le kit comprend également TailwindCSS pour le style et l'interface Flux UI pour les éléments d'interface réutilisables.

La majeure partie du code de l'interface utilisateur se trouve dans resources/viewstandis que la logique du backend pour les composants de Livewire se trouve dans app/Livewire. Vous trouverez des composants Blade réutilisables, des composants Flux, des composants Livewire spécifiques à une page et des composants partiels, tous organisés de manière à ce que vous puissiez facilement les modifier ou les étendre.

Modèles et variantes

Le kit de démarrage Livewire est livré avec deux présentations principales : la barre latérale (par défaut) et l'en-tête. Vous pouvez passer de l'une à l'autre en mettant à jour le composant Blade utilisé dans resources/views/components/layouts/app.blade.php:

<x-layouts.app.header>

    <flux:main container>

        {{ $slot }}

    </flux:main>

</x-layouts.app.header>

Les pages d'authentification (connexion, enregistrement et réinitialisation du mot de passe) comprennent également trois options de mise en page : simple, carte et fractionnée. Pour passer de l'une à l'autre, il suffit de modifier le composant Blade dans le fichier resources/views/components/layouts/auth.blade.php:

<x-layouts.auth.split>

    {{ $slot }}

</x-layouts.auth.split>

Comme React et Vue, les composants réutilisables et les mises en page modulaires de Livewire facilitent l'expérimentation de différents looks sans avoir à réécrire vos pages à partir de zéro.

Conclusion

Les kits de démarrage Laravel 12 vous donnent une base solide, quel que soit le front-end que vous choisissez. React est idéal pour les applications complètes à page unique, Vue est flexible et convivial pour les débutants, et Livewire reste principalement en PHP et Blade tout en prenant en charge les interfaces dynamiques et réactives. Les trois kits comprennent des composants réutilisables, des mises en page modulaires et des styles intégrés, ce qui permet d'expérimenter facilement des designs sans avoir à réécrire les pages. Pour ceux qui vraiment n'aiment vraiment pas écrire du code frontal et qui ont opté pour Livewire, vous pouvez également ajouter Laravel Echo et Reverb pour démarrer vos propres serveurs Websocket !

Si vous débutez avec Laravel, il existe de nombreuses ressources adaptées aux débutants. Écoutez les membres de la communauté Laravel qui partagent leurs recommandations préférées.