Hablemos sobre alpinejs
04 DE January 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:
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 // todo6 }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.
