Aula 01 - Introdução ao Frontend Moderno 🌐

O Despertar do Svelte

Agenda de Hoje 📅

1. O que é Frontend em 2026?
2. Evolução das Arquiteturas Web
3. Frameworks: Heróis ou Vilões?
4. Por que escolher o Svelte?
5. O Poder do Compilador
6. Setup do Ambiente
7. Nosso primeiro componente

1. O que é Frontend? 🎨

• Não é apenas "fazer sites".
• É a ponte entre o usuário e a lógica de negócio.
• Engloba Performance, Acessibilidade e Experiência (UX).

2. Evolução da Web 📜

2.1 Web Estática 🏛️

• HTML puro enviado pelo servidor.
• Cada clique = Recarregamento total da página.
• Interatividade limitada (apenas links).

2.2 Web Dinâmica & jQuery 🔋

• Manipulação direta do DOM via scripts.
• "Macarronada" de seletores ($('.btn').click(...)).
• Difícil de manter em projetos grandes.

2.3 Single Page Applications (SPA) 🏢

• O navegador baixa a aplicação uma única vez.
• Apenas os dados (JSON) trafegam após o load inicial.
• Experiência fluida de "app nativo".

Fluxo de uma SPA

sequenceDiagram
    participant User
    participant Browser
    participant API
    User->>Browser: digita URL
    Browser->>API: solicita App (HTML/JS/CSS)
    API-->>Browser: envia App completo
    Browser->>User: Renderiza tela inicial
    User->>Browser: Clica em "Perfil"
    Browser->>API: solicita apenas Dados (JSON)
    API-->>Browser: envia JSON
    Browser->>User: Atualiza tela sem recarregar

3. Por que usar Frameworks? 🛠️

• Reutilização de código (Componentes).
• Sincronização automática entre Dados e UI.
• Ecossistema de ferramentas prontas.

4. O Cenário Atual 🗺️

• React: O gigante do mercado.
• Vue: Flexível e amigável.
• Angular: Estruturado para grandes corporações.
• Svelte: O "game changer" disruptivo.

5. Conheça o Svelte ⚡

"Escreva menos código, crie interfaces melhores."

• Criado por Rich Harris em 2016.
• Foco em Performance e Simplicidade.

5.1 O Diferencial: Compilação 🏗️

• Enquanto outros frameworks fazem o trabalho no navegador (tempo de execução)...
• ... o Svelte faz o trabalho no seu computador (tempo de compilação).

5.2 Adeus Virtual DOM 👋

• No Svelte, não há comparação de árvores complexas no navegador.
• Ele gera código JS puro que atualiza o DOM de forma cirúrgica.

Comparação de Tamanho (Bundle)

6. Filosofia do Svelte 🧘

• Reatividade Nativa: Sem setState ou mutations.
• Escopo Automático: CSS isolado por padrão.
• Menos Abstração: Use HTML, JS e CSS reais.

7. Setup do Ambiente 🚀

Requisitos de Software

1. Node.js: O motor que roda nosso ambiente de build.
2. VS Code: Nosso editor de código preferido.
3. NPM: Gerenciador de pacotes.

Criando o Projeto (Vite)

# No terminal:
npm create vite@latest meu-projeto -- --template svelte
cd meu-projeto
npm install
npm run dev

8. Estrutura do Projeto 📂

• src/: Onde a mágica acontece.
• App.svelte: O componente principal.
• main.js: Ponto de entrada da aplicação.
• public/: Arquivos estáticos (ícones, fotos).

9. Anatomia de um componente .svelte

<script>
  let nome = "Mundo";
</script>

<h1>Olá {nome}!</h1>

<style>
  h1 { color: orange; }
</style>

10. Resumo da Aula ✅

• Frontend moderno é sobre SPAs e Componentes.
• Svelte elimina a sobrecarga (overhead) via compilação.
• O ambiente Vite é extremamente rápido.

Próxima Aula: Fundamentos do Svelte 🔨

• Variáveis e Reatividade.
• Interpolação de dados.
• O arquivo .svelte em detalhes.

Dúvidas? 🤔

"O código mais rápido é aquele que não precisa ser executado no navegador do usuário."