Um Framework Diferente

Você está prestes a construir o BookIt — um aplicativo de agendamento de serviços onde clientes podem navegar por serviços, fazer reservas e gerenciar seus compromissos. Mas antes de escrever qualquer código, vamos entender a ferramenta que usaremos para construí-lo.

O Svelte não é como outros frameworks JavaScript. Enquanto React e Vue enviam um runtime para os navegadores dos seus usuários, o Svelte realiza seu trabalho pesado em tempo de compilação. Essa diferença fundamental molda tudo sobre como você construirá o BookIt.

O que Você Vai Aprender

Como o Svelte difere de frameworks de runtime como React e Vue
O que "compiler-first" significa na prática
Por que o Svelte produz aplicações menores e mais rápidas
Como o SvelteKit estende o Svelte para aplicações completas

O Problema do Runtime

A maioria dos frameworks JavaScript funciona da mesma forma: seu navegador baixa o código do framework, então o framework descobre o que renderizar e como atualizá-lo quando as coisas mudam.

Aqui está o fluxo típico com um framework de runtime:

O navegador baixa o código do seu app
O navegador baixa o framework (React: ~40KB, Vue: ~33KB)
O framework inicializa e lê as definições dos seus componentes
O framework constrói uma representação virtual da sua UI
Quando o estado muda, o framework compara a UI virtual antiga e a nova
O framework calcula as atualizações mínimas necessárias no DOM
O framework aplica essas atualizações

Isso é muito trabalho acontecendo nos navegadores dos seus usuários — trabalho que é essencialmente o mesmo para todo app que usa esse framework.

A Abordagem do Svelte

O Svelte inverte esse modelo. Em vez de enviar um framework que interpreta seu código em runtime, o Svelte compila seus componentes em JavaScript puro em tempo de compilação.

Quando você escreve um componente Svelte, o compilador o analisa e gera código altamente otimizado que sabe exatamente como atualizar o DOM quando o estado muda. Sem Virtual DOM diffing. Sem overhead de framework. Apenas atualizações cirúrgicas no DOM.

Aqui está como o fluxo do Svelte funciona:

Você escreve componentes Svelte
O compilador Svelte os transforma em JavaScript otimizado
O navegador baixa apenas o código compilado do seu app
Seu código atualiza o DOM diretamente quando o estado muda

A percepção chave: toda aquela lógica de "descobrir o que mudou" é movida do runtime para o tempo de compilação. Seus usuários não pagam por isso.

O que Isso Significa para o BookIt

Quando construirmos o BookIt, essa abordagem de compilador nos dá benefícios concretos.

Bundles menores. O JavaScript que enviamos contém apenas o que o BookIt precisa — sem runtime de framework. Um app Svelte típico envia de 3 a 5KB de código de framework versus 30 a 40KB do React.

Inicialização mais rápida. Menos JavaScript significa menos para baixar, analisar e executar. O BookIt ficará interativo mais rapidamente.

Modelo mental mais simples. Componentes Svelte parecem HTML com superpoderes. Você escreve o que parece ser HTML, CSS e JavaScript padrão, e o compilador cuida da reatividade.

Aqui está uma prévia de como um componente Svelte simples se parece:

<!-- filename: ServiceCard.svelte -->
<script>
  let { name, price } = $props()
</script>

<div class="card">
  <h3>{name}</h3>
  <p>${price}</p>
</div>

<style>
  .card {
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
  }
</style>

Esse é um componente completo. O {name} e o {price} no HTML são reativos — quando eles mudam, o Svelte atualiza apenas esses nós de texto. Sem algoritmo de diffing, sem reconciliação. O compilador gerou código que diz "quando name mudar, atualize este nó de texto específico."

Svelte vs SvelteKit

Você verá ambos os termos ao longo deste curso. Aqui está a distinção:

Svelte é o framework de componentes e o compilador. Ele cuida de componentes de UI, reatividade e estilização.

SvelteKit é o framework de aplicação construído sobre o Svelte. Ele adiciona roteamento, renderização no lado do servidor, carregamento de dados, manipulação de formulários e tudo mais que você precisa para uma aplicação web completa.

Pense desta forma: Svelte é para construir componentes, SvelteKit é para construir aplicações. O BookIt é uma aplicação SvelteKit composta por componentes Svelte.

Usaremos o SvelteKit desde o início porque o BookIt precisa de roteamento (páginas diferentes para serviços, reservas, etc.), carregamento de dados (buscar serviços de um banco de dados) e manipulação de formulários (enviar solicitações de reserva). O SvelteKit fornece tudo isso pronto para uso.

Svelte 5: A Versão Mais Recente

Este curso usa o Svelte 5, a versão principal mais recente lançada no final de 2024. O Svelte 5 introduziu as "runes" — uma nova forma de lidar com reatividade que é mais explícita e poderosa do que as versões anteriores.

Se você já viu tutoriais mais antigos de Svelte, pode notar algumas diferenças de sintaxe. Os conceitos principais permanecem os mesmos, mas as runes do Svelte 5 oferecem mais controle e melhor suporte a TypeScript.

Não se preocupe se você não usou versões anteriores — aprenderemos o Svelte 5 do zero. E se você já usou o Svelte antes, os novos padrões parecerão familiares após as primeiras lições.

Resumo

O Svelte é um compilador que transforma seus componentes em JavaScript otimizado em tempo de compilação. Em vez de enviar um runtime de framework para interpretar seu código no navegador, o Svelte gera código que sabe exatamente como atualizar o DOM.

Principais conclusões:

O Svelte compila componentes em tempo de compilação, não em runtime
Isso produz bundles menores e aplicações mais rápidas
O SvelteKit adiciona roteamento, carregamento de dados e recursos completos de aplicação
Estamos usando o Svelte 5 com a nova sintaxe de runes

Próximos Passos

Agora que você entende o que torna o Svelte diferente, vamos colocá-lo em prática. Na próxima lição, Criar o Projeto BookIt, vamos estruturar nossa aplicação SvelteKit e conhecer a estrutura de arquivos com a qual trabalharemos ao longo deste curso.