Svelte comparado com React e Vue

O primeiro artigo sobre Svelte no blog poderia ser uma apresentação sucinta, mas vamos fazer melhor: apresentar o Svelte comparado com React e Vue, que são os 2 principais frameworks JavaScript do momento.

Vamos ser honestos: muitas coisas em desenvolvimento para web são mais difíceis do que deveriam ser. Alguns dias, pode parecer que tudo no mundo do front-end é desnecessária e excessivamente rebuscado e complicado.

O que é Svelte?

Basicamente, você poderia pensar no Svelte como uma estrutura de user interface (UI) de front end semelhante a React, Vue etc. Svelte é o mais novo dentre os grandes, mas parece que, definitivamente, já aprendeu com seus “irmãos mais velhos” e tem muito a oferecer em termos de Developer Experience (DX) e otimização.

Como acontece com qualquer estrutura de front-end, é possível usar o Svelte para construir componentes, que, no desenvolvimento web moderno, são os “blocos de construção” para qualquer UI. Conforme os eventos acontecem e o estado e os dados mudam (por exemplo, um usuário adicionando um item ao carrinho), os componentes são atualizados automaticamente para refletir essas mudanças na interface.

OK, mas isso já acontece com React e Vue… Então, como Svelte é diferente?

Como Svelte é diferente?

Svelte foi criado por Rich Harris, ex-desenvolvedor e editor gráfico do New York Times — na data de publicação deste artigo, trabalhando na Vercel.

O mundo das notícias é rápido, então, as interfaces e visualizações interativas que Harris estava criando para o Times precisavam ser construídas o mais rápido possível. Mas, uma vez que é fundamental que as notícias sejam acessíveis a todos, esses bits de interatividade também devem ser tão pequenos e eficientes, tanto quanto possível.

Harris precisava de uma solução que fosse extremamente rápida e fácil de construir, mas que fosse rápida e fácil para qualquer leitor em qualquer dispositivo ou rede, não importando o quão limitado. Em muitos casos, os enormes bundles JavaScript que são subprodutos de outros frameworks não eram adequados…

Então, Harris decidiu construir sua própria solução. E foi assim que Svelte nasceu.

Desde o início, é possível ficar consistente e agradavelmente surpreso com quão pouco código é preciso para fazer as coisas no Svelte — e como é bem perto do JavaScript, HTML e CSS que todos nós já conhecemos.

De fato, não é incomum ter que desaprender muitas das soluções mais complicadas comuns em outros frameworks (algo comum para os que conhecem e adotam o Svelte).

Em muitíssimos casos que, normalmente, tentaríamos uma solução alternativa ou tropeçaríamos em um problema ao usar outro framework, Svelte é deliciosamente direto.

Comparando Svelte com React e Vue

Conforme mencionado, Svelte é semelhante a outros frameworks front-end. Então, vamos olhar um pouco mais de perto nos detalhes de como o Svelte difere: seu foco build-time em vez de run-time e a simplicidade de sua sintaxe.

O “segredo” de Svelte: build no navegador

Aplicativos Svelte entregam uma excelente performance. Isso é possível porque Svelte tem uma abordagem diferente de outros frameworks de front-end, fazendo o máximo que pode na etapa de build — quando o código é compilado inicialmente — em vez de executar no lado do cliente.

Na verdade, tecnicamente falando, Svelte não é um framework JavaScript; é um compilador.

Explicando melhor, React, Vue e a maioria das outros frameworks front-end são executadas no navegador. Eles primeiro são carregados e depois seus métodos são chamados para executar os código (não muito diferente do jQuery e inúmeras bibliotecas semelhantes). Você pode carregar React, Vue etc. em uma tag de script, em um CodePen, ou então colocá-los em qualquer ambiente que desejar.

Geralmente, há uma ferramenta de build envolvida para reduzir o tamanho do bundle final gerado quando se trabalha com esses frameworks em ambiente de produção. Mas, pelo menos até certo ponto, você está inevitavelmente enviando a própria estrutura para o navegador e a carregando lá.

Svelte não funciona assim; não é possível “carregar o Svelte” no navegador ou brincar com ele no CodePen (embora o Svelte REPL funcione bem). Svelte não é um script.

Em vez disso, para criar um aplicativo Svelte, é preciso instalar o repositório Svelte em sua máquina. Você escreve os códigos, então, o compilador processa o que você escreveu em um JavaScript mínimo e autocontido antes mesmo de chegar ao navegador — não muito diferente de como o Sass é compilado em CSS puro.

Essa abordagem permite tamanhos de bundles extremamente pequenos, o que, por sua vez, traduz-se em melhor velocidade de carregamento e performance. Um bundle menor pode ser enviado ao navegador com mais rapidez e parseado pelo navegador mais rapidamente.

Também, React e Vue usam “virtual DOM” para renderização, que, embora seja mais rápido do trabalhar com o próprio DOM para fazer alterações, ainda tem suas próprias implicações/limitações de desempenho.

De maneira diferente, graças ao compilador do Svelte, não é preciso se preocupar com isso: componentes são vinculados diretamente a seus nós DOM. Para mais detalhes, leia o artigo do próprio Rich Harris “Virtual DOM is pure overhead”.

Criação de componentes Svelte

Uma das coisas mais interessantes no Svelte é sua filosofia “HTML em primeiro lugar” (HTML-first). Com poucas exceções, o código Svelte é HTML e JavaScript inteiramente legível. Na verdade, tecnicamente, é possível chamar o código Svelte de “um pequeno superconjunto de HTML”.

Assim como se escreve componentes em React em .jsx e Vue em .vue, Svelte tem arquivos de componente .svelte. Um componente Svelte, geralmente, tem a seguinte aparência:

<script>
  // Lógica do componente aqui
</script>

{/* HTML aqui */}

<style>
  /* CSS aqui (scoped por padrão!) */
</style>

Para dar uma exemplo real, veja o comparativo entre código Svelte, React e Vue para fazer um botão que conta quantos cliques recebeu:

{/* CounterButton.svelte */}
<script>
  let count = 0

  const incrementCount = () => {
    count++
  }
</script>

<button on:click={incrementCount}>
  Número de cliques: {count}
</button>

import React, { useState } from 'react'

export const CounterButton = () => {
  const [count, setCount] = useState(0)

  const handleClick = () => {
    setCount(count + 1)
  }

  return (
    <button onClick={handleClick}>
      Número de cliques: {count}
    </button>
  )
}