Convertendo uma aplicação angular em sveltejs-pt.2
Nesta parte do artigo iremos, expor os componentes desenvolvidos e concluir o artigo.
Link para a parte 1 do artigo
Componentes da aplicação
Nesta aplicação teremos os seguintes componentes:
- Header
- Footer
- Loader
- Error
- Icon
- Badge
- Card
- Search
- EvolutionList
Vamos começar com os componentes mais básicos.
Header(Cabeçalho)
O header principal que contém um título que é composto por um icone e o texto que se torna um link apontando para a rota da home.
No svelte para exibirmos um valor de uma variável utilizamos a seguinte sintaxe:
<tag>{variavél}</tag>Este componente tem 3 props(propriedades):
- bgColor: Prop que recebe qual a cor de fundo que preencherá todo o header
- headerTitle: Prop que recebe o texto que será exibido no header
- txtColor: Prop com a cor da fonte do título
Para utilizar props no svelte temos que simplesmente exportar uma variável interna do componente:
<script>
export let prop
</script>Na utilização do componente passar valor no atributo da tag.
<script>
import Componente from './Componente.svelte';
</script>
<div>
<Componente prop="valorprop" />
</div>Footer(Rodapé)
Footer principal da aplicação que contém algumas informações sobre referências dos ícones, da API, repositório no github do projeto.
Este componente tem 1 prop(propriedades):
- footerTitle: Prop que contém o título principal do footer
Loader
Este é o loader principal da aplicação que é exibido enquanto as informações da API estão sendo carregada, devido à utilização do recurso do await blocks do svelte não utilizaremos as props, seria comum ter uma prop para indicar, por exemplo, para controlar a visibilidade do loader. Na verdade, o comum seria que o estado da visibilidade desse componente fosse controlado por uma store, mas este assunto não cabe num artigo de introdução sobre o framework, mas num futuro próximo podemos incrementar este componente. Aqui utilizamos de animações css(Keyframe) para animar a pokebola.
Error
Componente que será exibido caso ocorra algum erro no consumo das informações da API, aqui temos também um componente que assim como o loader, se aproveita do await blocks, sendo assim, não possuí props.
Icon(Ícone)
No icon(ícone) vamos importar todos os svg’s que se encontram em assets/icons, isso é possível devido ao plugin(parcel-plugin-svg-sprite) que processa os “svg’s” importados na aplicação, gera um aquivo sprite e injeta o sprite no index.html, o arquivo de sprite possibilitando acesso aos svg’s pelo id que é gerado pelo nome do arquivo svg.
Este componente tem 3 props(propriedades):
- iconName: Prop que contém o título do ícone, ou seja, o nome do svg para ser acessado e exibido na tela.
- size: Prop que contém a classe com o tamanho do ícone [sm, md, lg, xl]
- color: Prop que contém a classe da cor do ícone
Basicamente neste componente temos o import de todos os “svg’s”, e no “template” temos uma tag <svg> que recebe as props com as classes de tamanho e cor, e dentro temos uma tag <use> que recebe via a prop o nome do ícone. E temos no <style> do componente um css com as classes de tamanho do ícone.
Aqui podemos utilizar o string template para passar as props de cor e tamanho para o atributo “class” da tag <svg>, e este é um recurso nativo do Javascript que pode ser utilizado no svelte.
<tag class=”{`${variavél} nome-classe`}”>
…
</tag>Badge
A “badge” é um componente bem simples que estiliza uma tag <span> com um pequeno texto, no <style> do componente temos as respectivas cores dos tipos de pokemon, aqui também utilizamos o string template para injetar a classe de cor na tag <span>.
Este componente tem 2 props(propriedades):
- text: Texto que será exibido na badge
- badgeColor: Cor da badge
Card
O componente de card exibe uma imagem no “header” do card, o título contém o número e nome do pokemon sendo um link para a página de detalhes sobre o pokemon e logo abaixo do título temos uma lista de badges com os tipos do pokemon, aliás todo o card tem como wrapper um link para a tela de detalhes. Aqui utilizamos muitos recursos do tailwindcss para ajudar na contrução do card como classes utilitárias de texto(text-xl, font-bold), cores(bg-red-300, border-red-300, text-red-600), medias-queries(xl:, lg:, md:, sm:).
Este componente tem 1 prop(propriedades):
- pkmnObj: Propriedade que contém o objeto com as informações básicas do pokemon como nome, id, imagens(frente, verso)
Para exibir os tipos do pokemon, que é um array, utilizaremos o each block para iterar sob este array e exibir os valores
<ul>
{#each lista as item}
<li>{ item }</li>
{/each}
</ul>Search
O componente de search faz procuras e retorna as informações do pokemon, essa procura pode ser feita pelo número do pokemon(forma mais exata) e pelo nome, mas devido algumas limitações da API o search não funciona perfeitamente, mas faz o básico. Para fazer a procura é preciso inserir os valore e apertar o enter.
Este componente é um form com um input text, que mediante a inserção dos dados e submit do form, obtêm o texto digitado e faz a procura na API que é recebida via props, se a procura obter resultados será exibido uma lista com os resultados com uma miniatura do pokemon e o título se não tiver resultados exibirá uma mensagem de “Sem resultados”.
Para capturar os eventos do form(submit) e do input(blur, keyup), utilizamos a diretiva on:nome-do-evento.
<form on:submit={handleSubmit}>
<input on:keyup={handleKeyup} type="text">
</form>E para fazer o bind(two way databind) do valor do input utlizamos a diretiva bind:value={variavél}
<input bind:value={texto} type="text">Este componente tem 1 prop(propriedades):
- searchApi: Prop que contém o serviço onde será consumido com o texto inserido no input
EvolutionList
Este componente não é um genérico como os mostrados acima, por este motivo se encontra na pasta /custom. Este componente é utilizado na página de detalhes e exibe a listagem com as evoluções do pokemon acessado pela home e indica o pokemon atual. Nesse componente temos um loader interno e também utilizaremos keyframes para fazer o efeito “bounce”.
Aqui utilizamos vários recursos do svelte:
Neste componente temos um “lifecycle method”, que é um método do ciclo de vida, estes métodos são executados durante diferentes momentos da vida de um componente como quando é iniciado ou destruído. Estes métodos são bem comuns nos frameworks como no vuejs, reactjs e angular. Para utlizar estes métodos no svelte devemos importar via “object destructuring” da dependência do svelte.
<script>
import { onMount } from 'svelte';
onMount(() => {
alert('Componente carregado');
});
</script>Utilizamos também os if block, que consiste em renderizar conteúdo mediante uma condição.
<div>
{#if variavél}
<p>conteúdo</p>
{/if}
</div>E por fim o svelte tem uma diretiva para trabalhar com transições, que particularmente achei bem interessante. Para utilizar as transições no svelte temos que importar o efeito via destructuring da dependência do svelte, e aplicar a diretiva na tag desejada.
<script>
import { fade } from ‘svelte/transition’;
</script><div>
<p transition:fade>
conteúdo com transição
</p>
</div>
Conclusão
Agora no final fica a pergunta: Mas será que tivemos alguma vantagem ao reescrever a aplicação com svelte?
Para responder isto vamos aos números dos build do svelte vs angular.
Como vemos o tamanho total da aplicação feita em svelte é só o tamanho do main.js gerado pelo angular. Isso é um ganho significativo em tamanho de bundle, sem contar que no svelte ainda não podemos utilizar o “Code splitting” e separar o Javascript por módulos, o que traria uma redução também para o bundle final.
Apesar de ter uma concorrência entre svelte e angular, acredito que devemos guardar as devidas proporções, pois o svelte originalmente se trata de um compilador e não um framework apesar do angular utilizar o typescript e compilar seu código para Javascript uma vez que o browser só executa Javascript. Acredito que seria mais proporcional comparar o svelte com o stenciljs, que também é um compilador.
Por fim a proposta do svelte é bem interessante seja pela forma de desenvolver os componentes em um único arquivo .svelte, ou seja pelo apelo em utilizar os recursos do Javascript puro como o let/const para declaração das variáveis e o export para utilizar props, o template string para fazer binding dentro dos atributos html ou para exibir informações com a interpolação. Acredito que um ponto negativo, vamos dizer assim, é por não compilar para web components, mas não sei se isto é uma boa estratégia ou se o svelte não deve compilar para web components e como é uma ferramenta ainda em expansão, não temos muitos recursos. Como exemplo, para esta desenvolver esta aplicação tive dificuldade em achar uma biblioteca de roteamento, mas, este problema de ecossistema vai melhorando com o passar do tempo e mais devs adotando o framework isso pode melhorar.
Mas é uma ferramenta recente que está crescendo e, a meu ver tem um futuro promissor junto aos outros nomes do mercado.
Meu artigo teve como intuito apresentar o svelte e seus conceitos básicos. Dúvidas, reclamações, opiniões ou elogios😎, deixe sua mensagem aqui abaixo vamos trocar uma ideia. É isso ae vlw dogs até a próxima.
Link da aplicação:
Repositório da aplicação:
Referências:
