©2024 Escuela Tecnologías de la Información S.L. Todos los derechos reservados.
Curso de Alpine.js
Aprende AlpineJS, la librería Javascript ligera y moderna para el desarrollo sencillo de interfaces de usuario dinámicas en páginas web.
Inscripciones abiertas
Próxima clase
Alpine.js es una librería Javascript para el desarrollo de dinamismos en páginas web, con un enfoque sencillo y productivo. Permite crear comportamientos dinámicos personalizados en páginas web con los que puedes llegar a componer cualquier funcionalidad que necesites, de una manera ágil y sencilla.
Esta biblioteca de código tiene varias ventajas, como su facilidad de aprendizaje, su extraordinaria ligereza y su sencilla integración en proyectos nuevos o ya existentes. De todos modos, para entender mejor el enfoque nos ofrece Alpine.js y que lo distingue dentro del panorama de los frameworks y bibliotecas Javascript actuales, podemos decir que "Alpine es para Javascript lo que Tailwind es para CSS".
Esta biblioteca de código tiene varias ventajas, como su facilidad de aprendizaje, su extraordinaria ligereza y su sencilla integración en proyectos nuevos o ya existentes. De todos modos, para entender mejor el enfoque nos ofrece Alpine.js y que lo distingue dentro del panorama de los frameworks y bibliotecas Javascript actuales, podemos decir que "Alpine es para Javascript lo que Tailwind es para CSS".
Qué aprenderé en el Curso de Alpine.js
Objetivos del curso
Enseñar a los estudiantes a trabajar con Alpine.js, explicando su funcionamiento de una manera práctica. Conocer las directivas que nos ofrece Alpine y su modo de uso, para resolver distintas necesidades de desarrollo de interfaces de usuario comunes en páginas web. Aprender asuntos más avanzados de Alpine.js que nos permitan organizar mejor el código y extender sus funcionalidades.
Por qué debes aprender Alpine.js
Qué tengo que saber
Este curso se puede hacer con unos conocimientos básicos de HTML y CSS y algunas nociones de programación esenciales. Al principio explicaremos el código Javascript de modo que incluso si no sabes el lenguaje de programación puedas entender los ejemplos.
A medida que avanza el curso y nos dediquemos a temas más avanzados, iremos dando por entendidas muchas cosas del lenguaje, por lo que si tienes conocimientos previos de Javascript será mucho más fácil para ti asimilar el contenido completo del Curso de Alpine.js.
Clases y contenidos
- Qué es Alpine.js
- Cómo desarrollar componentes básicos con Alpine
Clases a la carta
A partir de este punto todas las clases del cursos son a la carta y se irán liberando en la fecha indicada.
Ejemplos iniciales de desarrollo con Alpine.js
En estos primeros vídeos del curso de Alpine.js vamos a demostrar la experiencia de desarrollo que nos ofrece esta librería Javascript, realizando ejemplos relevantes que nos permitan entender cómo trabajar con la biblioteca y qué tipo de cosas podemos hacer de manera prácticamente inmediata con muy poco esfuerzo.
En este vídeo veremos como integrar AlpineJS en una página web, simplemente utilizando un script JavaScript que traemos directamente desde el CDN. Veremos un primer ejemplo de desarrollo con Alpine.js que nos demuestre sus características reactivas.
Ahora vamos a ver un típico ejemplo que nos ayudará a entender la facilidad con la que podemos desarrollar comportamientos dinámicos en AlpineJS. Será una interfaz de usuario de tipo dropdown.
En este vídeo vamos a realizar un ejemplo de buscador realizado con Alpine. Será un buscador rudimentario pero que permita mostrar las facilidades con las cuales podemos filtrar elementos en un array y mostrar los resultados dinámicamente en la página, de manera reactiva.
Directiva x-data de Alpine
La directiva x-data es la más importante dentro de todas las que ofrece Alpine.js. Cuando la usamos estaremos convirtiendo un pedazo de HTML en un componente Alpine.
En este primer vídeo vamos a explicar cómo definir el estado del componente gracias a la directiva x-data.
Cómo definir métodos en el componente mediante la directiva x-data de Alpine.js.
Explicamos cómo podemos utilizar Alpine.data() para separar las definiciones de los componentes de Alpine, de modo que mejoremos la mantenibilidad del código y su reutilización.
Consideraciones con respecto al ámbito de los datos de los componentes Alpine.js.
Directivas básicas de Alpine.js
En los siguientes vídeos vamos a repasar las directivas más básicas con las que trabajaremos para la creación de los componentes en la biblioteca Alpine.js y que permitirán realizar la inicialización de los componentes junto con pequeños efectos y enlace de datos. Finalmente, desarrollaremos una caja modal.
En este vídeo vamos a conocer la directiva x-init que nos permitirá inicializar componentes de Alpine con código JavaScript arbitrario.
Veremos ejemplos sobre la directiva x-show y algunas explicaciones y aplicaciones relevantes.
Explicamos la directiva x-bind de Alpine JS que nos permite realizar el enlace de datos de las propiedades de los componentes hacia los atributos HTML de los elementos.
Vamos a repasar y poner ejemplos sobre algunas configuraciones importantes de x-bind que son específicas cuando estamos bindeando datos a los atributos class de las etiquetas.
Finalizamos este bloque poniendo un ejemplo de componente de UI típico en las páginas web: una caja de diálogo modal.
Manejo de eventos con Alpine.js
En los siguientes vídeos vamos a abordar muchos asuntos importantes en lo que respecta al manejo de eventos en la biblioteca Alpine y la definición de manejadores de eventos Javascript. Acabaremos desarrollando un componente carrusel.
Qué es el objeto evento en JavaScript y como poder acceder a él en los manejadores de evento declarados con Alpine.
Cómo gestionar eventos de teclado y de ratón en los componentes desarrollados con la librería Alpine.js.
Ejemplos importantes sobre los modificadores de eventos que podemos implantar en los componentes AlpineJS para crear manejadores especializados en determinadas pulsaciones de teclas o comportamientos del ratón.
En este vídeo vamos a realizar un componente de interfaz gráfica de tipo carrusel en Apline, aplicando conocimientos de los eventos aprendidos en los anteriores vídeos.
Enlace de datos avanzado con Alpine.js
En los próximos vídeos vamos a aprender a realizar el enlace de datos más avanzado que nos ofrece la librería Alpine, conociendo las directivas x-model y x-modelable. Además repasaremos conceptos y usos específicos de otras directivas ya explicadas en el curso de Alpine como x-text y x-html. Realizaremos nuevos componentes de interfaces gráficas para ilustrar estos conocimientos.
En este vídeo vamos a repasar la directiva x-text explicando cosas adicionales y conoceremos además la directiva x-html, detallando usos y consideraciones importantes a tener en cuenta para la seguridad.
Veremos cómo es el enlace de datos de dos direcciones (2 way data binding) que nos ofrece Alpine mediante la directiva x-model.
Vamos a desarrollar un componente de interfaz gráfica de tipo interruptor. Sería algo parecido a un checkbox pero con un aspecto diferente, que se comportará gracias a x-model como un checkbox nativo del HTML.
Cuando tenemos agrupaciones de datos podemos mantenerlos unidos en objetos JavaScript complejos, lo que colaborará a la hora de mantener las aplicaciones y los flujos de datos.
En este vídeo vamos a conocer la directiva x-modelable que en la práctica nos permite usar x-model para un enlace de datos de dos direcciones (2 way data binding) con cualquier componente arbitrario de AlpineJS, incluso con interfaces y componentes existentes en otras librerías.
Recorridos a colecciones con x-for
En este bloque vamos a conocer en detalle la directiva x-for que nos permite realizar recorridos a colecciones o arrays, creando contenido de manera dinámica para cada uno de los elementos de la colección.
Veremos en este vídeo los conocimientos básicos necesarios para entender y usar la directiva x-for.
Realizamos un componente de "color picker" usando los conocimientos adquiridos sobre la directiva x-for.
En este vídeo vamos a mostrar un ejemplo sobre cómo podemos hacer uso de AJAX para el acceso a datos de un servicio web y cómo podemos luego mostrar esos datos por medio de la directiva x-for de Alpine.
Consideraciones importantes cuando usamos colecciones en Alpine de muchos elementos, donde además queremos realizar ordenaciones, manteniendo un rendimiento elevado.
Otras directivas de Alpine.js
En los vídeos vamos a mostrar toda una serie de directivas importantes en Alpine que nos quedan por aprender en este curso.
Con esta directiva conseguiremos realizar efectos de transiciones de manera inmediata, mejorando la vistosidad de los componentes de manera extremadamente sencilla.
Con esta directiva podemos facilitar la interoperabilidad entre componentes de Alpine o componentes ya existentes en sitios web donde estemos integrando Alpine, y por supuesto también con JavaScript.
Una sencilla directiva para conseguir ignorar determinadas partes de los componentes Alpine.
Una importante directiva que nos permite acceder a los elementos del don que hay dentro de los componentes, por medio de referencias sencillas de generar y acceder.
Está directiva nos permitirá mejorar la experiencia de usuario en la carga de los componentes Alpine que tienen elementos donde estamos utilizando x-show.
Con x-teleport podremos solucionar algunas situaciones poco deseables, que pueden darse dependiendo de dónde estén colocados nuestros componentes dentro de la página.
Esta directiva nos permite ocultar y mostrar elementos de una manera diferente a x-show que puede ser importante en determinadas circunstancias.
La directiva x-id nos permite generar y ids dinámicos y únicos, algo muy importante cuando estamos reutilizando los componentes en varios lugares de la página.
Magic properties básicas de Alpine
En este bloque vamos a introducir las "Magic properties" de Alpine, explicando las más elementales y sencillas de entender.
Vemos la magic property de Alpine $el para acceder al elemento actual.
Vemos la magic property de Alpine $refs para acceder a elementos del componente que hayamos marcado con la directiva x-ref.
Ahora abordamos la magic property de Alpine $data que nos permite acceder a los datos que tenemos en un componente.
En este vídeo vamos a ver de nuevo $id con nuevos usos que no habíamos tratado cuando vimos la directiva x-id.
En este caso trabajaremos con la magic property de Alpine $root que nos permite acceder al elemento raíz de un componente en Alpine.js.
Una magic Property de Alpine muy útil cuando queremos que se realicen cosas después de que los mecanismos de reactividad de los componentes han sido ejecutados ya.
En este caso estamos ante una magic property que nos permite suscribirnos a cambios en los datos del x-data del componente Alpine.
Gestión de eventos personalizados en AlpineJS
En los próximos vídeos vamos a explicar cómo trabajar con eventos personalizados en los componentes Alpine, lo que nos permitirá realizar la interoperabilidad entre componentes realizados con esta biblioteca o con cualquier otro código javascript que trabaje con custom events.
Vamos a ver de manera básica como se realiza la gestión de los eventos personalizados dentro de los componentes Alpine.
Cuando trabajamos con custom events en el navegador es muy habitual que tengamos que enviar datos importantes que deben ser recibidos por aquellos agentes que estén suscritos a los eventos. En este vídeo aprenderemos a realizar esto con el detalle del evento.
En este vídeo vamos a practicar con todo lo aprendido sobre los custom events en Alpine.js, aplicando el conocimiento sobre nuestra aplicación de gestión de tareas.
Gestión de estado global en aplicaciones y páginas Alpine.js
Para usos avanzados de la biblioteca Alpine resulta muy importante aprender a gestionar el estado global de las aplicaciones. Veremos las utilidades que Alpine.js nos ofrece de casa para poder realizar esta labor.
En este vídeo aprenderemos las generalidades sobre el manejo del estado global en Alpine y sus componentes.
Utilizamos el conocimiento aprendido sobre el manejo de estado global en nuestra aplicación de gestión de tareas.
Cuando creamos componentes que utilizan estado global debemos realizar la inicialización de manera individual con su propio init().
Veremos un ejemplo básico de uso de Alpine.bind() para la declaración reutilizable de enlaces de datos en elementos del DOM.
Utilizamos nuestro ejemplo de aplicación de gestión de tareas para aprender usos más avanzados de Alpine.bind().
Plugins oficiales de Alpine
En los siguientes vídeos vamos a ver cómo trabajar con algunos de los plugins que el propio equipo de Alpine ha desarrollado para implementar diversas funcionalidades comunes en sitios y aplicaciones web.
Cómo utilizar el plugin Collapse de Alpine para hacer fácilmente transiciones con efectos de cortinilla (slidedown / slideup).
Aprendemos a utilizar la persistencia en el navegador de datos guardados por los componentes Alpine.
Unas notas para resolver problemas que podemos encontrarnos al trabajar con persistencia de datos que están en stores globales de Alpine.
En este vídeo vamos a mostrar el uso del plugin anchor, que nos permitirá colocar elementos de tipo tooltip o dropdowns en los lugares que necesitemos.
Extensión de Alpine por medio de directivas personalizadas
En estos vídeos vamos a explicar cómo puedes crear tus propias directivas en Alpine para encapsular funcionalidades que luego puedes usar fácilmente en tus sitios y aplicaciones web.
Introducimos el tema de las custom directives en Alpine con un primer ejemplo de directiva sencilla que nos permita entender las generalidades de este modo de extensión de las funcionalidades de la librería.
Un segundo ejemplo de directiva personalizada que nos permitirá crear de manera rápida una interfaz de búsqueda en un campo de texto decorado con un icono. Esta directiva nos permitirá aprender a trabajar con modificadores de las directivas, para personalizar su funcionamiento.
En este vídeo vamos a profundizar en el desarrollo de custom directives de AlpineJS mostrando diversos aspectos importantes como la gestión de la reactividad, el paso de valores a las directivas y cómo liberar y limpiar los componentes en el caso que las directivas se eliminen del DOM.
En este último ejemplo de creación de directivas vamos a mostrar un ejemplo que permite implementar un comportamiento genérico de consulta Ajax contra un servicio web, por medio de una directiva personalizada configurable.
Extender Alpine por medio de Magic Properties + Async
En los siguientes ejemplos vamos a ver cómo podemos extender Alpinejs, en este caso mediante la creación de magic properties y magic functions personalizadas. Además veremos cómo gestionar en Alpine comportamientos asíncronos.
Cómo puedes implementar propiedades mágicas de AlpineJS con tus comportamientos personalizados.
Desarrollamos un caso avanzado de magic property creada por nosotros mismos que recibe datos y los transforma (lo que llaman magic function en la documentación)
Cómo usar funciones asíncronas en los lugares que Alpine espera una función síncrona. Como crear nuestras propias promesas y gestionarlas con Alpine.
Un segundo ejemplo de gestión de comportamiento asíncrono con un código de acceso a Ajax por fetch.
Cómo crear plugins en Alpine
Para acabar este curso de Alpine.js vamos a mostrar cómo podemos crear nuestros propios plugins. Conoceremos las generalidades del desarrollo de plugins y luego publicaremos un plugin en npm para compartirlo con la comunidad de usuarios de Alpine. Por último veremos cómo producir el plugin para distribución, cómo documentarlo y cómo usarlo tanto por medio de un CDN como por medio de proyectos en los que trabajaremos con módulos js y bundelización del código.
Explicamos generalidades del desarrollo de tus propios plugins en Alpine.
En este segundo vídeo del bloque de plugins comenzaremos un proyecto de plugin con Alpine. Explicaremos cómo podemos crear un plugin y luego ponerlo a disposición de la comunidad. Cómo producir los archivos para producción realizando un build y cómo se publicará en GitHub y luego en npm.
Cómo usar Alpine instalando vía npm en un proyecto donde pretendas usar transpilación y bundelizado del código. Además veremos cómo podemos usar nuestro propio plugin, de modo que verificaremos que está correctamente publicado y usable en cualquier proyecto Javascript. Trabajaremos con Vite en un proyecto frontend creado desde cero.
Cómo se instala el plugin de Alpine.js, que hemos desarrollado y publicado en npm durante el curso. Sin embargo ahora realizamos el en otros proyectos vía CDN.
¿Conoces nuestra tarifa plana?
Toda la formación de EscuelaIT, con más de 200 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.