🕺🏾 🤳🏾 🍆 Por que você deve usar o Svelte para seus projetos da web 🌋 🦆 🦕

Se você é um desenvolvedor web, provavelmente já ouviu falar de Svelte Js. No entanto, acho que você se perguntará por que está ganhando popularidade e quais vantagens interessantes ele tem para desenvolvedores da web.

Faremos uma breve revisão dessa estrutura, suas vantagens e desvantagens, para que, após a leitura, você possa decidir se ela se adequa ao seu projeto ou não.

A estrutura Svelte apareceu em 2018 e foi uma sensação. Tanto iniciantes quanto desenvolvedores experientes gostaram de usá-lo para todos os tipos de projetos. Nesse sentido, vamos dedicar um pouco de tempo para esclarecer o que torna o Svelte tão acessível.

O que é o Svelte e quais são suas vantagens?

Para alguns desenvolvedores, o Svelte JS é conhecido como a estrutura front-end mais popular que não foi incluída nos seis principais estados do JavaScript em 2018. Existe um artigo da Wikipedia sobre o Svelte , mas ele apareceu apenas seis meses atrás, portanto, não há muita informação.

O Svelte foi concebido como uma estrutura, mas, de fato, é uma estrutura de componente projetada para compilar componentes no estágio de construção. Graças a essa abordagem, você pode fazer upload de apenas um bundle.js por página para renderizar o aplicativo inteiro.

Simplificando, com o Svelte, você escreve componentes usando HTML, CSS e JavaScript. Durante o desenvolvimento, a estrutura os compila em pequenos módulos JavaScript independentes. Isso garante que um mínimo de trabalho seja feito por parte do navegador, o que torna o aplicativo Web mais rápido e a escrita de código é mais fácil.

Aqui está uma breve descrição do Svelte dos autores:

Fonte: Svelte.dev

Graças a tudo isso, o Svelte Mobile é um dos líderes em termos de "desempenho de inicialização". Outros tipos de otimização não. O Svelte alcança resultados tão impressionantes através do uso de um compilador JavaScript acessível em navegador, e não de terceiros. Assim, obtemos uma ótima solução para o desenvolvimento da web, entre outras estruturas populares e linguagens de programação .

Portanto, o Svelte obtém capacidade de resposta precisa do código e maior produtividade, o que é um excelente anúncio de estrutura para desenvolvedores e proprietários de empresas. Além disso, outra vantagem do Svelte para desenvolvedores é a conveniência para iniciantes e uma estrutura de sintaxe clara.

Visão geral da arquitetura Svelte

Svelte é popular por sua velocidade em comparação com outras bibliotecas. Isso ocorre devido à eliminação da fase de carregamento da estrutura para a construção de um DOM virtual . Em vez de usar a ferramenta no tempo de execução, o código Svelte é compilado no JS no estágio de construção. Isso significa que o aplicativo não precisa de dependências para executar.

Como funciona o Svelte

Vou tentar explicar o princípio de Svelte nas palavras mais simples:

Você abre o site.
Renderize a página em JS puro.
Você passa a página para seus colegas [se você trabalha mais de um].
Os colegas esperam reatividade real da página.
Se o encontrarem, o aplicativo / site deve funcionar sem problemas, não apenas no modo de teste, mas também na batalha.

JS Svelte vs. Reagir vs. Vue: comparação

Muitos engenheiros comparam o Svetle.Js com outras estruturas. As alternativas mais famosas são React e Vue.

As estruturas da Web mais populares, como Angular, React e Vue.js, são baseadas no princípio de aguardar o carregamento do código para criar um DOM virtual. Somente então eles poderão renderizar a página usando a biblioteca.

Por exemplo, o React, desenvolvido pelo Facebook em 2011, tornou a programação reativa bastante popular. Essa estrutura começou a usar o DOM virtual. Ele separa o processamento de eventos, manipulação de atributos e atualização manual do DOM que, de outra forma, seriam necessários para criar o aplicativo. Esse foi o fator chave que tornou o React tão atraente.

Svelte, enquanto isso, é um compilador. Ele compila seus componentes em JavaScript em vez de confiar em conceitos como o Virtual DOM para atualizar o DOM do navegador. Graças ao texto datilografado Svelte, tornou-se possível criar o aplicativo com muito mais eficiência. Você pode gravar seus componentes usando CSS, HTML e JavaScript e, durante o processo de construção, o Svelte os compila em módulos JavaScript separados.

Como resultado, o Svelte 3 cria um DOM de menor peso. Por exemplo, a implementação de TodoMVC no Svelte na forma compactada pesa 3,6 KB. Para comparação, o React mais o ReactDOM, mesmo sem o código do aplicativo, pesam aproximadamente 45 KB na forma compactada. O download completo do TodoMVC no React leva 10 vezes mais tempo no navegador do que no Svelte.

É verdade que é difícil avaliar imparcialmente o desempenho do Svelte em comparação com o React, pois as estruturas são muito diferentes em essência.

E, no entanto, se você quiser saber mais detalhes sobre a comparação prática desses frameworks da web, será útil assistir a este vídeo.

De acordo com o GitHub , o Svelte Native é significativamente mais rápido que o Ember, Angular, React, Ractive, Preact, Mithril ou Riot. É ainda capaz de competir com o Inferno, que é provavelmente a estrutura de interface do usuário mais rápida do mundo no momento. No final, essa é uma vantagem decisiva, porque uma velocidade maior de aplicação pode impulsioná-lo à frente da concorrência.

Componentes Svelte

Vamos nos aprofundar nos detalhes da estrutura Svelte. Qualquer componente do PWA [Progressive Web Application] no Svelte pode conter três seções: script, estilo e modelo. Aqui está uma descrição mais detalhada do que se entende:

Tag de script: bloco JavaScript opcional com declarações de funções e variáveis usadas dentro do componente.

Etiqueta de estilo: outra unidade opcional. Pense nisso como uma tag de estilo HTML comum, com uma diferença crítica. As regras descritas dentro deste bloco se aplicam apenas ao componente atual. A aplicação de um estilo a um elemento Pnão afetará todos os parágrafos da página. Isso é ótimo, porque não há necessidade de criar classes para diferentes elementos. Ou seja, você simplesmente não poderá redefinir acidentalmente outra regra de estilo.

Bloco de modelo: este é o último e único bloco obrigatório, geralmente a tag H1. Essa é a visão e a visão do seu componente. Está intimamente relacionado aos blocos de script e estilo, pois define seu comportamento e design.

Para ter uma idéia melhor da criação de todos esses componentes, sugiro que você leia uma explicação breve e compreensível de A shot of code:

Por esses motivos, podemos considerar o Svelte como uma biblioteca tentando trazer modularidade para o frontend. Essa modularidade é suportada pelo agrupamento de vários componentes. No entanto, a estrutura também isola o modelo, a lógica e o design. Por padrão, o Svelte cria estilos para cada componente separadamente. Ou seja, você evitará vazamentos de estilo entre os componentes, o que não garante o uso de outras estruturas.

Também é importante notar que o Svelte interage bem com uma variável JavaScript chamada name. Este é um novo conceito do Svelte v3. Qualquer variável no script do seu componente agora pode ser acessada a partir da marcação HTML. Também não há nenhuma sintaxe específica da estrutura que você precise aprender para gerenciar estados. Você não precisa lidar comdataVue, $scopeAngular ou this.stateReagir. Em vez disso, você pode usar em qualquer lugar letpara atingir valores de estado atribuídos. Alterar valores sempre que causa automaticamente uma nova renderização.

É assim que fica na prática:

Criar um componente Svelte é semelhante a trabalhar com o CodePen. Você não precisa se perguntar como conectar a função JS declarativa que aprendeu com algumas DOM query-selector. Svelte não afetará window listenersou callback functions. Esses fundamentos permanecem como deveriam ser.

Outra coisa interessante sobre esses componentes é que eles são tão prioritários quanto os tradicionais. Tudo o que você precisa fazer é importar o .html e o Svelte entenderá como implantá-lo.

O que mais você precisa saber sobre o Svelte.js

Vamos falar sobre as outras vantagens importantes do Svelte no processo de desenvolvimento em comparação com outras estruturas.

Apropriado para iniciantes

Mencionamos anteriormente que o motivo da popularidade do Svelte se deve em parte à sua simplicidade para iniciantes. Ao usá-lo, não há necessidade de manipular o DOM. Além disso, você não precisa compreender os wrappers de estados específicos da estrutura. O acesso às variáveis pode ser obtido diretamente da marcação, e isso simplifica bastante o processo de criação de um aplicativo. Trabalhando com o Svelte, os programadores podem aprender os princípios básicos do estado dos componentes sem se confundir nos detalhes.

O Svelte fornece sua própria sintaxe para instruções condicionais e loops para exibir elementos DOM. O princípio de operação aqui é semelhante ao JSX. No entanto, todos esses colchetes nos quais os iniciantes podem se perder facilmente não são tão importantes.

Vale a pena mencionar uma peculiaridade no Svelte: ele passa propriedades para componentes. Essa estrutura é fácil de aprender e totalmente funcional, mas, ao gosto de alguns desenvolvedores, a sintaxe é muito exótica.

compatibilidade com versões anteriores

Anteriormente, se você precisasse integrar, por exemplo, algum widget de calendário ou qualquer outro aplicativo, você só poderia fazer isso usando a mesma versão da estrutura na qual o widget foi construído. Ou seja, se você criar o aplicativo em Angular e o widget for construído em React, não poderá integrá-lo. No entanto, se o widget ou seu aplicativo for criado usando o Svelte, isso será possível.

Separação de código

Digamos que você use o React como estrutura principal. Se você inicialmente usa apenas um componente React, e não muito, ainda precisa fazer o download do React inteiro. Com o Svelte, a separação de código é muito mais eficiente, pois a estrutura é incorporada ao componente e esse componente é muito pequeno.

Comunidade de código aberto de suporte

Svelte é um software de código aberto desenvolvido por entusiastas. Portanto, o uso da estrutura Svelte é gratuito e permite implementar muitas funções gratuitamente. Além disso, o Svelte possui uma comunidade ativa de desenvolvedores no GitHub, da qual você pode participar e onde sempre pode pedir ajuda ou contribuir com essa tecnologia.

O Svelte é suficientemente estável e confiável

Esta é uma questão urgente para a estrutura que está no mercado recentemente. Todos os exemplos acima estão relacionados à sintaxe do Svelte versão 3. No momento, ele ainda está na versão beta. Comparado aos gigantes do setor, como ReactJS e VueJS, ele não é muito desenvolvido.

Não importa o quão interessante seja o SvelteJS, você deve esperar um pouco antes de dar aulas de mestrado no código que o usa. Isso ocorre porque a versão beta pode ser um pouco diferente da versão final. No entanto, o Svelte oferece documentação concisa para a versão 3, o que pode facilitar para iniciantes. Portanto, essa estrutura certamente pode ser vista como parte de sua pilha de tecnologia confiável.

O Svelte.js é o próximo gigante?

Difícil de responder. O Svelte pode vencer o Vue e o React como uma estrutura de front-end que resistirá ao teste do tempo?

Isso não é tão fácil de prever. No momento, ele ainda não atingiu o nível de popularidade de alguns de seus irmãos. Ele não tem o mesmo apoio de uma grande corporação que o React. Mas, novamente, Vue se saiu muito bem sem ela.

No ano passado, outro estudo do JS foi conduzido. É realizado anualmente para avaliar as preferências dos principais desenvolvedores. O Svelte se tornou o mais popular em comparação com outras bibliotecas incluídas na pesquisa. Isso pode significar que mais cedo ou mais tarde será considerado um dos melhores frameworks JS.

Svelte vs. React é um tópico comum de discussão entre programadores, mas um dos frameworks não é necessariamente claramente melhor que o outro. O Svelte é adequado para o desenvolvimento de aplicativos da Web ou MVP, enquanto o Angular é adequado para o PWA ou aplicativos da Web corporativos. Alguns desenvolvedores encontram uma estrutura que eles gostam e mantêm, mas mesmo assim, não deixe isso tentar experimentar o Svelte. Você pode gostar dos recursos que descrevemos.

Vamos

analisar brevemente os principais recursos do Svelte novamente : ️

Essa é uma estrutura baseada em componentes que não requer plugins adicionais.
️ Funciona com a administração do estado sem dificuldades familiares.
️ Permite usar os estilos internos [no componente] sem a necessidade de CSS-in-JS; portanto, não são necessárias extensões para o editor de código ou sintaxe estranha.
️ Um script de construção muito simples é suficiente para começar.
️Para iniciar o trabalho no projeto base, praticamente nenhum arquivo é necessário.

Se você é um desenvolvedor web que precisa de uma nova estrutura, verifique se o Svelte vale a pena tentar. Em outros casos, se você estiver procurando a melhor tecnologia para sua solução da Web, o Svelte pode ser uma boa opção que merece atenção.

Por que você deve usar o Svelte para seus projetos da web