Curso y Libro primeros pasos con Laravel 12 Livewire 3 + Alpine.js y Tailwind.css - Desde Cero
Índice de contenido
- ¿Qué es Laravel Livewire y por qué deberías aprenderlo desde cero?
- Livewire no es un framework: es una capa flexible y poderosa
- ¿Qué nos ofrece Livewire?
- Prólogo
- Para quien es esta formación
- Temario del Curso y Libro
- Módulos
- ¿Qué vas a aprender y para quién es este curso?
- Introducción
- Primeros pasos con Livewire
- Conociendo los componentes
- Componentes y estilos
- Componentes comunicar: Formulario paso por paso
- Práctica: Crear CRUD para los Post
- Filtros y campos de búsqueda
- Ordenación
- JavaScript en Livewire
- Propiedades en Livewire
- Blog: Listado y detalle de post
- Carrito de compras
- Alpine JS: Introducción
- Aplicación de To Do con Livewire y Alpine
- Pruebas
- Legacy: Componentes y estilos
- Primeros pasos con Livewire - Laravel 9/10
- Conociendo los componentes - Laravel 9/10
- Componentes y estilos - Laravel 9/10
- Componentes comunicar: Formulario paso por paso - Laravel 9/10
- Práctica: Crear CRUD para los Post - Laravel 9/10
- Filtros y campos de búsqueda - Laravel 9/10
- Ordenación - Laravel 9/10
- JavaScript en Livewire - Laravel 9/10
- Propiedades en Livewire - Laravel 9/10
- Blog: Listado y detalle de post - Laravel 9/10
- Carrito de compras: Estructura inicial - Laravel 9/10
- Carrito de compras: Replicar en la base de datos - Laravel 9/10
- Carrito de compras: Eventos y mensajes - Laravel 9/10
- Carrito de compras: Total de items - Laravel 9/10
- Extra: Alpine JS, Introducción - Laravel 9/10
- Alpine y plugins externos: Sortable - Laravel 9/10
- Aplicación de TODO con Livewire y Alpine - Laravel 9/10
- Migrar de Bootstrap a Tailwind - Laravel 9/10
- Alpine JS: Otras características - Laravel 9/10
- Proyectos en Alpine.js con Tailwind.css - Laravel 9/10
- Videos generales sobre el desarrollo en Laravel Livewire - Sección Free exclusiva
- Conclusiones
En este curso vas a aprender Laravel Livewire desde cero, hasta conocer sus detalles más importantes; recuerda que debes de saber programar en Laravel para ver este curso.
Laravel es un framework fascinante, inmenso y con una curva de aprendizaje algo elevada y con múltiples opciones; este libro no es para iniciales y da por hecho de que ya sabes programar en Laravel.
Laravel Livewire lleva el desarrollo de Laravel un poco más allá; automatizando procesos rutinarios en esquemas muy flexibles en base a componentes, los componentes de Livewire que nos permite comunicar cliente y servidor de una manera muy simple, eficiente y sencilla.
Laravel Livewire no es un framework, es solamente una capa o scaffolding que agrega ciertas características extras al framework que podemos utilizar para crear grandes aplicaciones, con menos esfuerzo y tiempo de desarrollo.
También tengo recursos gratuitos para el Curso en el Blog y el curso comunitario/GRATIS en la web de Academia.
Es importante mencionar, que el curso también tiene el formato en libro con el 100% del contenido del mismo, es decir, el curso es equivalente al libro.
¿Qué es Laravel Livewire y por qué deberías aprenderlo desde cero?
Livewire es un scaffolding para Laravel, el cual no es más que un esqueleto o capa que agregan ciertas funcionalidades extras en Laravel mediante el uso de componentes de Livewire; los mismos componentes de Laravel básico, pero con añadidos muy interesantes que son los que conforman a Livewire.
Además de esto, un proyecto en Livewire ya nos trae configurados Tailwind.css y Alpine.js
Con todo estos conocimientos podrás emplearlos para crear tus propias aplicaciones en Flutter.
Livewire no es un framework independiente (aunque muchos lo confunden).
Es un scaffolding, una capa encima de Laravel que añade superpoderes a tus componentes Blade. Y esto lo recalco porque es clave: sigues trabajando con Laravel puro, con sus componentes normales… solo que ahora tienen “añadidos” que hacen tu vida mucho más sencilla.
Lo que más enamora de Livewire es:
- Actualizar partes de la interfaz sin recargar la página.
- Comunicar cliente-servidor con acciones, funciones y eventos muy directos.
- Integrar paginación, carga de archivos y manejo de query strings sin sudar.
- Trabajar con Tailwind y Alpine.js ya configurados si así lo decides.
Lo mejor de Livewire es su USO de componentes y reutilizar componentes y evitar un exceso de JavaScript, entendí por qué tantos desarrolladores migran a Livewire para proyectos reales, esta misma app, el módulo de admin esta hecho en Livewire y es un 80% más rápido incorporar nuevas características mediante los atributos personalizados de Livewire si lo comparamos con otras tecnologías.
Livewire no es un framework: es una capa flexible y poderosa
Lo dije en mi artículo original y lo mantengo aquí:
“Livewire no es un framework, es solamente una capa o scaffolding que agrega ciertas características extras al framework que podemos utilizar para crear grandes aplicaciones, con menos esfuerzo y tiempo de desarrollo.”
Ese “menos esfuerzo y tiempo” se traduce exactamente en lo que aprenderás durante este curso: desarrollar más rápido, más claro y sin pelear con un stack adicional que no quieres ni necesitas.
¿Qué nos ofrece Livewire?
Crear aplicaciones web modernas es difícil, herramientas como Vue y React son extremadamente poderosas, pero la complejidad que agregan al flujo de trabajo de un desarrollador de pila completa es una locura.
Pensando en lo anterior, Laravel Livewire es un marco completo para Laravel que simplifica la creación de interfaces dinámicas, sin dejar la comodidad de Laravel; en pocas palabras nos permite usar esquemas similares a los de Vue y React directamente en Laravel.
Podemos trabajar con esquemas similares a los de Laravel y Vue, pero de una manera más directa y simple; el desarrollo de Laravel está fuertemente ligado al uso de componentes; los mismos componentes de Laravel pero con agregados importante de Laravel Livewire lo que permite escalar enormemente el uso de componentes:
- Vincular mediante el archivo de rutas.
- Comunicación sencilla basada en acciones, eventos y funciones entre el cliente y el servidor.
- Agrega funcionalidades como paginación, carga de archivos, query string entre otras.
En definitiva, con Livewire, podemos hacer lo mismo que hacemos con Laravel y sus controladores, pero de una manera más sencilla en la cual podemos usar los componentes y reutilizar piezas de código que nos ofrece Livewire para hacer una comunicación muy sencilla entre el servidor con el cliente.
Aparte de que, dependiendo como decidas instalar a Laravel Livewire, puedes habilitar opciones que ya vienen de gratis como:
- Sistema de autenticación con registro, recuperación de credenciales.
- Vista de perfil con carga de usuario.
- Manejo de roles mediante equipos.
- Manejo de la API Tokens mediante Laravel Breeze con una interfaz administrable.
En definitiva, Livewire no es un framework, lo puedes ver como un paquete más que agrega funcionalidades extras a algunos elementos de Laravel que en definitiva lo convierten en un scaffolding o esqueleto para nuestras aplicaciones.
Prólogo
Laravel es un framework fascinante, inmenso y con una curva de aprendizaje algo elevada y con múltiples opciones; este libro no es para iniciales y da por hecho de que ya sabes programar en Laravel.
Laravel Livewire lleva el desarrollo de Laravel un poco más allá; automatizando procesos rutinarios en esquemas muy flexibles en base a componentes, los componentes de Livewire que nos permite comunicar cliente y servidor de una manera muy simple, eficiente y sencilla.
Laravel Livewire no es un framework, es solamente una capa o scaffolding que agrega ciertas características extras al framework que podemos utilizar para crear grandes aplicaciones, con menos esfuerzo y tiempo de desarrollo.
Para quien es esta formación
Este curso está dirigido a cualquiera que quiera comenzar a desarrollar con Laravel Livewire en el desarrollo de aplicaciones basadas en componentes de Laravel con algunos agregados que permiten la comunicación directa entre el servidor y el cliente.
- Este curso no se recomienda a aquellas personas que no hayan trabajado con otros Laravel, si es tu caso, te aconsejo que primero conozcas y practiques con Laravel antes de comenzar; en mi sitio web encontrarás cursos, libros, publicaciones, vídeos y en general más información sobre Laravel.
- Para aquellas personas que quieran aprender algo nuevo, conocer sobre una herramienta con poca documentación y la mayoría de ella está en inglés.
- Para las personas que quieran mejorar una habilidad en el desarrollo web, que quieran crecer como desarrollador.
- Con que te identifiques al menos con alguno de los puntos señalados anteriormente, este libro es para ti.
Temario del Curso y Libro
Este libro tiene un total de 16 capítulos (aun en desarrollo), se recomienda que leas en el orden en el cual están dispuestos y a medida que vayamos explicando los componentes de Livewire, vayas directamente a la práctica, repliques, pruebes y modifiques los códigos que mostramos en este libro; el libro actualmente se encuentra en desarrollo.
- Capítulo 1: En este capítulo vamos a dar una breve introducción sobre Laravel Livewire.
- Capítulo 2: En este capítulo vamos a crear nuestro proyecto en Laravel Livewire.
- Capítulo 3: En este capítulo, presentamos las características con las cuales cuenta un proyecto creado en Laravel Livewire; manejo de equipos, API Tokens, y autenticación, son algunas de ellas.
- Capítulo 4: En este capítulo, vamos a crear una aplicación tipo CRUD sencilla y conocer todos los elementos propios de Livewire como, manejo de formularios, vistas y directivas mediante los componentes de Livewire.
- Capítulo 5: En este capítulo, vamos a trabajar en el estilo, mejorando la aplicación creada para que luzca como un módulo más de Laravel Livewire.
- Capítulo 6: En este capítulo, vamos a conocer la comunicación entre componentes de Livewire en base a eventos; detectar cambios en propiedades de la clase componente desde la vista y conocer el JavaScript de Laravel Livewire.
- Capítulo 7: En este capítulo, vamos a crear el CRUD para los posts.
- Capítulo 8: En este capítulo, vamos a crear filtros y campos de búsquedas para un listado aprovechando las bondades de Livewire.
- Capítulo 9: En este capítulo, vamos a crear campos de ordenación para el listado por las columnas.
- Capítulo 10: En este capítulo, vamos a conocer todo lo que nos ofrece en JavaScript de Livewire y combinarlo con otros plugins, conoceremos los hooks en JavaScript, consumir propiedades, funciones y uso de los eventos.
- Capítulo 11: En este capítulo, vamos a conocer algunas características extras de las propiedades de Laravel Livewire, como personalizar la fase de actualización de los wire:model, como el uso de las propiedades computadas.
- Capítulo 12: En este capítulo, vamos a crear una sencilla aplicación tipo blog con un listado con filtros y campos de búsqueda y detalle.
- Capítulo 13: En este capítulo, vamos a crear un carrito de compras en la seción y base de datos, para el cual, veremos comunicación entre componentes, envío de eventos, plugin de tipo toast para mostrar mensajes de confirmación de operación realizada, con escuchadores de los eventos desde JavaScript.
- Capítulo 14: En este capítulo, vamos a mostrar el código de una aplicación creada con Alpine.js para crear un componente tipo to do list.
- Capítulo 15: En este capítulo, vamos a adaptar la aplicación en Alpine.js presentada en el anterior capítulo, para que funcione en conjunto con Livewire.
- Capítulo 16: Conoceremos cómo crear pruebas unitarias y de integración en la aplicación que creamos anteriormente mediante PHPUnit.
Módulos
Módulo 1 — Configuración, componentes y Tailwind
- Preparar tu entorno de Laravel.
- Instalar y configurar Livewire.
- Integración con Tailwind para interfaces limpias.
- Creación de tu primer componente Livewire desde cero.
Módulo 2 — Formularios, validación
- Aquí metemos las manos en la masa:
- Formularios reactivos.
- Componentes de Livewire.
- Validaciones en tiempo real.
- Filtrado dinámico de datos.
- Respuestas anidadas y componentes que se comunican entre sí.
- Además, en esta parte introduzco varias de las funciones de Livewire que más me gustan, como los eventos y la gestión de estado basada en componentes.
- Aplicaciones de ejemplo.
¿Qué vas a aprender y para quién es este curso?
Aprender Laravel Livewire no tiene por qué ser un caos lleno de ventanas abiertas, búsquedas eternas en Google y tutoriales que se contradicen. En este curso te llevo desde cero —pero partiendo de que ya sabes Laravel— hasta dominar Livewire y crear aplicaciones dinámicas sin escribir toneladas de JavaScript.
Y sí, como siempre digo en mi contenido: el curso es equivalente al libro; tiene exactamente el mismo contenido, solo que en un formato que te guía paso a paso.
Además, también tengo recursos gratuitos en mi blog, por si quieres ir calentando motores antes de entrar de lleno al curso.
Si ya trabajas con Laravel y quieres dar el salto a interfaces reactivas sin casarte con Vue o React, este curso es para ti.
Livewire me cambió la forma de trabajar componentes, así que aquí aprenderás:
Cómo comunicar cliente y servidor de manera directa y eficiente.
Cómo crear componentes reutilizables sin añadir complejidad innecesaria.
Cómo construir interfaces dinámicas modernas con Tailwind y Alpine.js sin perder la sencillez del stack Laravel.
Eso sí: lo digo siempre y aquí también lo repito tal cual lo mencioné en mi libro: este curso no es para quien nunca ha tocado Laravel. Si ese es tu caso, primero aprende lo básico y vuelve; te prometo que te ahorrarás muchos dolores de cabeza.
Acepto recibir anuncios de interes sobre este Blog.
Este curso ofrece una introducción desde cero a Laravel Livewire y conocer los detalles más importantes de esta tecnología; uso de componentes, eventos, JavaScript, Alpine.js, Tailwind.css
Algunas recomendaciones:
Benjamin Huizar Barajas
Laravel Legacy - Ya había tomado este curso pero era cuando estaba la versión 7 u 8. Ahora con la ac...
Andrés Rolán Torres
Laravel Legacy - Cumple de sobras con su propósito. Se nota el grandísimo esfuerzo puesto en este cu...
Cristian Semeria Cortes
Laravel Legacy - El curso la verdad esta muy bueno, por error compre este cuando ya estaba la versi...
Bryan Montes
Laravel Legacy - Hasta el momento el profesor es muy claro en cuanto al proceso de enseñanza y se pu...
José Nephtali Frías Cortés
Fllask 3 - Hasta el momento, están muy claras las expectativas del curso
| 👤 Andrés Cruz
Por aquí tienes el listado completo de clases que vamos a cubrir en el libro y curso: