O Svelte é um framework com uma nova maneira de desenvolver interfaces de usuário. Frameworks tradicionais como React e Vue fazem a maior parte do trabalho no browser, o Svelte realiza esse trabalha em uma etapa de compilação que acontece quando você constrói a sua aplicação.
Sem utilizar técnicas como virtualização do DOM, o Svelte escreve código que cirurgicamente atualiza o DOM quando o estado do seu app muda. A diferença crucial entre o Svelte e outros frameworks JavaScript é que o Svelte converte o seu app para JavaScript ideal em tempo de construção, ao invés de interpretar seu código em tempo de execução. Isso significa que você não terá que considerar custo de performance das abstrações do framework, e você não terá penalidades quando seu app carregar pela primeira vez.
Você pode escrever o seu aplicativo do zero utilizando o Svelte, ou pode adicioná-lo de forma incremental à uma base de código já existente. Você também pode utilizar componentes como pacotes independentes, que funcionam em qualquer lugar, sem a sobrecarga de dependências de um framework convencional.
Componentes
No Svelte, uma aplicação é composta de um ou mais componentes. Um componente é um bloco de código reutilizável que encapsula HTML, CSS e JavaScript juntos em um arquivo .svelte.
Por exemplo:
<script> let nome = "mundo"; </script> <h1> Olá Mundo!</h1>
E podemos utilizar uma referência à variável nome, criada acima!
<h1>Olá {nome}!</h1>
E isso nos trará o resultado:
Olá mundo!
Também podemos armazenar caminhos de url e pastas de armazenamento em variáveis, e utilizá-las em atributos de nossos elementos HTML, como:
<script>
let caminhoOrigem = "imagem/foto.png";
</script>
<img src={caminhoOrigem}>
E isso funcionará. Mas o Svelte nos trará uma mensagem:
A11y: <img> element should have an alt attribute
Quando estamos criando web apps, é importante ter certeza que ele será acessível para todos os usuários, e isso inclui pessoas com dificuldades de visão ou movimento, ou até mesmo pessoas com boa conexão à internet e com bom hardware. A acessibilidade é de extrema importância no desenvolvimento e o Svelte auxilia avisando-o se você não escreveu elementos de marcação acessíveis.
Nesse caso, teremos:
<img src={caminhoOrigem} alt="Seu texto acessível aqui.">
Você pode fazer o download do Svelte diretamente no site em um arquivo .zip ou utilizando o npm e npx:
npx degit sveltejs/template my-svelte-project cd my-svelte-project npm install npm run dev
Você pode verificar a documentação em: https://svelte.dev/tutorial/basics
Gostou deste artigo? Comente abaixo!
Referência: https://svelte.dev/