Hola, ¿Qué tal te ha ido? ¡Te doy la bienvenida de vuelta! 🙋‍♂️. En este nuevo post de la serie vamos crear las vistas principales del módulo de usuarios con Livewire Volt. Pero primero modificaremos el comportamiento de nuestra aplicación para que si no estamos autenticados siempre nos redirija a la ruta login a no ser que sea una ruta de invitado como la de cambio de contraseña.

¿Qué es Livewire Volt?

Existen muchas maneras o sistemas para afrontar la creación de una aplicación, enumeremos algunas:

• Server Side Applications: Todo el armado del documento html que se entrega y el enrutamiento ocurre en el servidor por lo tanto nuestro navegador necesariamente se recarga en cada una de las peticiones al servidor. Esta forma es la más antigua o legacy.
• Client Side Applications o Single Page Applications: La carga en el navegador se hace una sola vez, luego la aplicación en el cliente se encarga del enrutamiento y las peticiones al servidor pero esta vez en segundo plano sin necesidad de recargar la página. Esta forma surge por la necesidad de darle al usuario una mejor experiencia al no recargar todo el tiempo la página.
• Server Side Rendering Applications: Con este tipo de aplicaciones obtienes lo mejor de los dos mundos. Algunos procesos de renderizado o compilado ocurren en el servidor y el resto en el cliente con un proceso llamado hidratación. En cierta manera esto ya se hacia en frameworks o CMSs en el pasado pero se popularizó o al menos yo supe de ello con NextJS. Esta forma surge por la necesidad de que nuestras aplicaciones puedan entregar a interés un esquema mínimo que los robots de los buscadores puedan leer cosa que con las SPAs antiguamente no ocurría.

Bueno una vez aclarado esto podríamos decir que Livewire Volt es un framework total que de la mano con Laravel nos ayuda a crear aplicaciones modernas capaces de entregar una buena experiencia de uso al usuario pero sin descuidar otras necesidades como el SEO u otras problemáticas que eran dolores de cabeza en el pasado.

¿Qué es un layout?

Un layout es un estándar en desarrollo web que se describe como una vista que va servir de plantilla y va tener las mismas características en todas las páginas que se creen a partir de ella, con la única diferencia en el contenido principal de la misma. Por ejemplo en nuestra aplicación disponemos por defecto de dos layouts app y guest, que puedes encontrar en la ruta resources/views/layouts de la aplicación, donde si nos fijamos en app.blade.php todas nuestras páginas como dashboard o users tendrán en común la barra de navegación y por medio de los denominados slots podemos incluirle nuestro contenido principal o headers de cada página. También podemos cargar archivos javascript o estilos propios para cada tipo de páginas.

Rutas y Vistas

---

Con este pedazo de código podrás redirigir a los usuarios donde creas conveniente si la ruta no está declarada.

Route::any('{any}', function () {
    if(request()->user()) {
        return back();
    }

    return redirect('login');
})->where('any', '.*');

Aquí te dejo algunos comandos que utilizamos durante el tutorial.

php artisan vendor:publish --tag="log-viewer-config"

php artisan make:middleware LogViewerMiddleware

php artisan route:list

php artisan make:volt users/list --test

php artisan livewire:publish --pagination

También te dejo el enlace al repositorio.

¡Un saludo y nos vemos pronto en el próximo post! 🙋‍♂️