Por que Svelte? A próxima tendência em frameworks web.

Primeiro, o que é Svelte?

criado em 2016, Svelte é uma ferramenta para construir aplicações web com velocidade.

É similar a frameworks JavaScript como React e Vue, onde seu objetivo é fazer a vida do desenvolvedor mais fácil na hora de criar interfaces.

Porém tem uma diferença crucial: Svelte converte seu app para JavaScript puro em build time,

ao invés de interpretar seu código em run time, como os frameworks citados anteriormente. Isso significa que você não paga os custos de performance e seu app criado com Svelte tem apenas o necessário de código para rodar, sem nada extra sendo carregado pelo navegador.

Definição tirada do tutorial oficial do Svelte. (link)

Rich Harris, o criador de Svelte, recentemente foi contratado pela Vercel, empresa criadora do famoso framework para React, o Next.JS e agora é focado full-time em desenvolver e aprimorar o Svelte e o SvelteKit (SvelteKit é para o Svelte o que o Next é para o React ou Nuxt para o vue) com sua equipe. O que na minha opinião é um grande passo, deixando o Svelte com uma cara muito menos “caseira”. Para muitas empresas, a adoção de frameworks como React e Vue vem pela facilidade que os frameworks trazem, claro, mas principalmente pelo ecossistema rico e suporte full-time, financiamento e tudo mais que pode estruturar uma empresa como a Vercel, por exemplo.

Em uma entrevista recente chamada The Future of Svelte (O Futuro do Svelte), Richard Harris descreveu seu projeto como um Framework Web e não um Framework JavaScript. Acho muito interessante esse approach do svelte e espero fazer você entender por que não é “só” JavaScript nos próximos tópicos.

1 - Por que usar Svelte/SvelteKit em primeiro lugar?

Nessa entrevista que citei, Rich Harris diz:

“Não interessa o que você está criando, sua vantagem comparativa é essencialmente limitada em quão rápido você consegue entregar as coisas. E SvelteKit vai deixar você entregar as coisas mais rápido. [...] Eu acredito que ir de React para Svelte vai fazer com que escreva mais coisas, mais rápido. Nós temos toda uma tese sobre como Svelte é uma linguagem UI que foi criada explicitamente para solucionar esse problema e permitir você escrever coisas de maneira mais idiomática.

E é a mais pura verdade. Quando você começa a construir com Svelte você sente a simplicidade de estar criando algo como seus primeiros projetos com HTML com toda a estabilidade e performance (tanto em produção quanto para o desenvolvimento) de um projeto seguindo todas a tendências atuais. Li uma vez na internet que Svelte é quase como um superset para HTML e eu adorei essa definição hahaha.

2 - Ecossistema Crescente

Há uma postagem mensal no blog “What’s new in Svelte” que é regularmente preenchida com anúncios de novos projetos interessantes no ecossistema Svelte.

Acho que parte da razão pela qual esse é o caso é a empolgação atual em torno do Svelte, mas estou convencido de que a outra parte tem a ver com a arquitetura técnica do Svelte - que falaremos em outro tópico futuramente nessa lista - O Svelte Fall Summit 2021 viu anúncios de várias bibliotecas criadas especificamente para serem usadas com Svelte como:

svelte-cubed - uma biblioteca de componentes three.js
svelte-fsm - uma biblioteca de máquinas de estado finito
várias ferramentas de SSG (Static Site Generation) como Primo, Plenti e Slinkity...

Alguns projetos open-source demonstraram seu suporte para o Svelte durante esse Summit, juntamente com:

vest - uma estrutura para validação de formulários
unplugin-icons - uma biblioteca que permite o acesso a dezenas de milhares de ícones SVG

E todo esse ecossistema só tende a crescer conforme o número de usuários do Svelte também cresce.

3 - Svelte Stores

Svelte tem uma abordagem diferente do React quando se trata do estado global do aplicativo.

Embora o React tenha uma posição muito aberta sobre esse tópico - oferecendo uma variedade de utilitários que um desenvolvedor precisa integrar corretamente como achar melhor... Svelte oferece uma abordagem padrão na forma de SvelteStores - que parecem uma extensão natural para módulos JavaScript.

Na minha opinião isso resulta em uma maior produtividade ao desenvolver com Svelte, já que o estado global da aplicação é um recurso tão comum que acaba sendo reinventado desnecessariamente muitas vezes em outros frameworks.

4 - Svelte é um COMPILADOR

Ao invés de ser uma biblioteca ou framework como seus concorrentes Svelte é um compilador. Ele pega seu código Svelte e compila ele em JavaScript puro, sem adicionar ou remover nada.

Quando seu navegador carregar uma página feita com Svelte, ele não precisará importar bibliotecas externas ou qualquer coisa do tipo e o tamanho do bundle final enviado para o navegador é significantemente menor.

5 - A Reatividade do Svelte

No React, a reatividade é fortemente acoplada à configuração do estado e renderização da UI. No Svelte, a reatividade é mais fundamental e pode ser aplicada a qualquer valor JavaScript a qualquer momento, independente das renderizações do componente.

Outra grande diferença em como tratam a reatividade pode ser visto na forma como uma árvore de componentes é renderizada em cada um deles:

No React, uma atualização no estado de um componente pai pode causar uma nova renderização de seus componentes filhos. Para alcançar um desempenho de renderização mais otimizado, os desenvolvedores precisam desativar essas renderizações e controlá-las com hooks como o useMemo() por exemplo.
No Svelte, para que as atualizações sejam propagadas para a interface, o desenvolvedor precisa ativar essas atualizações explícitamente, o que torna o comportamento padrão do Svelte mais eficiente que o React.

6 - Curva de aprendizado

Em todas as pesquisas que fiz sobre Svelte e incluindo minha própria experiência mostra como Svelte tem uma curva de aprendizagem muito tranquila. Além da ótima documentação e do tutorial que o próprio Svelte disponibiliza como um playground, é possível encontrar uma quantidade razoável de conteúdo na internet se souber falar Inglês.

Sua sintaxe é descomplicada e acredito que a barreira é bem menor se for seu primeiro framework entre React, Vue ou Angular. Depois de um tempo codando Svelte, me senti um pouco “enguiçado” nos meus projetos React.

7 - SvelteKit

O SvelteKit é um framework para criar aplicações web de todos os tamanhos, com uma linda experiência de desenvolvimento e um sistema de rotas baseados em arquivos flexível.
Ao contrário te SPAs (single page apps), SvelteKit não compromete o SEO, aprimoramento progressivo ou a experiência do primeiro carregamento — mas ao contrário dos SSR (Server-rendered apps) tradicionais, a navegação é instantânea para aquele feel de aplicativo.

Descrição retirada do site oficial

Em outras palavras, o SvelteKit está para o Svelte assim como o Next está para o React.

Entretanto, SvelteKit ainda está sendo preparado para sua versão 1.0 mas mesmo assim já entrega muito. Acredito que com Rich Harris trabalhando ao lado da equipe do Next, esse lançamento do SvelteKit 1.0 pode ser ainda mais poderoso do que já promete.

8 - Ergonomia Svelte

A ergonomia de uma ferramenta de desenvolvimento é o principal fator determinante na experiência do desenvolvedor e nesta categoria o Svelte está a frente de qualquer outra ferramenta de criação de UIs

No mundo React, a mudança de componentes baseados em classes para componentes funcionais com hooks foi saudada como uma grande melhoria na ergonomia de escrever um aplicativo React.

Da mesma forma, agora argumenta-se que ao passar de React with Hooks para Svelte, espera-se ver melhorias semelhantes à ergonomia.

Svelte manteve a natureza declarativa de seus antecessores, mas oferece melhorias como:

Menos linhas de código boilerplate
Há uma melhor composição do código da interface do usuário com as outras partes da aplicação

Tendo isso em mente, pode-se argumentar que Svelte é a próxima geração de frameworks para UI.

9 - Performance

Acho que a maioria dos tópicos acima são bem pessoais e refletem a minha visão ao usar Svelte. Entretanto, algo que é indiscutível é seu desempenho.

Ser um compilador abriu Svelte para melhorias de desempenho que estão simplesmente fora do alcance de bibliotecas e frameworks tradicionais. A melhoria óbvia é o fato de que o Svelte não envia seu próprio pacote JS de biblioteca de interface do usuário para o navegador, como citei anteriormente. Quando um usuário visita a página final, o que é enviado para ele é a quantidade exata de código JS para os recursos dinâmicos do aplicativo e só.

Durante o Svelte Summit, vimos as comparações do mesmo aplicativo sendo criado no Svelte, React e Vue, e o aplicativo Svelte supera as outras bibliotecas em todas as métricas, incluindo: Code Size, Bundle Size, First Content Full Paint e speed index.

Um fator importante na performance do Svelte no navegador é o fato de que o Svelte acabou com a noção de um virtual DOM. Reduzindo seu consumo de memória em relação a outros frameworks. A abordagem sistemática da equipe da Svelte para alcançar os ótimos resultados de desempenho em geral também é visível na maneira como eles abordaram os pacotes NPM e o gerenciamento de suas dependências - o que apenas mostra uma enorme quantidade de atenção e cuidado.