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!

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

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

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 stringsee 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 ⭐️

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store