Desenvolvendo uma aplicação com Sapper e Svelte

Tecnologia

Salve, devs! No artigo anterior da nossa série de Svelte fizemos uma breve, mas eficiente, explicação dos conceitos iniciais desse incrível framework. Neste artigo, vamos continuar nossa jornada. Mas, não faremos isso sozinho. Sapper estará ao nosso lado.

Sapper é “um framework para a construção de aplicações web de todos os tamanhos, com uma linda experiência de desenvolvimento e um sistema de arquivos flexível baseado em routing”. Tal definição vem do site dos próprios desenvolvedores, disponível aqui.

Basicamente eles pegaram as ideias utilizadas no Next.js, como a utilização de um <seu-projeto>/pages correspondendo as rotas do seu aplicativo, só que utilizando o paradigma do Svelte – de framework UI que se comporta mais como um compilador. Nosso amigo facilitará o processo para a criação de uma incrível livraria. Para os mais curiosos existe um artigo completo explicando a filosofia por trás dele aqui.

Infelizmente, ainda não temos um CLI para criar um template para nós. A opção mais rápida para iniciar com Svelte+Sapper é utilizar o seguinte template:

# para Rollup

npx degit “sveltejs/sapper-template#rollup” seu-app

# para webpack

npx degit “sveltejs/sapper-template#webpack” seu-app

cd seu-app

npm install

npm run dev & open http://localhost:3000

Fazendo esse passos você receberá a mensagem de grande sucesso. Vamos começar com os preparativos do nosso projeto dessa forma. Não explicarei todo o projeto, pois boa parte dele é javascript, CSS e HTML e não faria sentido. Vou passar pelos principais conceitos de Svelte e usá-lo como exemplo.

Svelte – passando pela documentação

Props

Props servem para passar dados de um componente pai para um componente filho. Aqui as props serão declaradas na tag script como export let <nome_da_prop> = valor default;

Exemplo:

Nesse exemplo tem-se as props de uma datatable que eu fiz para um projeto pessoal. Este componente precisa dos dados e metadados para montar a tabela. “hasSelect” e “hasActionColumn” são referentes às interações com eventos na datatable, para permitir que o usuário interaja com esta.

Logica

 Blocos de lógica controlam muito de nossas views. Em svelte, isso será feito na área do html, dentro de chaves “{}”. Existem as seguintes palavras reservadas: if, each (como o for) e await (para promises).

Powered by Rock Convert

Exemplo:

No mesmo componente, o Datatable, tem-se uma renderização condicional. Ele imprime na tela de acordo com o disponível na prop “data” e trata os dados de acordo com o que se tem em “metadata”.

Eventos

Eventos do DOM são usados para controlar a interação do usuário com o nosso software. Usando a diretiva “on:”, podemos basicamente controlar qualquer evento.

O elemento input tem o evento “change”. No exemplo acima chamamos a função “handleChange”. Na prática, pode-se ter acesso a qualquer evento do DOM dessa forma. Uma lista bem completa de evento está diponível em https://www.w3schools.com/tags/ref_eventattributes.asp

Bindings

Para ligar tags html ao nosso código javascript usamos a diretiva “bind:”, como em “bind:value={nome_da_variavel}”. No último exemplo ligamos o valor do input com a variável “searchText”. Basicamente ela altera o objeto data para mostrar somente o que foi digitado em um campo de busca.

Ciclo de vida do componente

Em VueJS temos os “mounted()”, “created()”, entre outros. Em Svelte temos algo semelhante que são funções importadas diretamente do svelte. São elas: onMount, onDestroy, beforeUpdate, afterUpdate e tick. Tick é o mais diferentão em relação a outros frameworks, ele retorna uma promise que se resolverá assim que qualquer mudança de estado pendente terminar.

Store

Em react e VueJS usamos libs externas para adicionar um store ao nosso projeto. O mesmo não ocorre com svelte, ele vem com um store de fábrica. Existem quatro tipos de store: writable, readable, derived e custom. Dessa forma, podemos deixar parte do estado de um componente disponível para o restante da aplicação.

Neste exemplo, declara-se um readable com o valor inicial null. Readable porque se trata de uma query do servidor e é somente leitura, assim não faz sentido podermos mudar o valor de “sales”. O segundo parâmetro é a function start, que será chamada logo que a variável for utilizada. A função “set”, recebida por parâmetro por “start”, é responsável por definir o valor de sales. No caso ela será chamada dentro de uma promise, quando a requisição terminar. No final, a função “start” retorna a função stop que será chamada quando o componente for destruido.

Classes

Particularmente eu achei muito interessante a forma de escrever estilos no Svelte. Podemos controlar quais classes nosso componente vai utilizar com a diretiva “class:variavel<boolean>”, sendo a variável o nome da classe na sua tag style. O projeto em questão tem alguns exemplos em relação a isso.

Primeiramente importamos um “createEventDispatcher”, que é como alteramos o fluxo de informações no Svelte (como um this.$emit(…) em VueJS). Declaramos uma série de props (shadow, border, inline e divider). Estas são predefinidas como false. No componente usamos a palavra reservada “class:<variavel>”. Uma vez a prop tento valor de true a classe é aplicada ao componente.

Partes de um componente

Em Svelte, assim como em Vue, temos os slots. Slots são elementos filhos dos nosso componentes, uma parte do html que será injetado dentro do componente. Eles podem ser nomeados ou default. É possível ver slots no último exemplo.

Sapper

Sapper é um framework para a criação de aplicações webs usando Svelte. Torna o processo de gerenciamento de rotas muito fácil, basta criar um componente svelte em “src/routes”.

Routing

Como já citado, páginas web ficam em /src/routes na forma de componentes svelte. Rotas do servidor também ficam nesse diretório, mas no formato de arquivos “.js”. Em src/router/_error.svelte tem se a página padrão de erro.

API

A API do Sapper é bem simples de ser utilizada. No exemplo abaixo, utilizei um o store para extrair dados de seção, que alimentei no middleware. A navegação é dada pelo “goto”.

Considerações finais

Sapper deixa a programação em Svelte mais simples e divertida. Svelte tem um conceito bastante promissor e já pode ter espaço no mercado, por isso acredito que valha a pena as horas dedicadas no seu estudo. O que mais me impressiona nestes frameworks é a curva de aprendizado, que é muito rápida. Não há estruturas complexas a ser aprendida. Basicamente é como se estivéssemos programando em javascript com html e css. Mais impressionante ainda é que todo o projeto tenha ficado com apenas 900 kb, mesmo tendo utilizado o tailwind como css e não tendo configurado nenhuma otimização de build. Estou utilizando esse projeto como um verdadeiro playground de aprendizado. Você pode acessá-lo em: https://github.com/rbentivenha/bookstore

Referências

https://svelte.dev/tutorial/

https://svelte.dev/blog/sapper-towards-the-ideal-web-app-framework