Tabla de contenido:
Introducción
Alpine es un framework para JavaScript que funciona del lado del cliente permitiendo crear aplicaciones de Javascript de naturaleza reactiva y declarativa en base a componentes. Alpine.js posee una biblioteca de manipulación del DOM HTML que facilita la interacción con el mismo de forma declarativa reduciendo la cantidad de código.
Instalación
Hay dos formas de incluir Alpine en el su proyecto:
- Incluirlo desde una etiqueta
<script> - Importándolo como módulo
Desde una etiqueta de de script
Esta es la forma más sencilla de empezar a utilizar Alpine.
<html>
<head>
...
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
...
</html>
Como módulo
Si se prefiere el enfoque más sólido, es posible instalar Alpine a través de NPM e importarlo a un paquete.
Ejecute el siguiente comando para instalarlo.
npm install alpinejs
Inicializar en el paquete:
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()
Probando la instalación
Para validar que alpine está funcionando correctamente podemos utilizar el código siguiente.
<html>
<head>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>
</body>
</html>
Si al ejecutar el archivo en el navegador web ve I ❤️ Alpine, está listo.
Ejemplos de componentes
Para crear los componentes se utilizarán conceptos básicos de escuchas de estados y eventos las características principales.
Contador
<div x-data="{ count: 0 }">
<button x-on:click="count++">Increment</button>
<span x-text="count"></span>
</div>
Dropdown
<div x-data="{ open: false }">
<button @click="open = ! open">Toggle</button>
<div x-show="open" @click.outside="open = false">Contents...</div>
</div>
Campo de búsqueda
<div
x-data="{
search: '',
items: ['foo', 'bar', 'baz'],
get filteredItems() {
return this.items.filter(
i => i.startsWith(this.search)
)
}
}"
>
<input x-model="search" placeholder="Search...">
<ul>
<template x-for="item in filteredItems" :key="item">
<li x-text="item"></li>
</template>
</ul>
</div>
Alpine.js y Laravel Livewire
El creador de Alpine.js es Caleb Porzio quien a su vez es el creador de Livewire la relación que existe entre ambas herramientas es que Livewire utiliza Alpine.js para crear toda la magia que nos permite realizar utilizando PHP y Blade.
"Hola, soy un desarrollador apasionado por Laravel y su ecosistema que permiten desarrollar aplicaciones magnificas, tratare de compartir mis conocimientos y vivencias desarrollando aplicaciones utilizando TALL stack, PostgreSQL y MySQL. 🤘"
Jonnathan Chiroy (jchiroy)
Laravel developer