Aula 20 - Projeto Capstone: Aplicação Web Vanilla SPA Autônoma 🏆

📑 1. Fundamentos Teóricos & Análise Técnica

O Projeto Capstone de JavaScript e DOM é a oportunidade de consolidar todo o ecossistema da linguagem sem a muleta de frameworks externos. A criação de uma Single Page Application (SPA) em JavaScript puro (Vanilla JS) exige que o desenvolvedor domine os mecanismos subjacentes que bibliotecas como React, Vue ou Angular executam por debaixo dos panos.

O projeto exige a implementação dos seguintes subsistemas de engenharia: 1. Roteador Baseado em History API: Gerenciamento de rotas no cliente com history.pushState(), history.replaceState() e interceptação do evento popstate, permitindo navegação instantânea com URLs limpas. 2. Motor de Reatividade Baseado em Proxy: Observação de alterações de dados em tempo real através da API nativa Proxy, disparando atualizações seletivas na view sem redesenhar o documento inteiro. 3. Arquitetura Baseada em Componentes Web: Encapsulamento de estilos e estruturas com Shadow DOM e Custom Elements (Web Components nativos). 4. Camada de Comunicação com Backend: Módulo HTTP baseado em fetch com interceptores de erro, retry automático com backoff exponencial e suporte a cancelamento via AbortController.

📐 Arquitetura Conceitual & Diagrama de Fluxo

graph TD
    User["Ação do Usuário (Navegação / Input)"] --> Router["Client-Side Router (History API)"]
    Router --> Controller["Controlador do Módulo"]
    Controller --> Store["Store Reativa (ES6 Proxy)"]
    Store -->|Trigger Reativo| View["Renderizador Seletivo (DOM)"]
    Controller --> Service["Serviço HTTP (Fetch + AbortController)"]
    Service --> API["API Externa / Servidor REST"]
    style User fill:#e1f5fe,stroke:#01579b
    style Router fill:#fff3e0,stroke:#e65100
    style Store fill:#e8f5e9,stroke:#2e7d32
    style View fill:#f3e5f5,stroke:#7b1fa2

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Roteamento Cliente Resiliente: URLs que funcionam com botão Voltar/Avançar do navegador e preservam o estado da sessão. - Reatividade com Proxy ES6: Intercepção de operações de set para atualizar nós pontuais da interface de forma cirúrgica. - Resiliência de Rede: Cancelamento automático de requisições pendentes ao navegar para outra página antes do término do download. - Zero Dependências Externas: Demonstração de proficiência sênior em APIs padrão do ECMAScript e do W3C.

🛠️ 2. Implementação Prática em JavaScript Vanilla e Arquitetura SPA

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// vanilla-spa-core.js (Núcleo do Roteador e Estado Reativo)
// 1. Estado Reativo com Proxy
function createReactiveStore(initialState, onUpdate) {
  return new Proxy(initialState, {
    set(target, prop, value) {
      target[prop] = value;
      onUpdate(prop, value);
      return true;
    }
  });
}

// 2. Roteador Client-Side com History API
class Router {
  constructor(routes, outletId) {
    this.routes = routes;
    this.outlet = document.getElementById(outletId);
    window.addEventListener('popstate', () => this.resolveRoute());
  }

  navigate(path) {
    window.history.pushState({}, '', path);
    this.resolveRoute();
  }

  resolveRoute() {
    const path = window.location.pathname || '/';
    const component = this.routes[path] || this.routes['/404'];
    this.outlet.innerHTML = '';
    this.outlet.appendChild(component.render());
  }
}

// Inicialização da SPA
const store = createReactiveStore({ count: 0 }, (prop, val) => {
  const el = document.getElementById('counter-display');
  if (el) el.textContent = val;
});

💡 Análise Passo a Passo do Código

1. Proxy Trap: O método set() intercepta qualquer alteração de estado e notifica imediatamente a função onUpdate.
2. History Popstate: O listener em popstate escuta as setas de navegação do browser e troca a tela sem recarregar a página.
3. Injeção Limpa: outlet.innerHTML = '' limpa o contêiner de visualização e injeta o novo nó renderizado.

🎯 3. Próximos Passos & Sequência Didática