Aula 01 - Introdução ao Desenvolvimento Frontend Moderno 🌐

Objetivo

Objetivo: Compreender a evolução das tecnologias de frontend, entender o conceito de Single Page Applications (SPA) e como a reatividade mudou a forma de construir interfaces web modernas.

1. A Evolução do Frontend 🚀

O desenvolvimento web percorreu um longo caminho desde as páginas HTML estáticas dos anos 90 até as aplicações altamente interativas de hoje.

🏛️ Web 1.0: Páginas Estáticas (MPA)

Antigamente, cada clique em um link solicitava uma página inteira do servidor. * MPA (Multi-Page Application): Todo o processamento era feito no backend. * Experiência: Lenta, com "piscadas" brancas a cada navegação.

⚡ Web 2.0 e o Surgimento do AJAX

Com o AJAX, passamos a atualizar partes da página sem recarregá-la completamente. Isso abriu portas para redes sociais e apps como o Gmail.

📱 Era das SPAs (Single Page Applications)

Aplicações modernas carregam uma única página e usam JavaScript para trocar o conteúdo dinamicamente. * Vantagem: Fluidez de aplicativo nativo no navegador.

2. SPA vs MPA: Qual a diferença? ⚖️

Característica	🏛️ MPA (Tradicional)	⚡ SPA (Moderno)
Carregamento	Páginas inteiras a cada clique	Carrega uma vez, troca componentes
Processamento	Focado no Servidor	Focado no Navegador (Cliente)
Experiência	Mais lenta, recarregamentos	Fluida, transições suaves
SEO	Nativo e fácil	Exige configurações (SSR/SSG)

Fluxo de Comunicação (Mermaid)

graph LR
    subgraph "Modelo MPA"
        C1[Browser] -- "Solicita Pagina_A.html" --> S1[Servidor]
        S1 -- "Envia HTML Completo" --> C1
    end

    subgraph "Modelo SPA"
        C2[Browser] -- "Solicita dados (JSON)" --> S2[API]
        S2 -- "Envia apenas Dados" --> C2
        C2 -- "JavaScript renderiza UI" --> C2
    end

3. O Conceito de Reatividade 🧠

A reatividade é o "superpoder" dos frameworks modernos. Ela garante que, quando os dados mudam, a interface (UI) atualize automaticamente.

Conceito Chave

Em sistemas tradicionais, você precisava buscar o elemento no DOM e alterar seu texto manualmente. Em frameworks reativos como o Svelte, você apenas altera o valor da variável e o framework cuida do resto.

4. Frameworks Modernos: Onde o Svelte se encaixa? 🧩

Existem três grandes players no mercado (React, Vue, Angular), mas o Svelte trouxe uma abordagem revolucionária:

React/Vue: Usam o Virtual DOM (uma cópia da página na memória) para comparar mudanças no navegador.
Svelte: É um compilador. Ele transforma seu código em JavaScript puro e eficiente durante o build, eliminando a necessidade de uma "biblioteca" pesada rodando junto com o seu site.

5. Verificando o Ambiente 💻

Antes de começarmos, precisamos garantir que seu computador está pronto para o Svelte.

<div id="termynal" data-termynal>
    <span data-ty="input">node --version</span>
    <span data-ty="progress"></span>
    <span data-ty>v20.10.0</span>
    <span data-ty="input">npm --version</span>
    <span data-ty>10.2.3</span>
</div>

Atenção

Certifique-se de ter o Node.js instalado (versão 18 ou superior). Se não tiver, acesse o guia de Configuração de Ambiente.

6. Mini-Projeto: Seu Primeiro "App" Estático 🚀

Para sentir a diferença, vamos apenas visualizar a estrutura básica que o Vite (nossa ferramenta de build) cria para o Svelte.

Abra seu terminal.
Tente rodar o comando abaixo (não precisa criar agora, apenas observe):

$ npx create-vite meu-projeto --template svelte
$ cd meu-projeto
$ npm install
$ npm run dev

Dica

O Svelte é conhecido por ter "menos código". Você verá que um componente Svelte parece muito com uma página HTML normal, o que facilita muito o aprendizado.

7. Exercício de Fixação 📝

Responda para validar seu conhecimento:

O que define uma Single Page Application (SPA)?
Explique com suas palavras o que é reatividade no frontend.
Qual o principal diferencial do Svelte em relação ao React e Vue (Dica: compile-time vs run-time)?

Próxima Aula: Vamos mergulhar no Svelte e entender como a compilação funciona! 🏗️