Svelte 3: Começando com Svelte 3

Aconteceu de novo! Eu aprendi a amar mais uma vez! Ou é apenas paixão? É cedo demais para dizer, mas eu desenvolvi fortes sentimentos por Svelte e o tempo dirá se ele se transformará em um relacionamento completo.

O que é Svelte?

O Svelte é um framework de interface de usuário que empresta muito ou todas as grandes idéias de alguns de seus colegas, como React e Vue.js, mas traz suas próprias e interessantes abordagens para a mesa. Além disso, não é inteiramente um framework no sentido de que estamos acostumados e talvez seja melhor visto como um compilador.

Quando você constrói um aplicativo Svelte para produção, seu código é compilado em JavaScript puro e otimizado, sem outras dependências de framework incluídas no mix, o que resulta em pacotes realmente pequenos. Por isso, parece um framework quando se desenvolve com todas as sutilezas de sintaxe e facilidades, mas depois o framework desaparece quando o código é compilado para produção. O melhor de dois mundos!

O Svelte já existe há alguns anos, mas com a chegada do Svelte 3, recursos ainda mais poderosos estão disponíveis para desenvolvedores. Pessoalmente, sinto que está começando a nascer um concorrente sério quando se trata de escolher uma ferramenta para construir interfaces de usuário para a web.

Chega de bate-papo e vamos dar um tapa no capô. Se você estiver interessado em uma visão geral mais ampla e uma história inicial, recomendo que você assista a essa palestra do Rich Harris, o criador do Svelte:

Iniciando um projeto Svelte 3

Comece com o Svelte usando o pacote degit, que cria a estrutura inicial do projeto. Você pode fazer isso na linha de comando, chamando degit com npx. Vamos criar um aplicativo simples:

$ npx degit sveltejs/template nosso-exemplo
$ cd nosso-exemplo
$ npm install

E com isso, agora você pode executar um servidor de desenvolvimento usando:

$ npm run dev

Estamos prontos para começar com Svelte! Você pode acessar o endereço http://localhost:5000 para ver seu aplicativo!

Partes de um aplicativo Svelte

Eu gosto de saber como todos os arquivos se encaixam em um projeto, com Svelte não é diferente, para entender o quadro geral, vamos quebrar as coisas:

Nosso package.json

Abra o projeto em seu editor de código favorito e acesse o arquivo package.json. Observe como existem apenas ‌devDependencies e nenhuma “dependencies”! É aí que começa a cair a ficha que você está trabalhando com algo totalmente diferente. Não há dependências normais porque o framework compila seu código para JavaScript puro ao construir para produção.

Ponto de entrada JavaScript: src/main.js

Se você olhar para a pasta src, verá um componente raiz App.svelte e main.js, que é nosso ponto de entrada. Como em React ou o Vue, os aplicativos Svelte são criados usando componentes e, na maioria das vezes, você terá um componente App que atua como o componente raiz que forma a árvore de componentes do seu aplicativo. main.js simplesmente pega esse componente raiz e o instância usando um elemento de destino que existe no public/index.html, e passa props iniciais, que podem ser opcionais.

Novamente, assim como os componentes em React ou Vue, os componentes Svelte podem receber props.

A pasta “public”

Ao desenvolver, a pasta public conterá uma versão não minificada e empacotada do seu aplicativo junto de um index.html no qual o pacote será executado.

Arquivos “.svelte”

Componentes em Svelte são escritos usando a extensão .svelte, contendo toda a lógica, estilo e marcação para um componente. Você está acostumado a algo assim se estiver vindo do mundo Vue.

Um típico arquivo Svelte se parece com:

// MeuComponente.svelte
<script>
  // lógica do seu componente
</script>

<style>
  /* os estilos para sua marcação */
</style>

<!-- A marcação HTML do seu componente -->

É revigorante pensar que você pode simplesmente escrever JavaScript, CSS e HTML! A única diferença são algumas adições de sintaxe específicas do Svelte ao HTML e algumas regras especiais de como o JavaScript é tratado.

Ah, e os estilos serão isolados para o componente descrito no arquivo Svelte, portanto, não é necessário usar classes sofisticadas ou se preocupar com a especificidade fora do componente.

Construindo um componente

Vamos criar um componente ‌Counter e aprender sobre algumas das sintaxes específicas do Svelte. Aqui está nosso ponto de partida:

$ touch src/‌Counter.svelte
<script>
  let count = 0;
</script>

<div>Current count: {count}</div>

As chaves na sua marcação são para interpolação de valores.

Adicionando eventos

Vamos adicionar alguns botões para incrementar ou decrementar o contador:

<script>
  let count = 0;

  function increment() {
    count += 1;
  }

  function decrement() {
    count -= 1;
  }
</script>

<div>Current count: {count}</div>

<button on:click={increment}>Increment</button>
<button on:click={decrement}>Decrement</button>

Como você pode ver, você pode vincular a eventos usando a sintaxe on:nomedoevento. Você pode então passar uma referência para uma função definida em sua lógica JavaScript.

Condicionais

Você pode fazer uso de condicionais usando uma sintaxe especial if. Vamos exibir alguns parágrafos apenas quando nosso valor de contador for maior que 5 ou menor que -5:

<script>
  let count = 0;

  function increment() {
    count += 1;
  }

  function decrement() {
    count -= 1;
  }
</script>

<div>Current count: {count}</div>

{#if count > 5}
  <p>⚠️ That's a little much, don't you think!</p>
{:else if count < -5}
  <p>👻 How low can you go!</p>
{/if}
  

<button on:click={increment}>Increment</button>
<button on:click={decrement}>Decrement</button>

A cláusula :else if é opcional e você também pode usar uma :else.

Vinculando valores bidirecionais

Às vezes, você deseja que um valor seja vinculado de duas maneiras, como quando uma entrada de formulário deve obter seu valor de uma variável em seu componente, mas a alteração de seu valor também deve alterar o valor dessa variável. Isso é fácil de fazer com o Svelte! Vamos ter nossa contagem exibida em uma entrada de formulário e permitir que o usuário defina a contagem atual manualmente:

<script>
  let count = 0;

  function increment() {
    count += 1;
  }

  function decrement() {
    count -= 1;
  }
</script>

<div>Current count: <input bind:value={count} type="number" /></div>

{#if count > 10}
  <p>⚠️ That's a little much, don't you think!</p>
{:else if count < -10}
  <p>👻 How low can you go!</p>
{/if}
  

<button on:click={increment}>Increment</button>
<button on:click={decrement}>Decrement</button>

A ligação bidirecional é realizada com a ajuda da sintaxe bind:value={myVal}. Observe aqui que usamos um input de tipo number e Svelte automaticamente converte o valor de entrada em um tipo Number ao invés das usuais Strings que as entradas de formulário fornecem. Um bom atalho!

Compilando para produção

Quando você estiver pronto para levar seu aplicativo para produção, basta executar o comando build:

$ npm run build

E agora a pasta public terá uma versão minificada, otimizada e empacotada do aplicativo, pronta para ser enviada para uma CDN perto de você! 👍

Aprendendo mais

Este post mal arranhou a superfície e eu pretendo começar uma série inteira para explorar a malandragem do Svelte.

Nesse meio tempo, dê uma olhada no tutorial oficial e nos exemplos, que são dois ótimos recursos para aprender tudo sobre o Svelte.

Minha aposta é que você vai se sentir super produtivo com Svelte em pouco momento!

Créditos ⭐️

• Getting Started with Svelte 3, escrito originalmente por @alligatorio