Svelte 3: Introdução a Reatividade

#ptbr #javascript #webdev #svelte

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 Compured 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!