Hablemos sobre alpinejs

Angel Cruz
Angel Cruz

04 DE enero DE 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 qué es alpinejs

Bueno, pongamos manos a la obra y trabajamos en un widget para el clima que se verá más o menos como esto:

proyecto alpinejs
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 función temp() y que solo estará disponible para todo aquello que esté dentro de las etiquetas div donde fue declarado.

Teniendo en cuenta 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 función 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 clave api y listo.

Te podrá interesar
Aprende cómo crear reglas personalizadas en Cursor IDE paso a paso. Incluye ejemplos, mejores prácticas y un generador de reglas online para facilitar el proceso.
Descubre qué es MCP (Model Context Protocol), cómo funciona y por qué se ha convertido en una herramienta esencial para construir agentes inteligentes conectados, seguros y escalables.
¿Vale la pena testear modelos en Laravel? Descubre cuándo es útil, mejores prácticas y errores comunes al hacerlo.

Made with ♥️ & 🧉 in Montevideo, Uruguay.

[AC].dev is not affiliated with Laravel or Laravel LLC. Laravel is a Trademark of Taylor Otwell.

Code highlighting provided by Torchlight.

We use cookies!

Hi, this website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it.