[AC].dev

Hablemos sobre alpinejs

Publicado @ Jan 4, 2021

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:

proyecto alpinejs

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:

1<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:

1function temp() {
2    return {
3        temp: {},
4        init() {
5            // todo
6        }
7    }
8}

Ahora lo que debemos hacer es declarar el scope e inicializarlo de la siguiente forma:

1<div x-data="temp()" x-init="init()">
2    <!-- todo -->
3</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.

 1<div x-data="temp()" x-init="init()">
 2    <div x-text="`${temp.name}`">n/a</div>
 3    <div>
 4        <img :src="`http://openweathermap.org/img/w/${temp.weather[0].icon}.png`" alt=""/>
 5    </div>
 6    <div>
 7        <div x-text="`${parseInt(temp.main.temp)}°C`">n/a</div>
 8        <div>
 9            <div x-text="`${temp.weather[0].main}`">n/a</div>
10            <div>
11                <span>☝️</span>
12                <span x-text="`${parseInt(temp.main.temp_max)}°C (max)`">n/a</span>
13            </div>
14            <div>
15                <span>👇</span>
16                <span x-text="`${parseInt(temp.main.temp_min)}°C (min)`">n/a</span>
17            </div>
18        </div>
19    </div>
20    <div>
21        <div>
22            <div>Wind</div>
23            <div x-text="`${temp.wind.speed}k/h`">n/a</div>
24        </div>
25        <div>
26            <div>Humidity</div>
27            <div x-text="`${temp.main.humidity}%`">n/a</div>
28        </div>
29        <div>
30            <div>Feels like</div>
31            <div x-text="`${parseInt(temp.main.feels_like)}°C`">n/a</div>
32        </div>
33    </div>
34</div>

Y nuestra funcion javascript pasaría a quedar de esta forma:

 1function temp() {
 2    return {
 3        temp: {},
 4        init() {
 5            fetch('http://api.openweathermap.org/data/2.5/weather?q=Montevideo,UY&appid=<API_KEY>&units=metric')
 6                .then(response => response.json())
 7                .then(response => { this.temp = response })
 8        }
 9    }
10}

Si no tienes ganas de codear y solo quieres mirar pasa por acá, solo vas a necesitar tu llave api y listo.

Subscribete

Recibe contenido exclusivo por correo