Introdução ao Frontend Moderno 🚀

Aula 01 - Desenvolvimento com Vue.js

🌍 O Cenário do Desenvolvimento Web

• De sites estáticos para Aplicações Complexas
• A ascensão do ecossistema JavaScript
• Experiência do Usuário (UX) como prioridade

📄 MPA (Multi-Page Application)

• Modelo tradicional "Server-Side"
• Recarrega a página a cada clique
• Mais simples, porém menos fluida

⚡ SPA (Single Page Application)

• Carrega uma vez, altera o conteúdo dinamicamente
• Não há recarregamento brusco do browser
• Sensação de aplicativo nativo no navegador

🥊 SPA vs MPA

graph LR
    A[MPA] --> B[Request HTML]
    B --> C[Server Renders Page]
    C --> D[Browser Reloads]

    E[SPA] --> F[Request JS Bundle]
    F --> G[Browser Renders UI]
    G --> H[JS Updates DOM]

🟢 O que é o Vue.js?

• Framework Progressivo para interfaces de usuário
• Focado na camada de visualização (View)
• Criado por Evan You em 2014

📈 Por que "Progressivo"?

• Pode ser usado em uma pequena parte de uma página
• Pode ser usado para construir SPAs gigantes
• Escala conforme a necessidade do projeto

🏗️ Ecossistema Vue 3

• Vue Router: Navegação
• Pinia: Gerenciamento de Estado
• Vite: Ferramenta de Build ultra-rápida

🧬 Composition API

• A nova forma de escrever Vue 3
• Melhor organização de código
• Reutilização de lógica facilitada

🛠️ Ferramentas Necessárias

• Node.js: Ambiente de execução JS
• NPM/PNPM: Gerenciadores de pacote
• VS Code: Editor recomendado

🚀 Criando o Primeiro Projeto

npm create vite@latest meu-app
# Selecione Vue
# Selecione JavaScript

🧐 O que é o Vite?

• O sucessor do Webpack/Vue CLI
• Hot Module Replacement (HMR) instantâneo
• Focado na velocidade de desenvolvimento

🔄 Client-Side Rendering (CSR)

• O servidor envia um HTML vazio e um Script
• O script constrói o site no navegador do usuário
• Menos carga no servidor, mais carga no cliente

🧩 Componentização: Ideia Central

• Dividir a interface em pequenas peças
• Peças independentes e reutilizáveis
• Facilita a manutenção e testes

🎨 Exemplo Visual de Componentes

graph TD
    App[Componente App] --> Header[Componente Header]
    App --> Main[Componente Main]
    App --> Footer[Componente Footer]
    Main --> List[Componente List]
    List --> Item[Componente Item]

📜 Reatividade: O Coração do Vue

• Os dados mudam -> A tela atualiza sozinha
• O Vue monitora as variáveis automaticamente
• Sem manipulação manual do DOM (document.get...)

📦 Gerenciamento de Pacotes

• package.json: Manifesto do projeto
• node_modules: Onde as bibliotecas moram
• npm install: Baixa as dependências

💻 Olá, Mundo no Vue 3

<script setup>
  const msg = "Olá, Frontend!"
</script>

<template>
  <h1>{{ msg }}</h1>
</template>

🌟 Vantagens do Vue

• Curva de aprendizado suave
• Excelente documentação
• Performance de altíssimo nível

🎯 Próximos Passos

• Configurar ambiente
• Entender a estrutura de pastas
• Criar os primeiros componentes reativos

🏁 Dúvidas?

Obrigado! Acesse o portal para exercícios e quizzes.