16

Atualmente, muito se fala sobre os web components e custom elements, e junto com grandes nomes, como Angular, React, Vue e Polymer, recentemente ouvi o nome Svelte JS.

  • O que é Svelte JS? É mais um framework para disputar o mercado de componentes web?
  • Se não, qual a relação entre o Svelte JS e outros frameworks?
  • A função dele é a mesma que a do Stencil JS, de "compilar" o componente para código vanilla?
  • Quais são os diferenciais desta ferramenta e quais foram as necessidades que estimularam sua criação que as outras ferramentas não satisfazem?

2 Respostas 2

5
+25

Sim, mais um framework/biblioteca, porém com algumas diferenças, assim como está descrito na própria página inicial.

  • Escrever menos código
  • Diferente de React e Vue, ele não trabalha com DOM Virtual, o que garante uma maior velocidade ao cuidar diretamente do DOM Real
  • Mais fácil de gerenciar estados do que os outros componentes
  • Por não usar um framework/biblioteca por de trás, seu bundle fica incrivelmente menor do que os outros, e isso garante também maior velocidade na execução dos códigos (respondendo a pergunta, sim, ele compila)

De acordo com o Google Trends, sua popularidade tem crescido bastante, principalmente nos últimos meses, embora ainda não seja bom usar em projetos grandes, já que existe algumas desvantagens: ainda muito recente, não tão amadurecido quanto aos outros frameworks/bibliotecas, poucas informação na internet sobre ele...

Felizmente, já existem algumas grandes empresas utilizando, o que dá uma certa garantia de que o projeto tem crescido e tranquilidade para usar em projetos pequenos ou médios. Para um projeto pessoal, pode ser uma ótima ideia utiliza-lo, já que somente você usará e não exigirá que outras pessoas de uma equipe aprendam.

E respondendo a última pergunta: Quais são os diferenciais desta ferramenta e quais foram as necessidades que estimularam sua criação que as outras ferramentas não satisfazem?

Eu acredito que o que estimulou a criação seja justamente as vantagens descritas acima. Manipular DOM diretamente é incrivelmente complicado. As DOM Virtuais são úteis e foi uma ótima forma de realizar essa tarefa, porém com essa ideia do bundle ser compilado e manipular a DOM diretamente, tem diversos benefícios: menos código para escrever, execução mais rápida, bundle menor. Pode ser que os outros frameworks resolvam posteriormente adotar esse método também.

Basicamente é um novo processo de se fazer a mesma coisa que tem alguns outros benefícios. Ele não foi criado por que as outras ferramentas não satisfazem tais requisitos, mas é apenas uma forma melhor de se fazer a mesma coisa, mas o que se faz com Svelte, se faz com os outros frameworks/bibliotecas.

O quão interessante é usa-lo?

Depende muito! Mesmo com essas vantagens descritas, ainda optei por React para meu projeto pessoal pois adquiri um tema para isso, então o tempo que eu economizaria em utiliza-lo (escrever menos códigos) eu gastaria desenvolvendo todo o tema. Vários fatores devem ser analisados antes de utiliza-lo.

Mas um fato que ninguém pode negar é: ele tem crescido e já está pegando sua fatia nesse mercado.

6
  • Legal, mas fiquei um pouco confuso quando à afirmação de velocidade em relação ao DOM. Algo que fez o React explodir em popularidade foi justamente prometer ser mais rápido que outras bibliotecas por utilizar o DOM virtual. Afirmar que o Svelte é mais rápido por não usar o DOM virtual parece ser conflitante. Sabe como ele poderia ser mais rápido mesmo utilizando o DOM real?
    – Woss
    Commented 12/07/2019 às 13:08
  • Na página inicial, em 'No virtual DOM', no link learn more, explica justamente isso. Commented 12/07/2019 às 13:12
  • Mas não acha que valeria a pena completar a resposta com um resumo disso, visto que parece ser uma das principais diferenças dele?
    – Woss
    Commented 12/07/2019 às 13:14
  • Ok, farei isso depois com mais tempo depois. Mas como minha resposta já ficou grande, não quis alongar ainda mais... Mas novamente, digo: não é que o Virtual DOM seja ruim, pelo contrário ele prometeu ser mais rápido e realmente foi. Mas isso se comparado a época quando foi dito! Atualmente Virtual DOM ainda é interessante, mas o Svelte apenas fez um novo processo pra fazer a mesma coisa, só que mais rápido. Commented 12/07/2019 às 13:22
  • Achei uma resposta aqui no stack que já responde o por que Virtual DOM não necessariamente é mais rápido do que manipular DOM diretamente. Resumindo: a função do Virtual DOM é manipular o DOM. Ou seja, é mais um 'passo' no processo até chegar ao DOM Real. Se o código que irá manipular o DOM diretamente for BOM, ele será mais rápido do que o Virtual DOM. Se o código for porco, o Virtual DOM é mais rápido. O Svelte gera um código BOM para manipular o DOM, e consequentemente ser mais rápido do que o Virtual DOM. Commented 12/07/2019 às 13:35
2

Apesar da bela resposta do Gleidson Henrique, gostaria de adicionar mais alguns pontos baseado nas suas dúvidas:

O que é Svelte JS? É mais um framework para disputar o mercado de componentes web?

Svelte não é um framework. Svelte é um compilador que interpreta arquivos .svelte e transcreve em JavaScript, que por sua vez, em tempo de execução, escreve o HTML e CSS associados ao componente em execução no momento. Além disso, o Svelte consegue interpretar arquivos JavaScript e TypeScript como módulos e a sintaxe de script dos arquivos .svelte são praticamente idênticas ao padrão JS com alguns extras.

Da forma como Svelte funciona, cada arquivo .svelte é um componente, já em outros frameworks, é possível ter mais de um componente por aquivo.

Se não, qual a relação entre o Svelte JS e outros frameworks?

Por ser um compilador que da saída em HTML, CSS, e JS. Ele não pode ser comparado exatamente como um framework e não tem relação com outros frameworks JS. Apesar que, outros frameworks podem ser compilados usando o Svelte.

O que pouca gente sabe, é que essa abordagem não é nova, ha pelo menos uns 10 anos, existe um outro projeto chamado Haxe. É uma linguagem feita em cima de um compilador chamado Neko, escrito em OCaml, que também da saída de código nativo para web e outras plataformas.

A função dele é a mesma que a do Stencil JS, de "compilar" o componente para código vanilla?

Praticamente isso, de forma genérica, a função de um compilador em sí é interpretar uma linguagem e transforma-la em uma linguagem que o computador consiga entender, nesse caso ele apenas transforma arquivos .svelte em algo que os browsers possam executar.

Quais são os diferenciais desta ferramenta e quais foram as necessidades que estimularam sua criação que as outras ferramentas não satisfazem?

O diferencial está no fato do Svelte ser um compilador. Isso permite que ele adicione recursos a linguagem que abstraem outras funcionalidades que talvez vc faria ou que outros frameworks fazem. Uma desvantagem nisso é que pelo fato do compilador dar saída em JS, isso limita ele a tudo que é possível fazer em JS.

No meu caso, eu ja fiz vários projetos em React e comecei a trabalhar com Svelte pelo fato dele não ser uma runtime, de ser mais produtivo e principalmente por sentir que não estou fazendo gambiarra.

Svelte consegue trabalhar de uma maneira muito mais natural com código reativo, com transições e animações, integra perfeitamente bem com frameworks imperativos com D3 e ThreeJS.

O fato de ser uma tecnologia nova é uma desvantagem do Svelte, React, Vue e Angular, já estão muito difundidos e muitos devs de várias equipes, se sentem seguros com eles, o que impacta na popularidade do Svelte.

O fator equipe é o único ponto que me faria voltar pra React hoje, fora isso, consigo fazer exatamente tudo que faria em React, só que melhor, usando Svelte.

1
  • 2
    Muito bom seu comentário amigo, corrigiu alguns errinhos que eu havia falado. Obrigado. :) Commented 24/02/2021 às 12:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .