Svelte 3: Introdução a Reatividade

Aplicativos web aprimorados ciberneticamente

Nós falamos sobre os primeiros passos para começar com o Svelte 3, mas naquele post inicial eu propositalmente omiti um dos recursos mais importantes do Svelte: reatividade.

A reatividade tem sido a última moda nos últimos anos para estruturas modernas de interface de usuário com JavaScript. Reatividade significa que os valores alterados serão automaticamente refletidos no DOM.

O Angular permite a programação reativa graças ao RxJS e as Observables, e o Vue.js permite recomputar valores de forma reativa com Computed Properties. No Svelte, ele faz uso de um recurso de JavaScript não muito conhecido chamado de labels, permitindo declarações reativas e condições reativas. Isso significa que você pode ter certos valores que serão recalculados automaticamente quando outros valores forem alterados. Isso é realmente poderoso e, como você verá, o Svelte facilita a tarefa. 🥧

Criando um contador de palavras

Vamos ver como é a reatividade no Svelte construindo um exemplo de contador de palavras.

Aqui está o nosso componente:

$ touch src/WordCounter.js

E colocamos:

<script>
    let text = '';
</script>

<style>
  textarea {
    width: 100%;
    background: aliceblue;
    font-size: 2rem;
  }
</style>

<textarea bind:value={text} rows="10" />

Nada muito especial aqui, exceto pela ligação bidirecional entre o valor text e o valor do textarea.

Declarações Reativas

Agora vamos adicionar uma declaração reativa para calcular automaticamente o número de palavras e caracteres quando o valor da variável text for alterado:

<script>
  let text = '';

  $: characters = text.length;
  $: words = text.split(' ').length;
</script>

<style>
  textarea {
    width: 100%;
    background: aliceblue;
    font-size: 2rem;
  }
</style>

<textarea bind:value={text} rows="10" />

<p>Character Count: {characters}</p>
<p>Word Count: {words}</p>

Declaramos duas novas variáveis: characters e words, que calculam um valor com base no valor interno text e que será automaticamente recalculado.

A parte ‌$: é um label perfeitamente válido em JavaScript. Provavelmente, você não usou labels em JavaScript antes, eles são usados ​​para casos extremos com loops for aninhados. Svelte dá às declarações rotuladas um significado especial e automaticamente instrumenta a reatividade da declaração.

Condições Reativas

Essa reatividade usando a sintaxe de rótulo não é válida apenas para declarar novas variáveis, mas também pode ser usada para executar instruções de maneira reativa quando um valor é alterado.

Vamos registrar o valor text para o console quando ele mudar:

<script>
  let text = "";

  $: characters = text.length;
  $: words = text.split(" ").length;

  $: console.log("your text:", text);
</script>

<style>
  textarea {
    width: 100%;
    background: aliceblue;
    font-size: 2rem;
  }
</style>

<textarea bind:value={text} rows="10" />

<p>Character Count: {characters}</p>
<p>Word Count: {words}</p>

Imagine como isso pode ser útil para depurar aplicativos!

Múltiplas declarações

Você pode agrupar várias instruções em um bloco usando chaves:

$: {
  console.log("---");
  console.log("your text:", text);
}

Declarações condicionais

E você pode até usar condicionais como sua declaração:

$: if (text.toLowerCase().includes("see you later alligator")) {
  console.log("Not so soon baboon!");
  text = "";
}

Agora toda vez que nossa variável text contiver a string “see you later alligator”, uma mensagem é registrada no console e nós redefinimos o valor da variável text.

Com isso, você pode continuar e tornar seus aplicativos Svelte reativos!

Créditos ⭐️

• Introduction to Reactivity in Svelte, escrito originalmente por @alligatorio