Creación de Aplicaciones con Svelte: Primeros Pasos Prácticos

Array con la informacion de las peliculas

[
            {
              name: "Avengers",
              available: 3,
              quantity: 0,
            },
            {
              name: "Terminator",
              available: 5,
              quantity: 0,
            },
          ]

Bueno después de este modulo, mi top fue:

• React
• Vue
• Svelte

😃

En el ejemplo me parece que Svelte es muy parecido a Vue. Ustedes qué opinan?

Saludos! Así es como hice un componente independiente para los botones:

<script>
  export let initialValue = 0;
  export let maxValue ;


 //Por defecto el contador comienza en 0
  let contador = initialValue;

  function aumentar() {
    contador++;
  }

  function disminuir() {
    contador--;
  }
</script>


<button type="button" on:click={disminuir} disabled={contador<=0}>-</button>
{contador}

/*Hacemos que el botón de aumentar se desactive cuando el contador alcance el valor máximo (que le pasaremos al llamar al componente)*/
<button type="button" on:click={aumentar} disabled={contador>=maxValue}>+</button>

Luego al llamar a los botones en el formulario sería de esta manera:

(Realmente no es necesario especificar el initialValue ya que por defecto es 0).

{#each movies as movie}
<form>
	<h3>{movie.name}</h3>
	<Buttons initialValue ={0} maxValue={movie.available}/>
</form>
{/each}

Rollup

Es un paquete de módulos para JavaScript que compila pequeños fragmentos de código en algo más grande y complejo, como una biblioteca o aplicación. Utiliza el nuevo formato estandarizado para módulos de código incluidos en la revisión ES6 de JavaScript, en lugar de soluciones idiosincrásicas anteriores como CommonJS y AMD. Los módulos ES le permiten combinar libremente y sin problemas las funciones individuales más útiles de sus bibliotecas favoritas. Esto eventualmente será posible de forma nativa en todas partes, pero Rollup te permite hacerlo hoy.

Para mas información puedes ver acá

Cuando escriban el nombre del componente al importarlo aseguresen de poner la primera letra en mayuscula ya que si usan el nombre

form

les saldra un error por usar el mismo nombre de la etiqueta form de html

Me quedo con ganas de aprender vue, pero en mi pais no hay mucha ofertas de trabajo asi que a react será

Yo me fui por DC, Snyder’s cut me gusto mucho.

<script>
  const movies = [
    {
      name: "Avatar",
      available: 5,
      quantity: 0
    },
    {
      name: "Superman man of Steel",
      available: 4,
      quantity: 0
    },
    {
      name: "Batman vs Superman",
      available: 5,
      quantity: 0
    },
    {
      name: "Wonder Woman",
      available: 1,
      quantity: 0
    },
    {
      name: "Acuaman",
      available: 6,
      quantity: 0
    },
    {
      name: "Snyder Cut: Justice Leage",
      available: 10,
      quantity: 0
    }
  ];
</script>

{#each movies as movie}
<form>
	<h3>{movie.name}</h3>
	<button type="button" on:click={() => movie.quantity += 1} disabled={movie.quantity >= movie.available}>+</button>
	{movie.quantity}
	<button type="button" on:click={() => movie.quantity -= 1} disabled={movie.quantity <= 0}>-</button>
</form>
{/each}

Primera vez que veo Svelte y fue como amor a primera vista -

Sobre Svelte muy sencilla la sintaxis me gusto pero si toca elegir me quedo con Vue JS y React a ver en que logro encontrar la oportunidad laboral en mi pais

Pensé que Vue era el framework más fácil y rápido de aprender, pero Svelte me sorprendió más de lo que me esperaba

<script>
  const movies = [
    { name: "Avengers", available: 5, quantity: 0 },
    { name: "Wonder Woman", available: 15, quantity: 0 }
  ];
</script>

{#each movies as movie}
<form>
	<h3>{movie.name}</h3>
	<button type="button" on:click={() => movie.quantity--} disabled={movie.quantity <= 0}>-</button>
	{movie.quantity}
	<button type="button" on:click={() => movie.quantity++} disabled={!(movie.quantity < movie.available)}>+</button>
</form>
{/each}

Hasta el momento está súper genial el curso, me ayudó a decidir que Angular será el primer framework que aprenda:)

Ya que terminamos esta sección de entrar en contexto y conocer algunos Frameworks importantes de JS me gustaría compartirles estas notas. 😄

https://complex-swamp-51c.notion.site/REACT-ANGULAR-VUE-y-SVELT-dfe8f4787c124c74a8192c7210ab2a3d

svelte luce muy facil e intuitivo, me gusto

Me resulta muy interesante Svelte. Me gusta su simpleza

Hasta ahora svelte es la que más me gustó, seguida de cerca por vue :smi

Mi ranking:

1. React
2. Vue
3. Svelte
4. Angular

Mi top de frameworks y/o librerías es:

1. React
2. Svelte
3. Angular
4. Vue
   😃

En español no se dice “SALVAR” eso es una traducción literal del inglés; la manera correcta es “GUARDAR”.

Sí se podría decir “Lo voy a guardar para salvarlo de cualquier accidente y que se pierda todo lo que he hecho”.

Nunca había visto Svelte 😮 me gusto 😃

Peliculas

Mis apuntes en Notion💚