Hablemos sobre alpinejs

hace 2 meses #Alpine.js

Hablemos sobre alpinejs

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:

<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.

Angel

nano /var/log/random.log