Svelte 3: Introdução a Reatividade

Aplicativos web aprimorados ciberneticamente

Image for post
Image for post

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

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

<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

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

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

Declarações condicionais

$: 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 ⭐️

Written by

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