# Svelte comparado com React e Vue

> Svelte vs React vs Vue: comparação completa de frameworks JavaScript. Análise técnica, performance e casos de uso ideais para cada biblioteca. Escolha!

URL: https://dpw.dev/javascript/svelte-react-vue/  
Publicado em: 2021-11-18  
Categoria: javascript  
Tags: analise, react, svelte  
Autor: Tárcio Zemel

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](https://twitter.com/Rich_Harris/status/1458822051263823875).

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.

<figure>

https://twitter.com/jjcollinsworth/status/1155265498675929088

<figcaption>

Tradução: "Svelte é React sem todas as besteiras."

</figcaption>

</figure>

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

![](/images/blog/svelte-react-vue/svelte-react-vue-1024x266.webp)

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](https://svelte.dev/repl/hello-world) 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.

<figure>

![Diagrama que compara Svelte com React mostrando os passos que cada um faz do componente à renderização no DOM.](/images/blog/svelte-react-vue/svelte-comparado-com-react-e-vue.webp)

<figcaption>

Svelte vs. React: do componente ao DOM

</figcaption>

</figure>

Essa abordagem permite **tamanhos de bundles extremamente pequenos**, o que, por sua vez, traduz-se em melhor velocidade de carregamento e [performance](/tag/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"](https://svelte.dev/blog/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:

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

<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:

```html

<script>
  let count = 0

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

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

```html
// CounterButton.jsx

  const [count, setCount] = useState(0)

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

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

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml