O que é Svelte e por que ele compila
Entenda a abordagem do Svelte baseada primeiramente no compilador e como ela difere do React e do Vue.
O que é Svelte e por que ele compila é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
Boas-vindas ao Svelte
Svelte é uma estrutura de interface do usuário que prioriza o compilador. Diferentemente de React ou Vue, Svelte realiza a maior parte do trabalho em tempo de compilação, não em tempo de execução.
Sem DOM virtual
React compara um DOM virtual em tempo de execução. Svelte, por sua vez, compila seus componentes em JavaScript puro altamente otimizado, que atualiza o DOM diretamente.
Menos código enviado
Como Svelte envia código compilado, geralmente você envia menos JavaScript ao navegador. Os tamanhos dos pacotes são mínimos.
Formato de arquivo de componente
Um componente Svelte fica em um arquivo .svelte que contém três seções opcionais: código, marcação e estilos.
<script>
let name = "world";
</script>
<h1>Hello {name}!</h1>Reatividade por atribuição
No Svelte, basta atribuir um novo valor a uma variável para acionar uma atualização da interface. Não há nenhuma chamada para setState.
<script>
let count = 0;
function inc() { count = count + 1; }
</script>
<button on:click={inc}>{count}</button>Componentes em arquivo único
A marcação, a lógica e os estilos com escopo ficam juntas em um único arquivo. Manter tudo no mesmo lugar facilita entender e reorganizar os componentes.
Estilos com escopo por padrão
Qualquer <style> que você escreva fica limitado apenas ao componente. Chega de conflitos de CSS entre páginas.
<style>
p { color: tomato; }
</style>
<p>I am tomato</p>Ganhos de desempenho
Como não há sobrecarga de uma estrutura em tempo de execução, os aplicativos Svelte tendem a ser mais rápidos que aplicativos React ou Vue equivalentes em dispositivos básicos.
SvelteKit, a metastrutura
SvelteKit se baseia em Svelte e adiciona roteamento, SSR e carregamento de dados. A maioria dos aplicativos Svelte em produção usa SvelteKit.
Quando Svelte se destaca
Svelte é ideal para sites promocionais, painéis, aplicativos compatíveis com dispositivos móveis e qualquer situação em que o tamanho do pacote e o DX sejam importantes.
Resumo da comparação
React, Vue e Angular enviam uma estrutura de execução; Svelte a remove durante a compilação. O resultado são pacotes menores e modelos mentais mais simples.
Verificação rápida
Teste seu entendimento.
Resumo
Agora você sabe que Svelte compila componentes, envia menos JS, usa estilos com escopo e alimenta o SvelteKit para criar aplicativos completos. Em seguida: crie seu primeiro projeto.
Perguntas Frequentes
A aula “O que é Svelte e por que ele compila” é grátis?
Sim — o texto completo de “O que é Svelte e por que ele compila” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “O que é Svelte e por que ele compila”?
Entenda a abordagem do Svelte baseada primeiramente no compilador e como ela difere do React e do Vue. Você pratica Sveltejs Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “O que é Svelte e por que ele compila”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Sveltejs Academy?
Sim. Cada aula de Sveltejs Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- O que é Svelte e por que ele compila
- Criando um projeto com npm create svelte
- Estrutura do projeto: src routes static
- O servidor de desenvolvimento e a substituição a quente de módulos