Get best of the week

É hora de esquecer o React e atualizar para o Svelte?

Cada ano, um Estado de JavaScript estudo é publicado que resume os resultados de uma pesquisa que examina o estado atual do ecossistema JavaScript. Este estudo abrange estruturas front-end, desenvolvimento de servidores e dispositivos móveis, testes, recursos populares para desenvolvedores e muito mais.

Tudo nele, é claro, gira em torno do JavaScript. Portanto, se você usa JS para desenvolvimento da web, recomendo que você analise o State of JavaScript, se ainda não o fez.

Para mim, um dos resultados mais interessantes do State of JavaScript foi a atenção inesperada daqueles que participaram da pesquisa para a estrutura de front-end do Svelte .

No ranking geral das principais ferramentas de front-end (com base em indicadores de conhecimento da estrutura, interesse e satisfação com ela), Svelte apareceu em segundo lugar. Ele vai para lá logo após o React , à frente de ferramentas conhecidas como Vue.js , Preact , Angular e Ember .
Isso me chocou um pouco, pois o Svelte é uma ferramenta relativamente nova, tanto em termos de idade quanto em termos de paradigma de desenvolvimento de software.


Classificando estruturas de front-end com base em pesquisas sobre o estado do JavaScript

Sei que muitos de vocês podem ficar indignados aqui e dizer que React e Svelte não são, no entanto, estruturas, mas bibliotecas. Eu sei disso, mas o relatório de pesquisa não foi escrito por mim, então vamos encerrar a questão da terminologia.

Eu descobri um exemplo de projeto de modelo Svelte e criei um pequeno aplicativo Hello World.


À esquerda, está o projeto React mais simples. À direita, há um projeto semelhante baseado no Svelte,

embora esse projeto simples não tenha sido difícil de levar a um estado funcional, alguém que escreveu anteriormente no React precisará de algum tempo para dominar o Svelte.

Vale a pena aprender Svelte? Talvez estejamos apenas diante de outra coisa da moda que desaparecerá tão rapidamente quanto apareceu? Eu proponho descobrir.

Propósito do estudo


Gostaria de responder à seguinte pergunta: "Devo parar de perder tempo aprendendo a reagir e começar a lidar com o Svelte?"

Procuraremos a resposta para essa pergunta explorando as diferenças fundamentais entre React e Svelte. Isso nos permitirá entender quais qualidades únicas cada uma dessas ferramentas possui. Como resultado, descobriremos em qual vale a pena investir.

Começamos com uma revisão de cada uma das bibliotecas, depois conversamos sobre seus prós e contras e depois tiramos conclusões.

Reagir


Nos últimos dois anos, literalmente, todo mundo falou sobre o React. Essa biblioteca, criada pelo Facebook, rapidamente capturou o mundo do desenvolvimento web. Agora, é uma ferramenta de desenvolvimento web que ocupa o primeiro lugar no mundo (a verdade, a resposta para a pergunta “número um” ou não depende de quem faz essa pergunta).

A biblioteca React, em grande parte graças à comunidade em torno dela, está crescendo mais rapidamente atualmente do que nunca. E embora não haja sinais de desaceleração nesse crescimento.

Aqui estão três recursos do React que tornam essa biblioteca particularmente atraente:

  1. Natureza declarativa.
  2. Estrutura de aplicativo baseada em componente.
  3. Facilidade de uso em termos de integração em uma pilha de tecnologia existente.

A natureza declarativa do React é o que permite criar interfaces de usuário interativas. É suficiente para o programador simplesmente projetar os elementos visuais do aplicativo para cada estado, após o qual o React fará o resto. Isso simplifica a leitura e a compreensão do código, facilita a depuração.

Como o React faz o resto? Através do uso da tecnologia DOM virtual. A determinação de quais partes do DOM precisam ser atualizadas é realizada nas entranhas da biblioteca, em um nível intermediário entre o código escrito pelo programador e o DOM real. Graças a essa tecnologia, altas velocidades de renderização de página podem ser garantidas.

A biblioteca React foi projetada para que não importa exatamente quais tecnologias são usadas na pilha de ferramentas do desenvolvedor. O front-end do React pode ser "parafusado" a qualquer coisa. Por exemplo, back-end baseados em Node.js , Ruby on Rails , Spring Boot , PHP e assim por diante. Esta biblioteca é completamente neutra em relação ao que terá que interagir.

Por que alguns chamam React de "biblioteca" e outros chamam de "framework"? Para criar um determinado aplicativo, juntamente com o React, você precisa usar bibliotecas adicionais usadas para controlar o estado do aplicativo, rotear e interagir com várias APIs. Se você criar um modelo de projeto React usandocreate-react-app - não terá um certo conjunto de ferramentas que se poderia esperar do quadro.

Svelte


Svelte é uma ferramenta criada para mudar a situação no campo do desenvolvimento de front-end. Aqui está um bom vídeo sobre o Svelte 3, no qual Rich Harris, criador do Svelte, fala de maneira muito interessante e emocional sobre essa biblioteca. Se você ainda não assistiu esse vídeo, recomendo dar uma olhada nele.

Nesta apresentação, o histórico da programação reativa é bem apresentado, as falhas inerentes à implementação tradicional de mecanismos reativos são destacadas e a solução para os problemas correspondentes é apresentada.

Muito do que pode ser atribuído aos pontos fortes de React é o fundamento de Svelte. Rich Harris conhece muito bem os prós e os contras dos internos do React.

O React mantém a interface atualizada e executa outras ações diretamente no navegador. Svelte faz seu trabalho durante a construção do projeto. Essa é a principal diferença entre React e Svelte. Aqui está o que a documentação do Svelte diz sobre isso: "O Svelte converte seu aplicativo em código JavaScript perfeito durante a construção do projeto e não interpreta o código do aplicativo enquanto está em execução".

O Svelte não usa uma técnica como comparar o DOM real e virtual.

O compilador Svelte pega um componente declarativo e o transforma em um código eficiente, imperativo e de baixo nível que interage diretamente com o DOM.

Como o Svelte usa o compilador, não o DOM virtual, isso permite reduzir a carga no navegador, aumentar a velocidade das páginas e facilitar a coleta de lixo do mecanismo JS do navegador. O navegador não precisa resolver algumas tarefas ao executar o código da página, o que melhora a produtividade dos projetos.

É verdade que, como React, o Svelte usa componentes escritos em um estilo declarativo. A maior parte da diferença entre React e Svelte começa depois que eles constroem o projeto Svelte.

Pontos fortes e fracos de React e Svelte


Vamos falar sobre os pontos fortes e fracos das bibliotecas estudadas.

▍ Pontos fortes da reação


  • Forte apoio da comunidade.
  • Muitas bibliotecas para testar código escrito com base no React.
  • Suporte TypeScript.
  • Ferramentas para desenvolvedores de qualidade.
  • , .
  • React-.

▍ Svelte


  • , , Svelte.
  • - (HTML, CSS, JS).

    • JSX .
  • .

    • Svelte- 40% , React-.
  • ( ).
  • .

▍ React


  • DOM — .
  • .
  • .
  • - React.
  • JSX- .

▍ Svelte


  • ( React) .
  • TypeScript.
  • , , , .
  • , Svelte ( , ).


Voltando à nossa pergunta: "Devo parar de perder tempo aprendendo a reagir e começar a lidar com o Svelte?"

Honestamente, comecei a trabalhar neste artigo, esperando chegar à conclusão de que o Svelte é uma tecnologia muito jovem e que não vale a pena investir particularmente muito tempo em seu estudo. Mas depois que descobri o que estava acontecendo, depois que entrei no básico, fiquei muito intrigado e impressionado com o que me foi revelado, com o tipo de dinâmica de Svelte que senti.

É indiscutível que os projetos Svelte têm um desempenho muito bom.

As idéias por trás do Svelte parecem ousadas e progressivas. O tamanho da comunidade Svelte está crescendo. Estou certo de que o sucesso das ferramentas front-end (assim como a amplitude de sua distribuição) depende muito da comunidade e de como os desenvolvedores adotam essas ferramentas.

Como resultado, podemos dizer que, se o Svelte e tudo relacionado a esta biblioteca continuar se desenvolvendo no mesmo ritmo, podemos esperar a ampla disseminação dessa tecnologia.

É claro que o Svelte está apenas começando sua jornada, por isso ainda não sabemos sobre esses problemas, e pode haver muitos deles que aparecerão inevitavelmente durante a implementação do Svelte em projetos reais. Não sabemos como os programadores irão contornar esses problemas, como os desenvolvedores de bibliotecas irão melhorá-lo.

Quando a biblioteca React apareceu pela primeira vez, parecia uma ferramenta de ponta que não possui desvantagens. Porém, com o desenvolvimento e a disseminação do React, os desenvolvedores da Web precisam lidar com várias situações difíceis, precisam procurar soluções alternativas, compromissos. E os desenvolvedores da própria biblioteca também precisam trabalhar duro para melhorá-la.

Tenho certeza que Svelte está esperando o mesmo. Afinal, o mundo do desenvolvimento web é extremamente volátil.

Se você ainda não está pronto para deixar o React, eu aconselho você a monitorar de perto o Svelte. Essa biblioteca pode se tornar um forte concorrente para reagir muito mais rápido do que você imagina.

Queridos leitores! O que você acha do Svelte?

More articles:


All Articles