Pular para conteúdo

Aula 02 - Introdução ao Svelte 🏗️

Objetivo

Objetivo: Compreender o que torna o Svelte único, entender o processo de compilação e criar o seu primeiro projeto utilizando o Vite.

1. O que é o Svelte? 🧩

O Svelte é um framework para a criação de interfaces de usuário, mas com uma diferença fundamental: ele não carrega o peso de uma biblioteca no navegador.

Tradicionalmente, frameworks como React e Vue fazem a maior parte de seu trabalho no navegador do usuário (tempo de execução). O Svelte move esse trabalho para uma fase de compilação que acontece quando você constrói seu aplicativo.

🌟 Principais Vantagens:

  • Performance Absurda: O código resultante é JavaScript puro e altamente otimizado.
  • Menos Código: Você escreve muito menos para fazer a mesma coisa.
  • Sem Virtual DOM: Menos overhead de memória no navegador.

2. Como funciona a Compilação? ⚙️

Enquanto outros frameworks comparam o DOM "virtual" com o real para saber o que mudar, o Svelte gera código que sabe exatamente qual parte do DOM atualizar quando uma variável muda.

Fluxo de Trabalho (Mermaid)

graph TD
    subgraph "Frameworks Tradicionais (React/Vue)"
        A[Código JS] --> B[Biblioteca em Runtime]
        B --> C[Virtual DOM]
        C --> D[Patch no DOM Real]
    end

    subgraph "Svelte (O Compilador)"
        E[Código .svelte] --> F{Svelte Compiler}
        F -- "Build Time" --> G[JS Puro e Direto]
        G -- "Runtime" --> H[Update DOM Real]
    end

3. Virtual DOM vs Svelte 🥊

O Virtual DOM foi uma inovação incrível, mas ele consome recursos. O Svelte provou que podemos ser reativos sem precisar dele.

Característica Frameworks com VDOM Svelte
Peso do Bundle Maior (Apps precisam da biblioteca) Mínimo (Apenas seu código)
Mudanças Compara árvores de objetos Atualiza o nó específico via código gerado
Aprendizado Exige entender JSX ou Hooks complexos Quase HTML/JS puro

4. Criando seu Primeiro Projeto 🚀

Vamos usar o Vite, que é o "motor" mais moderno e rápido para desenvolvimento frontend.

<div id="termynal" data-termynal>
    <span data-ty="input">npm create vite@latest meu-primeiro-app -- --template svelte</span>
    <span data-ty="progress"></span>
    <span data-ty>✔ Done. Now run:</span>
    <span data-ty="input">cd meu-primeiro-app</span>
    <span data-ty="input">npm install</span>
    <span data-ty="input">npm run dev</span>
</div>

Nota

O comando acima cria uma estrutura base pronta para você começar a codar imediatamente.

5. Estrutura de Arquivos Base 📂

Após criar o projeto, você verá uma estrutura parecida com esta:

  • src/main.js: Ponto de entrada da aplicação.
  • src/App.svelte: O componente principal (onde a mágica acontece).
  • public/: Arquivos estáticos (imagens, ícones).
  • index.html: O arquivo HTML que carrega seu app.

6. Mini-Projeto: Ola Mundo com Estilo 🎨

Sua missão nesta aula é: 1. Criar seu projeto com o comando visto acima. 2. Abrir o arquivo App.svelte. 3. Alterar o texto dentro da tag <h1> para "Olá, Svelte!". 4. Rodar o projeto e ver a mudança no navegador.

Dica Visual

O VS Code com a extensão oficial do Svelte é obrigatório para ter coloração de código e sugestões inteligentes!

7. Exercício de Fixação 📝

  1. Por que dizemos que o Svelte é um compilador e não apenas uma biblioteca?
  2. Descreva uma desvantagem do uso do Virtual DOM.
  3. O que é o Vite e qual sua função no desenvolvimento com Svelte?

Próxima Aula: Vamos explorar a Sintaxe Básica e a Estrutura de um Componente! 📜