Alpine.js ofrece las propiedades reactivas y declarativas de grandes frameworks como Vue o React con un coste mucho menor. Mantiene el DOM, pudiendo mejorar y perfeccionar el comportamiento como más convenga. Podríamos considerarlo como un Tailwind para JavaScript.
Alpine nos ofrece 14 directivas y 6 propiedades mágicas que puedes conocer leyendo su documentación.
Hagamos un pequeño ejemplo para entender mejor que es alpinejs
Bueno, pongamos manos a la obra y trabajemos en un widget para el clima que se verá más o menos como esto:
template original de iaminos.
Para hacer este proyecto necesitamos conocer sobre:
- template strings
- algunas directivas de alpine:
- x-data: Declara un nuevo scope del componente.
- x-init: Ejecuta una expresión cuando un componente se inicializa.
- x-text: Actualiza el innerText del elemento.
- tener una llave api de open weather map.
Asumiendo que bajaron el template vamos a irlo modificando poco a poco.
En el <head>
vamos a incluir esta estiqueta javascript:
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>
Ya con esto tendremos alpine inicializado.
Ahora vamos a crear una etiqueta script
y vamos a incluir lo siguiente:
function temp() {
return {
temp: {},
init() {
// todo
}
}
}
Ahora lo que debemos hacer es declarar el scope e inicializarlo de la siguiente forma:
<div x-data="temp()" x-init="init()">
<!-- todo -->
</div>
NOTA: voy a remover todas las clases CSS y dejar las directivas de alpine
Acá lo que indicamos es que el scope de este componente será la funcion temp()
y que solo estará disponible para todo aquello que esté dentro de las etiquetas div donde fue declarado.
Teniendo encuenta esto pasemos a terminar de armar nuestro widget.
<div x-data="temp()" x-init="init()">
<div x-text="`${temp.name}`">n/a</div>
<div>
<img :src="`http://openweathermap.org/img/w/${temp.weather[0].icon}.png`" alt=""/>
</div>
<div>
<div x-text="`${parseInt(temp.main.temp)}°C`">n/a</div>
<div>
<div x-text="`${temp.weather[0].main}`">n/a</div>
<div>
<span>☝️</span>
<span x-text="`${parseInt(temp.main.temp_max)}°C (max)`">n/a</span>
</div>
<div>
<span>👇</span>
<span x-text="`${parseInt(temp.main.temp_min)}°C (min)`">n/a</span>
</div>
</div>
</div>
<div>
<div>
<div>Wind</div>
<div x-text="`${temp.wind.speed}k/h`">n/a</div>
</div>
<div>
<div>Humidity</div>
<div x-text="`${temp.main.humidity}%`">n/a</div>
</div>
<div>
<div>Feels like</div>
<div x-text="`${parseInt(temp.main.feels_like)}°C`">n/a</div>
</div>
</div>
</div>
Y nuestra funcion javascript pasaría a quedar de esta forma:
function temp() {
return {
temp: {},
init() {
fetch('http://api.openweathermap.org/data/2.5/weather?q=Montevideo,UY&appid=<API_KEY>&units=metric')
.then(response => response.json())
.then(response => { this.temp = response })
}
}
}
Si no tienes ganas de codear y solo quieres mirar pasa por acá, solo vas a necesitar tu llave api y listo.