Neste post, nossos desenvolvedores frontend Gustavo Raña e Cristiano Gonçalves falam sobre conceitos, vantagens e desvantagens do Svelte e apresentam cases com o framework. Além disso, eles apontam alguns critérios que devem ser considerados na hora de decidir se ele deve ser utilizado ou não em um projeto. Confira!
O que é Svelte e quais os seus diferenciais?
Svelte é um framework de criação de componentes desenvolvido por Rich Harris em 2016. Se você está se questionando “se eu já uso um framework ou lib, então para que eu vou aprender mais um?”, então confira a seguir 3 diferenças interessantes entre ele e seus principais concorrentes:
Compilação
O Svelte tem uma abordagem totalmente diferente dos seus concorrentes (Vue.js, React etc), tanto que chega ser um pouco radical e inovadora. Ao invés de colocar a responsabilidade no navegador, o Svelte coloca todo o trabalho na etapa de compilação, gerando JavaScript que pode ser entendido pelo navegador sem necessidade de terceiros.
Ou seja, ao fazer o build do projeto, ele interpreta os arquivos “.svelte” e retorna um JavaScript e CSS puro. A parte interessante disso é que se você não utiliza uma das features que o Svelte provê, ela simplesmente não vai aparecer no arquivo final JavaScript, e isso contribui para arquivos menores e performáticos.
Simplicidade
Um dos pilares no qual o Svelte se sustenta é o princípio de Write Less Code. Isso faz com que a criação de componentes, stores e variáveis seja bastante intuitiva, tornando o Svelte um framework com uma das menores curvas de aprendizado (consegue ser mais simples que o Vue.js). Veja o mesmo exemplo de código em diferentes frameworks/lib:
Reproduzimos o mesmo código em React, Vue e Svelte e podemos analisar que a quantidade de código escrito em Svelte é realmente menor. Em relação à quantidade de linhas escritas foram 43 do React, 37 do Vue e 29 do Svelte. Parece pouco visualmente, mas no exemplo em questão ele é 33% menor que o React e 22% menor que o Vue.
Outra coisa que é importante destacar é que o código do Svelte é muito mais legível que o dos outros exemplos. A criação de variáveis e funções é idêntica ao que fazemos no js puro sem precisar entender o funcionamento de uma API.
Reatividade
Uma das principais diferenças do Svelte em relação às outras libs é como ele lida com as mudanças de estado em uma aplicação. Libs como Vue, React e Ember utilizam o conceito de Virtual DOM para gerenciar o estado. Virtual Dom é uma representação do DOM real por meio de um objeto e toda alteração feita no seu aplicativo segue de forma resumida os seguintes passos:
- Aplica as alterações no virtual DOM;
- Verifica as diferenças entre o virtual DOM e o último snapshot
- Caso exista diferença ele aplica as diferenças no DOM real.
O Svelte abre mão dos passos 1 e 2 e faz as modificações diretamente no DOM real. O próprio time do Svelte diz em um artigo que Virtual Dom é uma sobrecarga desnecessária.
O que é Reatividade?
A representação mais simples de reatividade é uma função no Excel em que você muda o valor de uma célula automaticamente e essa mudança reflete nas células relacionadas. Os locais não relacionados são simplesmente ignorados e seu estado não muda.
Em outras palavras, reatividade está ligada à capacidade da nossa aplicação se atualizar à medida que algum dado é alterado. Ou seja, é a capacidade de uma aplicação reagir a mudanças na sua “base de dados”.
O que tem de diferente aqui?
Enquanto alguns frameworks têm um dialeto específico para tratar a reatividade, uma API, o Svelte segue uma ideia totalmente diferente. Ele move toda a lógica de manipulação do estado para a linguagem. A simples declaração de uma variável no Svelte já a torna reativa, mas que é tratado de forma especial nos bastidores em tempo de compilação.
No exemplo acima, vemos o código js gerado após o compilamento. O js gerado mostra a parte de declaração e manipulação do estado em background; o Svelte dá um tratamento especial para suas variáveis, de forma que ele consiga torná-la reativa sem adicionar sobrecarga no navegador e nem complexidade no código, pois é algo que acontece durante sua compilação. Para a gente é apenas uma variável.
Conceitos básicos de Svelte
SFC
Utiliza do conceito de Single File Component (SFC), semelhante ao Vue.js, no qual temos scripts, HTML e CSS no mesmo arquivo .svelte. E em relação às stores, o Svelte não precisa de nada externo para fazer gerenciamento de estado, como vuex, redux ou mobx. O Svelte já conta com módulo para criação de stores.
Criar componentes e propriedades
Para criar um componente Svelte basta ter um arquivo .svelte no diretório. Não precisa exportar, nomear etc. E para criar propriedades para um componente basta exportar uma variável com um valor padrão, como o exemplo abaixo:
Agora esse componente já pode ser importado e utilizado na sua aplicação:
Manipulação de estado
Como mencionado anteriormente, criar uma variável já a torna reativa, então qualquer mudança realizada nela vai repercutir na aplicação:
Declarações reativas (as famosas computeds)
A criação de computeds no Svelte é bastante simples. Aqui também não fazemos uso de nenhuma API, utilizamos apenas javascript puro por meio das labels: uma feature bem desconhecida do JS. Toda declaração usando a label $: se torna uma declaração reactiva/computed. Também podemos usar declarações reativas para executar trechos de códigos:
if/else
foreach
await
Criação e utilização de stores
Pontos fracos do Svelte
Apesar do hype e de ser considerado uma das grandes apostas de 2020, o Svelte ainda é um projeto bastante recente e que não atingiu um nível de maturidade expressivo. Sua comunidade também é pequena, pois ainda está sendo formada, e isso pode dificultar o fluxo de desenvolvimento na hora de buscar soluções para problemas rotineiros.
Quando usar ou não o Svelte?
Algumas coisas precisam ser analisadas antes de optar por usar Svelte em um projeto. Confira os melhores momentos de escolher ou não esse framework:
- Poder de processamento dos aparelhos: a maioria das soluções que existe hoje atende muito bem as necessidades de grande parte das aplicações. Mas se for o caso de uso em aparelhos de baixo processamento (como as máquinas da Stone), o Svelte ganha vantagem em relação às outras;
- Curva de aprendizado: se você é uma pessoa que está aprendendo a programar ou é de outra stack e precisa de uma solução simples de aprender e aplicar em seu projeto, o Svelte é uma excelente opção;
- Maturidade: como comentado anteriormente, o Svelte é uma tecnologia nova e ainda não tem a maturidade que a maioria dos seus concorrentes. Isso faz com que esteja suscetível a grandes mudanças entre versões, o que pode gerar uma carga de manutenção grande a depender do tamanho da aplicação. Então se sua aplicação precisa de uma solução altamente madura, talvez ainda não seja o momento de usar o Svelte.
Cases com Svelte
Stone
Stone é o maior case de Svelte até o momento. O framework é utilizado em mais de 200 mil maquininhas de cartão espalhadas por todo o Brasil. Como podemos ver no tweet a seguir, a justificativa da equipe de desenvolvimento foi que o Svelte foi a solução mais simples e performática para utilizar nas máquinas que têm um hardware limitado.
Cubos League
Também temos um case interno da Cubos. Fizemos uma plataforma para acompanhar os jogos do primeiro campeonato de Fifa da empresa e foi nossa primeira experiência com Svelte. O resultado agradou bastante os usuários e já estamos adaptando a plataforma para outros campeonatos. A decisão em adotar o Svelte se deu por dois motivos:
- Diversão :) - trabalhar com algo novo é sempre emocionante;
- Performance - a gente precisava de uma solução leve e performática, já que a maioria do nosso público a utilizaria pelo celular.
Outras empresas
No site do Svelte é possível ver mais empresas que estão utilizando o framework de alguma maneira:
Ecossistema
- SSR (https://sapper.svelte.dev/)
- Rotas
Svero (https://github.com/kazzkiq/svero)
Svelte routing(https://github.com/EmilTholin/svelte-routing)
- UI Frameworks
Material (https://sveltematerialui.com/)
Bulma (https://c0bra.github.io/svelma/)
Bootstrap (https://bestguy.github.io/sveltestrap/?path=/story/introduction--get-started)
https://smelte.netlify.com/
Referências:
Svelte 3 rethinking reactivity
Svelte o framework javascript que não é um framework
Svelte a era dos frameworks compiladores
Front-end com compilador Svelte
Gostou do conteúdo? Então siga nossa página no Instagram e entre para o nosso grupo no Meetup e saiba quando teremos eventos para compartilhar aprendizados como esse!