DEV Community

loading...
Cover image for Hagamos un widget del clima con alpine.js y open weather map

Hagamos un widget del clima con alpine.js y open weather map

abr4xas profile image ángel Originally published at angelcruz.dev ・1 min read

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>
Enter fullscreen mode Exit fullscreen mode

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
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Si quieres saber como continua, te invito a mi blog.

Discussion (0)

Forem Open with the Forem app