Ciclo de vida

Ciclo de vida

Nota. La razón por la que beforeUpdate es el primero en ejecutar, inclusive antes de onMount, es para revisar la existencia del componente/elemento antes de presentar sus propiedades.
Dentro de la documentación, se hace hincapié a un concepto especial de Svelte, el Server-side Component API. Esta interfaz, es un mecanismo que explota Svelte ya que la mayoría de los componentes, generados en el client-side, de “manera útil” solamente expresan su estructura (html), su estilo (css) y comportamiento (js) donde los Frameworks exponen un estado que se mantiene latente y, después, el Garbage Collection se vuelve loco.
🎉Aquí, yo doy un super punto a Svelte porque nos permite utilizar la API para manejar:

• Client-Side component
• Custom element
• Server-Side component

Y llevar nuestro desarrollo a otro nivel.

para grid recomiendo auto fit el cual pueden leer en el siguiente enlace

https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/

Éste { : else } si no lo habia visto en un ciclo:

{#each photos as photo}  
    <figure>
        <img src={photo.thumbnailUrl} alt={photo.title}>
        <figcaption>{photo.title}</figcaption>
    </figure>
  {:else}
    <p>Loading...</p>
  {/each}

Pueden utilizar el autofit y depaso se hace responsive.

mmm pense que iba ser mas teoria… de como funciona svelte por dentro…
al final terminamos haciendo un llamado a un api…

<script>
    // Ejecuta un llamado despues de que el componente sea montado
    import { onMount } from 'svelte';

    let photos = [];

    onMount(async () => {
        console.log('onMount');
        const response = await fetch('https://jsonplaceholder.typicode.com/photos?_limit=20');
        photos = await response.json();
    })
</script>

<div class="Photos">
    {#each photos as photo}
        <figure>
            <img src={photo.thumbnailUrl} alt={photo.title} />
            <caption>{ photo.title }</caption>
        </figure>
    {:else}
        <p>Loading....</p>
    {/each}
</div>

Hubiera sido bueno explicar los otros ciclos de vidas.!

El enlace de La API usada es:
https://jsonplaceholder.typicode.com/photos?_limit=20

[0].url 👇

**Practicando la api de Rick and Morty **

 onMount(async () => {
     const response = await  fetch('https://jsonplaceholder.typicode.com/photos?_limit=20')
     photos = await response.json()
 })

por ratos la página de las imágenes se torna bastante lenta. Cuando recién hice el ejercicio pintaba las imágenes en más de 1 min…

vengo de vue y estoy notando que svelte se parece mucho, ambos son muy sencillos con una linea de aprendizaje muy alta
Les recomiendo revisar Vue

Este es mi código si quieren usar la API de Rick y Morty

  import { onMount } from "svelte";

  let characters = [];


  onMount(async () => {
    console.log("onMount");
    const response = await fetch("https://rickandmortyapi.com/api/character?_limit=50");
    characters = await response.json();
    characters = characters.results;
  });
<div class="Photos">
  {#each characters as character} 
    <figure>
      <img src={character.image} alt={character.title}>
      <figcaption>{character.name}</figcaption>
    </figure>
    {:else}
      <p>Loading...</p>
  {/each}
</div>

En la estructura del each, tambien se puede incluir un catch!!

Como me encanto esta clase, seria buenisimo un curso practico.

Encontré este tutorial de manejo de la API de Rick and Morty con Svelte.
https://medium.com/@edselserranomontiel/svelte-con-rick-and-morty-api-3ada4f222438

A mi, me sirvió bastante.

si subo una imagen en webpack configuro igual un loader si la imagen viene desde nuestros assets