Laravel: Actualizaciones y glosario (parte 22)
Debido a las actualizaciones recientes (a fecha de esta entrada) necesitamos actualizar nuestra base de conocimientos. Es muy útil tener un glosario a modo de resumen de ciertas definiciones. Además, los pasos para crear un proyecto desde cero han variado ligeramente.
Crear un proyecto
Cuando creamos un proyecto nuevo de Laravel 9 con los comandos habituales, elegiremos en más de una ocasión usar Jetstream. En el momento de ejecutar el comando de instalación de Laravel con Jetstream, la consola de comandos nos preguntará si queremos usar Liveware o Inertia. Al elegir Liveware, se creará el proyecto con esas opciones. Se ejecutará el comando «npm install» (instalando todas las dependencias de npm dentro del proyecto) seguido de «npm run dev», que creará un nuevo servidor de Vite.
Cuando necesitemos subir el proyecto tendremos que hacer uso del comando «npm run build» para que se cree el manifiesto donde estará compilado todo nuestro js y css. El servidor de Vite ya no será necesario, pero el proyecto esperará tener los manifiestos.
Glosario
Jetstream
Jetstream es un kit de inicio de aplicaciones diseñado para Laravel y proporciona la implementación para el inicio de sesión, el registro, la verificación de correo electrónico, la autenticación de dos factores, la gestión de sesiones, la API a través de Laravel Sanctum y las funciones opcionales de gestión de equipos de su aplicación.
A la hora de trabajar con Jetstream hayq ue escoger entre dos interfaces: Livewire e Inertia.js. La elección depende del lenguaje de los templates.
Liveware
Laravel Livewire es una librería que simplifica las interfaces de Blade y las hace más modernas, reactivas y dinámicas.
Al usar Livewire, se puede elegir qué partes de la aplicación serán un componente de Livewire, mientras que el resto de la aplicación se puede representar como las plantillas Blade tradicionales.
Vite
Vite es un compilador que se mantendrá a la escucha de cualquier cambio en nuestro código de javascript y css, y creará los assets que incluiremos finalmente en nuestra página.
Para poder trabajar en el entorno local y cargar los estilos de nuestra aplicación, necesitamos tener el servidor encendido. Para ello ejecurtaríamos el comando «npm run dev» y ya veríamos los estilos.
Laravel ahora usa Vite: https://www.youtube.com/watch?v=4gxxWTe3pVA&list=PLZ2ovOgdI-kWWS9aq8mfUDkJRfYib-SvF&index=32
Bootstrap
Cómo usar Bootstrap en Laravel 9 usando Vite: https://www.youtube.com/watch?reload=9&v=D_-i6ZiWHuQ
Bootstrap es un framework front-end utilizado para desarrollar aplicaciones web y sitios mobile first, o sea, con un layout que se adapta a la pantalla del dispositivo utilizado por el usuario. El propósito del framework es ofrecerle al usuario una experiencia más agradable cuando navega en un sitio.
Por esta razón, tiene varios recursos para configurar los estilos de los elementos de la página de una manera simple y eficiente, además de facilitar la construcción de páginas que, al mismo tiempo, están adaptadas para la web y para dispositivos móviles.
¿Cómo funciona Bootstrap?
Bootstrap está constituido por una serie de archivos CSS y JavaScript responsables de asignar características específicas a los elementos de la página.
¿Cómo configurar y usar Bootstrap?
Hay diferentes formas de configurarlo o estructurarlo para usarlo en una aplicación web. Sin embargo, para que funcione correctamente, es necesario agregar las bibliotecas JQuery y Popper.js, necesarias para la ejecución de algunos componentes de Bootstrap.
Para comenzar a usar Bootstrap en una página, es necesario agregar las referencias de los principales archivos del framework en la página principal de la aplicación.
Tailwind
Tailwind es un framework CSS. Es Brinda un conjunto único de clases de utilidad que hace que el proceso de desarrollo sea muy fácil y da como resultado un diseño único. El código y el diseño web se puede personalizar libremente.
Instalar el framework Tailwind no es tan simple como instalar un framework bootstrap, requiere un poco de configuración con laravel Mix.
Npm
https://docs.npmjs.com/cli/v6/commands/npm
npm es el administrador de paquetes para la plataforma Node JavaScript. Coloca los módulos en su lugar para que el nodo pueda encontrarlos y gestiona los conflictos de dependencia de manera inteligente.
Usualmente npm se necesita porque el proyecto requiere instalaciones.
Laravel Mix (antes de Vite)
https://laravel.com/docs/8.x/mix
Laravel Mix proporciona una API fluida para definir los pasos de compilación de Webpack utilizando varios procesadores de CSS y JavaScript comunes.
El objetivo es, entre otras cosas, procesar todo nuestro código css, minificarlo y combinarlo en un solo archivo. Lo mismo para el código javascript, minificar, ofuscar y combinar todo el código en un solo archivo. Con laravel mix nuestras páginas web son mas seguras y rápidas.
Laravel mix está optimizado para usar con Laravel, pero se puede utilizar en cualquier aplicación web, aunque no se use Laravel.